原生小程序 之 二次封装 van-dialog组件

原生小程序 之 二次封装 van-dialog组件

xDialog

• xDialog.wxml

<!--component/xDialog/xDialog.wxml-->
<!-- bind:close="onClose" -->
<van-dialog
  use-slot
  title="标题"
  show="{{ isShow }}"
  show-cancel-button
  bind:cancel="onCancel"
  bind:confirm="onConfirm"
>
  <slot></slot>
</van-dialog>

• xDialog.js

// component/xDialog/xDialog.js
// import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';
Component({
  properties: {
  },
  data: {
    isShow:false,
  },
  methods: {
    // 展示dialog
    show(){
      this.setData({
        isShow:true,
      })
    },
    // 隐藏dialog
    hide(){
      this.setData({
        isShow:false,
      })
    },
    onCancel(){
      this.triggerEvent('onCancel','flase')
    },
    onConfirm(){
      this.triggerEvent('onConfirm')
    },
    // onClose() {
    //   // this.setData({ show: false });
    //   console.log("关闭");
    // },
  }
})

使用 xDialog组件

• info.wxml

<!--pages/info/info.wxml-->
<view class="repair">
  <!-- dialog 组件使用  -->
  <button bindtap="showDailog">显示弹窗</button> 
  <!-- wx:if="showDialogFlag"  -->
  <xDialog id="xDialogID" bindonCancel="onCancel" bindonConfirm="onConfirm">
    <view>
      我是插槽
    </view>
  </xDialog>
</view>

• info.js

  // 弹窗 显示
  showDailog(){
    // 调用组件的方法 
    this.selectComponent("#xDialogID").show()
  },
  onCancel(e){
    console.log("取消",e.detail);
  },
  onConfirm(){
    console.log("确定");
  }