Noisy Pterodactyl Melodies

    wepy-modal

    1.1.3 • Public • Published

    wepy-modal

    基于wepy框架开发的微信小程序modal组件

    使用

    1、安装

      npm install wepy-modal -S

    2、引入

    <template>
      <view class="container">
        <modal/>
      </view>
    </template>
     
    <script>
      import wepy from 'wepy'
      import modal from 'wepy-modal'
     
      export default class extends wepy.page {
        components = {
          modal
        }
      }
    </script> 
     

    3、使用方法

    3.1、通过invoke调用

      this.$invoke('modal', 'showModal', {
        title: 'modal标题'
      });

    3.2 通过props参数控制

    <template>
      <view class="container">
        <modal
          :visible.sync="modalVisible"
        >
        </modal>
      </view>
    </template>
     
    <script>
      import wepy from 'wepy';
      import modal from '../components/test/modal';
     
      export default class ModalStudy extends wepy.page {
        data = {
          modalVisible: false
        }
     
        components = {
          modal
        }
     
        methods = {
          showModal() {
            this.modalVisible = true;
          }
        }
      }
    </script> 

    4、参数说明

    4.1 代码演示

    <template>
      <view class="container">
        <modal
          title="modal测试"
          className="modal-test"
          :cancelTxt.sync="cancelTxt"
          :okTxt.sync="okTxt"
          :visible.sync="modalVisible"
          :showOk.sync="showOk"
          :showCancel.sync="showCancel"
          :actionMode.sync="actionMode"
          :actions="actions"
          @onClickItem.user="handleClickItem"
          @onClickOk.user="handleClickOk"
          @onClickCancel.user="handleClickCancel"
        >
          <view slot="body">
            <view>body内容填充区</view>
          </view>
        </modal>
      </view>
    </template>
     
    <script>
      import wepy from 'wepy';
      import modal from '../components/test/modal';
     
      export default class ModalStudy extends wepy.page {
        data = {
          modalVisible: false,
          cancelTxt: '关闭',
          okTxt: '确定',
          showOk: true,
          showCancel: true,
          actionMode: '',
          actions: [{
            name: '操作一',
            color: 'red',
          }, {
            name: '操作二',
            color: 'blue'
     
          }, {
            name: '操作三',
            color: '#f60'
          }]
        }
     
        methods = {
          handleClickItem (index, action) {
            this.visible = false;
            this.$emit('onClickItem', index, action);
          },
          handleClickOk () {
            this.visible = false;
            this.$emit('onOk');
          },
          handleClickCancel () {
            this.visible = false;
            this.$emit('onCancel');
          }
        }
      }
    </script> 

    4.2 参数配置说明

    属性/方法 说明 类型 默认值
    visible modal的显示与隐藏 Boolean false
    className modal的class命名 String false
    title modal的标题文字(没有则不显示title) String ''
    cancelTxt 取消按钮自定义文字 String 取消
    okTxt 确定按钮自定义文字 String 确定
    showOk 是否展示【确定】按钮 Boolean true
    showCancel 是否展示【取消】按钮 Boolean true
    actions 自定义的操作按钮,样例:[{name: '按钮一', color: 'red'}], name: 按钮名称,color:按钮颜色(css的颜色即可) Array []
    actionMode 横列或竖列展示自定义操作按钮(默认横排) String ''
    onClickItem 当点击自定义的操作按钮时触发,参数index为点击按钮的索引,参数action为点击按钮的配置项 function(index, action)
    onClickOk 当点击确定按钮时触发 function
    onClickCancel 当点击取消按钮时触发 function

    4.3 modal的body内容自定义

    为了更好的自定义modal的body内容,使用了slot插槽技术,可以使用wepy的slot技术来自定义modal的body内容。

    <template>
      <view class="container">
        
        <modal
          title="modal测试"
          className="modal-test"
          :cancelTxt.sync="cancelTxt"
          :okTxt.sync="okTxt"
          :visible.sync="modalVisible"
          :showOk.sync="showOk"
          :showCancel.sync="showCancel"
          :actionMode.sync="actionMode"
          :actions="actions"
          @onClickItem.user="handleClickItem"
          @onClickOk.user="handleClickOk"
          @onClickCancel.user="handleClickCancel"
        >
          <view slot="body">
            <view>自定义body内容填充区</view>
          </view>
        </modal>
      </view>
    </template>

    5、注意事项

    1. 因为小程序的设计,小程序textarea组件拥有最高层级,不能通过z-index限制,所以在打开modal组件时,如果页面下有textarea组件,可以使用wx:if手动把texarea组建“删掉”,不然在ios手机上会出现点击击穿bug,该问题暂时还没有合理的解决方案。

    Install

    npm i wepy-modal

    DownloadsWeekly Downloads

    0

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    12.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • jakk2018