微信小程序 | 結合vant-ui自定義彈出框

在組件中直接使用 van-popup 組件是不可以的，所以只能定義一個內部組件，在用到的時候放到 van-popup 組件中即可，類似於下面的思想。
<van-popup>
<my-component />
</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">open</button>
<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(){...}