1、效果
2、建立一个wx-modal的组件
wx-modal.wxml
<view class="wx-modal-wrapper" hidden="{{!isShow}}">
<view class="wx-mask"></view>
<view class="wx-modal">
<view class="wx-modal-title">{{ title }}</view>
<view class="wx-modal-content">{{ content }}</view>
<view class="wx-modal-footer">
<view class="wx-modal-btn" catchtap="_cancelEvent">{{ cancelText }}</view>
<view class="wx-modal-btn" catchtap="_confirmEvent">{{ confirmText }}</view>
</view>
</view>
</view>
wx-modal.ts
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: {
title: {
type: String,
value: '标题'
},
content: {
type: String,
value: ''
},
cancelText: {
type: String,
value: '取消'
},
confirmText: {
type: String,
value: '确定'
},
isShow: {
type: Boolean,
value: false
}
},
data: {
// 弹窗显示控制
// isShow: false
},
methods: {
_cancelEvent() {
this.triggerEvent("cancelEvent")
},
_confirmEvent() {
this.triggerEvent("confirmEvent");
}
}
})
wx-modal.scss
.wx-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.45;
overflow: hidden;
z-index: 9000;
}
.wx-modal {
box-sizing:border-box;
width: 630rpx;
height:auto;
overflow: hidden;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
margin: 0 auto;
z-index: 9999;
background: #fff;
border-radius: 20rpx;
}
.wx-modal-title {
font-size: 32rpx;
padding: 36rpx 30rpx 24rpx;
line-height: 48rpx;
text-align: center;
color: #000;
}
.wx-modal-content {
padding: 0rpx 36rpx 24rpx;
min-height: 80rpx;
font-size: 28rpx;
line-height: 40rpx;
word-wrap: break-word;
word-break: break-all;
color: #000;
}
.wx-modal-footer {
display: flex;
align-items: center;
position: relative;
line-height: 92rpx;
font-size: 32rpx;
}
.wx-modal-footer::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #eee;
color: #eee;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.wx-modal-btn {
display: block;
-webkit-flex: 1;
flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: relative;
text-align: center;
}
.wx-modal-footer .wx-modal-btn:nth-of-type(1) {
color: #000;
}
.wx-modal-footer .wx-modal-btn:nth-of-type(2) {
color: #C7000B;
}
.wx-modal-footer .wx-modal-btn:nth-of-type(2):after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px solid #eee;
color: #eee;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
wx-modal.json
{
"component": true,
"usingComponents": {}
}
3、引入wx-modal
"modal": "/component/wxModal/wxModal"
<modal id="freeOpenModal" title="提示" content="没有找到匹配的用户,是否免费开通?" confirmText="免费开通" isShow="{{isShowFreeOpenModal}}" bind:cancelEvent="_cancelFreeOpen" bind:confirmEvent="_confirmFreeOpen"></modal>