miniprogram-custom-modal

可自定义modal的title和body样式(有渐入渐出动画效果)

安装组件

npm install --save miniprogram-custom-modal

例子

1. 在需要用到的wxml页面上添加以下代码

<base-modal class="base-modal"  bind:cancel="modalCancel" bind:confirm='modalConfirm'> 
  <view slot="header" class='modal-header'>
    <text>我是头部</text>
  </view>
  <view slot="body" class='modal-body'>
    <text>内容部分(添加class可自定义样式)</text>
  </view>
</base-modal>

2. 在相应的小程序js文件添加以下代码

Page({
  onReady() {
    this.baseModal = this.selectComponent('.base-modal')
  },

  open() {
    this.baseModal.open()
    // eslint-disable-next-line no-console
    console.log('打开了modal')
  },

  modalCancel() {
    this.baseModal.close()
    // eslint-disable-next-line no-console
    console.log('点击了取消按钮')
  },

  modalConfirm() {
    this.baseModal.close()
    // eslint-disable-next-line no-console
    console.log('点击了确定按钮')
  }

})

ps: 请注意插入的 <view /> 需要设置 slot 为header或body, 然后就可以在class写自己喜欢的样式了

3. 在相应的小程序json文件添加以下代码

  "usingComponents": {
    "base-modal": "/path/component"
  }

base-modal 的属性和方法介绍如下：

1.属性

| 选项 | 描述 | 类型 | 默认值 | |-----|------|-----|-------| |bind:cancel | event | 否 | 点击modal取消按钮 | |bind:confirm| event | 否 | 点击modal确定按钮 |

2.方法

| 方法名| 参数 | 描述 | | ---- | ---- | -----| | open | 无 | 打开modal| | close | 无 | 关闭modal |

开发

可以看官方的文档