微信小程序弹窗组件

微信里面没有类似vue中的element-ui的Dailog弹窗，只能自己创建应该Dialog组件

目录

微信里面没有类似vue中的element-ui的Dailog弹窗，只能自己创建应该Dialog组件

1：先在components中创建应该dailog组件；

 

 

2:在dialog.wxml中代码如下 ；

<view class="dialog-container" hidden="{{!showDialog}}">
  <view class="dialog" style="width:{{width}};padding: {{padding[0]}}rpx {{padding[1]}}rpx {{padding[2]}}rpx {{padding[3]}}rpx;">
    <view class="dialog-header">{{title}}</view>
    <view class="dialog-content">{{content}}</view>
    <view class="dialog-footer">
      <view class="cancel-button" bindtap="onCancel">取消</view>
      <view class="confirm-button" bindtap="onConfirm">确定</view>
    </view>
  </view>
</view>

3: 在dialog.js中代码如下；

Component({
  properties: {
    title: String,
    content: String,
    width:{
      type:Number,
      value:622
    },
    padding:{
      type:Number,
      value:[64,48,48,48]
    }
  },

  data: {
    showDialog: false,
  },

  methods: {
    show () {
      this.setData({
        showDialog: true,
      });
    },

    hide() {
      this.setData({
        showDialog: false,
      });
    },

    onConfirm() {
      this.triggerEvent('confirm');
      this.hide();
    },

    onCancel () {
      this.triggerEvent('cancel');
      this.hide();
    },
  },
});

4：在dailog.wxss中代码如下；

.dialog-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 130%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.dialog {
  width: 80%;
  height: 360rpx;
  background: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  box-sizing: border-box;
  text-align: center;
}

.dialog-header {
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.9);
  margin-bottom: 16rpx;
}

.dialog-content {
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 48rpx;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
}

.cancel-button,
.confirm-button {
  width: 234rpx;
  height: 80rpx;
  border-radius: 12rpx;
  font-weight: bold;
  font-size: 32rpx;
  text-align: center;
  line-height: 80rpx;
}

.cancel-button {
  background: #F2F3FF;
  color: #0052D9;
}

.confirm-button {
  background: #0052D9;
  color: #FFFFFF;
}

5：我是已经把dialog组件封装好了，下面是我使用dialog组件的用法，

 

引入自己写好的dialog组件 下面是在页面使用；

<yd-dialog id="dialog" title="提示" content="是否退还桶押金" bindconfirm="onDialogConfirm" bindcancel="onDialogCancel"></yd-dialog>

这里是我在触发dialog的方法以及获得组件实例和数据源，想要获取组件实例，就必须在组件使用id='xxxxx',我这里使用的是id="dialog"，所以得到组件实例的就是下面的this.selectComponent('#dialog')；

 

然后你就可以操作组件的方法，数据。可以父组件控制dialog的开启关闭 

总结：还有很多值可以直接传进去的，大家可以自由选择传相应的值来控制弹窗的大小，按钮的尺寸，字体大小，弹出的位置等