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 'wepy-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"
      :showButtons.sync="showButtons"
      :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 'wepy-modal';

  export default class ModalStudy extends wepy.page {
    data = {
      modalVisible: false,
      showButtons: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	''
showButtons	是否显示自定义按钮	Boolean	false
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"
      :showButtons.sync="showButtons"
      :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>
      <view slot="buttons">
         <view>自定义button填充区</view>
      </view>
    </modal>
  </view>
</template>

5、注意事项

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