微信小程序弹窗组件

弹窗组件使用

弹窗组件下载链接

1.组件引入方式，需要引入组件的json中添加组件的相对位置

{
  "usingComponents": {
    "modalView": "相对位置"
  }
}

2.组件基本用法

两个按钮

<modalView show="{{showComponents}}" modalValue="{{modalValue}}" bindCancel="bindCancel" bindConfirm='bindConfirm'></modalView>

一个按钮

<modalView show="{{showComponents}}" modalValue="{{modalValue}}" bindConfirm='bindConfirm'></modalView>

Attributes

参数	说明	是否必填	类型	键入值	默认值
show	控制弹窗显示	是	boolean	true/false	———
modalValue	弹窗文字内容	是	object	modalTitle:’’//弹窗标题;modalContent:’’,//弹窗内容;modalBtn:[]//弹窗按钮，最大长度为2	———

Events

事件名称	说明	回调参数
bindCancel	取消按钮事件	———
bindConfirm	确认按钮事件	———

两个按钮效果

一个按钮效果

wxml部分

<view class='modal-mask' wx:if='{{show}}'>
  <view class='modal-content'>
    <view class="modal-content-title">{{modalValue.modalTitle}}</view>
    <view class="modal-content-text">{{modalValue.modalContent}}</view>
    <view class='modal-footer' wx:if="{{modalValue.modalBtn.length > 1}}">
      <view class='cancel-btn' bindtap='cancel'>{{modalValue.modalBtn[0]}}</view>
      <view class='confirm-btn' bindtap='confirm'>{{modalValue.modalBtn[1]}}</view>
    </view>
    <view class='modal-footer' wx:else>
      <view class='confirm-btn' bindtap='confirm'>{{modalValue.modalBtn[0]}}</view>
    </view>
  </view>
</view>

wxss部分

.modal-mask{
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
  height: 100vh;
  width: 100%;
}
.modal-content{
  width: 80%;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  text-align: center;
}
.modal-content-title{
  margin: 20rpx;
  font-size: 41rpx;
  color: #333333;
}
.modal-content-text {
  word-wrap: break-word;
}
.modal-footer{
  display: flex;
  flex-direction: row;
  height: 80rpx;
  line-height: 80rpx;
  border-top: 2rpx solid #D2D3D5;
  margin-top: 30rpx;
}
.cancel-btn, .confirm-btn{
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
}
.cancel-btn{
  color: #000;
  border-right: 2rpx solid #D2D3D5;
}
.confirm-btn {
  color: #0C82F1;
}

js部分

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //是否显示modal弹窗
    show: {
      type: Boolean,
      value: false
    },
    //弹窗描述
    modalValue: {
      type:Object,
      value:{
        modalTitle:'',//弹窗标题
        modalContent:'',//弹窗内容
        modalBtn:[]//弹窗按钮(一个按钮或两个按钮，默认两个)
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
   // 点击取消按钮的回调函数
    cancel() {
      this.setData({ show: false })
      this.triggerEvent('Cancel')  //triggerEvent触发事件
    },
    // 点击确定按钮的回调函数
    confirm() {
      this.setData({ show: false })
      this.triggerEvent('Confirm')
    }
  }
})