微信小程序 | 结合vant-ui自定义弹出框

在组件中直接使用 van-popup 组件是不可以的，所以只能定义一个内部组件，在用到的时候放到 van-popup 组件中即可，类似于下面的思想。

定义子组件作为内部组件

components/ext-confirm/index.json

{
  "component": true
}

components/ext-confirm/index.wxml

<view class="modal" catchtap="catchClick" animation="{{dialogAni}}">
  <view class="header">
    {{title}}
  view>
  <view class="body">
    {{msg}}
  view>
  <view class="footer">
    <button class="cancel" catchtap="bindCancel">{{btnCancel}}button>
    <button class="yes" catchtap="bindYes">{{btnYes}}button>
  view>
view>

components/ext-confirm/index.js

这里的js比较简单，只有一些需要自定义值的属性和按钮暴露的方法，不包含复杂的逻辑处理

Component({
  properties:{
    title: {
      type: String,
      value: '提示'
    },
    msg: {
      type: String,
      value: '确定要删除吗?'
    },
    btnYes: {
      type: String,
      value: '确定'
    },
    btnCancel: {
      type: String,
      value: '取消'
    }
  },
  methods:{
    bindYes() {
      this.triggerEvent('bindYes')
    },
    bindCancel() {
      this.triggerEvent('bindCancel')
    }
  }
})

components/ext-confirm/index.wxss

.modal {
  height: auto;
  box-sizing: border-box;
  text-align: center;
}

.body {
  line-height: 3rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: #555;
  margin: 10rpx 0;
}

.footer {
  display: flex;
}

.footer button {
  color: #fff;
  width: 250rpx;
  border-radius: 50rpx;
  background-color: #03c64a;
  background-image: linear-gradient(133deg, #03c64a 18%, #21a1ff 86%);
  height: 80rpx;
  line-height: 80rpx;
}

.footer .yes {
}

.footer .cancel {
  background-color: #f5f5f5;
  background-image: linear-gradient(135deg, #f5f5f5 0%, #aaa 100%);
}

父组件中调用

差别不大，只是将定义的组件放到 van-popup 组件中

parent.wxml

<button bindtap="bindDialog">openbutton>
<van-popup class="ext-popup" position="bottom" show="{{visible}}">
	<ext-confirm title="提示" msg="确定要删除收货地址吗？" bind:bindYes="bindOk" bind:bindCancel="bindCancel" />
van-popup>

parent.js

data: {
	visible: false,
}
bindDialog(){
	this.setData({
      visible: !this.data.visible
    })
}
bindOk() {...}
bindCancel(){...}