【小程序】dialog组件

这个比较简单 我就直接上代码了

只需要传入title即可， 内容部分设置slot

代码

dialog.ttml

<view class="dialog-wrapper" hidden="{{!visible}}">
  <view class="mask" />
  <view class="dialog">
    <view class="dialog-header">
      <text class="dialog-title">{{ title }}</text>
      <dg-button type="text" icon="close" bind:handleClick="handleCancel" />
    </view>
    <view class="dialog-content">
      <slot />
    </view>
    <view class="dialog-footer">
      <dg-button type="primary" content="取消" plain bind:handleClick="handleCancel" />
      <dg-button type="primary" content="确定" bind:handleClick="handleConfirm" />
    </view>
  </view>
</view>

dialog.ttss

.mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}
.dialog {
  position: fixed;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  width: 60%;
  z-index: 2000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  overflow: hidden;
}
.dialog-header {
  padding: 16px 24px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.88);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dialog-title {
  font-weight: 500;
}
.dialog-content {
  padding: 32px 100px;
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 24px 20px;
}

dialog.js

Component({
  options: {
    addGlobalClass: true,
  },
  properties: {
    title: {
      type: String,
      value: '标题',
    },
  },
  data: {
    visible: false,
  },
  methods: {
    // 隐藏弹框
    hideDialog() {
      this.setData({
        visible: !this.data.visible,
      });
    },
    // 展示弹框
    showDialog() {
      this.setData({
        visible: !this.data.visible,
      });
    },
    handleCancel() {
      this.triggerEvent('handleCancel');
    },
    handleConfirm() {
      this.triggerEvent('handleConfirm');
    },
  },
});

dialog.json

{
  "component": true,
  "usingComponents": {
    "dg-button": "/components/button/button"
  }
}

使用

	<dialog 
      id='dialog' 
      title='我是标题' 
      bind:handleCancel="handleCancel"  
      bind:handleConfirm="handleConfirm"
    >
      hahah
    </dialog>
    <button type="primary" bindtap="showDialog" content="ClickMe!" />

  onReady: function () {
    //获得dialog组件
    this.dialog = this.selectComponent("#dialog");
    },
  showDialog(){
    this.dialog.showDialog();
  },
    //取消事件
  handleCancel(){
    console.log('点击了取消');
    this.dialog.hideDialog();
  },
    //确认事件
  handleConfirm(){
    console.log('点击了确定');
    this.dialog.hideDialog();
  }