弹窗组件使用
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')
}
}
})