共计 5256 个字符，预计需要花费 14 分钟才能阅读完成。
因为默认的弹窗很丑。所以决定本人写一个仿 IOS 的模态弹窗组件
先看下效果图：
能够扫码体验
目前只是简略实现了一些性能：能够管制确定和勾销按钮的文字、色彩、显示程序。
应用办法：
1、在页面的 json 配置文件外面增加组件
{
"usingComponents": {"dialog": "/components/dialog/dialog"}
}2、页面的 wxml 外面引入弹窗组件
3、在页面的 js 外面初始化组件
/**
- 生命周期函数 – 监听页面加载
*/
onLoad: function (options) {this.dialog = this.selectComponent('#dialog');
}4、接下来就能够应用了。调用示例
this.dialog.showDialog({
title: "确定要删除以后清单吗",
content: "删除后，清单就找不回来了哦",
cancelText: "我点错了",
confirmText: "我要删除",
confirmColor: "#f96e49",
cancelColor: "#3790EE",
showCancel: true,
confirmPosition: "left",
cancelHandler: function () {console.log("点击了勾销按钮");
},
confirmHandler: function () {console.log("点击了确定按钮 OUTER");
}
});几年前写的代码，间接拿来用。相对来说比较简单。没有花里胡哨的（有点 low 我晓得。。）
整个组件的原代码如下：
1、dialog.wxml
<view class="custom_dialog" wx:if="{{show}}">
<view class="cover"></view>
<view class="dialog">
<view class="tip flex_center {{noTitle?'no_tip':''}}">
<view class="flex_full">{{title}}</view>
</view>
<view class="content flex_baseline {{noContent?'no_content':''}}">
<view class="flex_full">{{content}}</view>
</view>
<view class="op_btn flex_center" wx:if="{{confirmPosition=='right'}}">
<view class="cancel flex_full" style="color: {{cancelColor}}" wx:if="{{showCancel}}" catchtap="_cancelHandler">{{cancelText}}</view>
<view class="confirm flex_full" style="color: {{confirmColor}}" catchtap="_confirmHandler" wx:if="{{!confirmNeedAuth}}">{{confirmText}}</view>
<button class="confirm reset-btn flex_full" wx:else style="color: {{confirmColor}}"
open-type="getUserInfo"
bindgetuserinfo="_confirmHandler">{{confirmText}}</button>
</view>
<view class="op_btn flex_center" wx:if="{{confirmPosition=='left'}}">
<view class="confirm flex_full" style="color: {{confirmColor}}" catchtap="_confirmHandler" wx:if="{{!confirmNeedAuth}}">{{confirmText}}</view>
<button class="confirm reset-btn flex_full" wx:else style="color: {{confirmColor}}"
open-type="getUserInfo"
bindgetuserinfo="_confirmHandler">{{confirmText}}</button>
<view class="cancel flex_full" style="color: {{cancelColor}}" wx:if="{{showCancel}}" catchtap="_cancelHandler">{{cancelText}}</view>
</view>
</view>
</view>2、dialog.wxss
.flex_center {
display: flex;
align-items: center;
}
.flex_end {
display: flex;
align-items: flex-end;
}
.flex_baseline {
display: flex;
align-items: baseline;
}
.flex_full {flex: 1;}
.reset-btn:after {border: none;}
.reset-btn {
background-color: #FAFAFA;
margin: 0;
padding: 0;
font-size: 32rpx;
border-radius: 24rpx;
}
.custom_dialog{
}
.custom_dialog .cover{
background-color: #111;
opacity: 0.6;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 5000;
}
.custom_dialog .dialog{
width: 560rpx;
border-radius: 24rpx;
background-color: #FAFAFA;
position: fixed;
top: 50%;
left: 50%;
z-index: 6000;
margin: -140rpx 0 0 -280rpx;
padding-top: 10rpx;
text-align: center;
}
.custom_dialog .dialog .tip, .custom_dialog .dialog .single_tip{
font-size: 32rpx;
color: #242424;
}
.custom_dialog .dialog .tip{
padding: 32rpx 32rpx 30rpx;
/*height: 100rpx;*/
text-align: center;
box-sizing: border-box;
font-weight: bold;
}
.custom_dialog .dialog .single_tip{
height: 160rpx;
line-height: 1.6;
}
.custom_dialog .dialog .content, .custom_dialog .dialog .single_content{
font-size: 29rpx;
line-height: 1;
color: #161616;
padding: 0 20rpx 40rpx;
}
.custom_dialog .dialog .content{
margin-top: -10rpx;
/*height: 70rpx;*/
}
.custom_dialog .dialog .single_content{
height: 160rpx;
line-height: 160rpx;
}
.custom_dialog .dialog .no_content{padding-bottom: 20rpx !important;}
.custom_dialog .dialog .no_tip{padding-bottom: 10rpx !important;}
.custom_dialog .dialog .op_btn{
border-top: 1rpx solid #ccc;
height: 96rpx;
line-height: 96rpx;
font-size: 32rpx;
}
.custom_dialog .dialog .op_btn .confirm{color: #3790EE;}
.custom_dialog .dialog .op_btn .cancel{color: #FF644E;}
.custom_dialog .dialog .op_btn view{border-right: 1rpx solid #ccc;}
.custom_dialog .dialog .op_btn view:last-child{border: none;}3、dialog.js
const tabbar = require('../../utils/tabbar.js');
Component({
/**
* 组件的属性列表
*/
properties: {},
/**
* 组件的初始数据
*/
data: {
show: false,
title: "",// 题目
content: "",// 内容
noTitle: false,// 是否显示题目
noContent: false,// 是否显示内容
showCancel: true,// 是否显示勾销按钮
cancelText: "勾销",// 勾销按钮文字
cancelColor: "#FF644E",// 勾销按钮色彩
confirmText: "确定",// 确定按钮文字
confirmColor: "#3790EE",// 确定按钮色彩
confirmPosition: "right",// 确定按钮地位：left/right
cancelHandler: null,// 点击勾销按钮回调事件
confirmHandler: null// 点击确定按钮回调事件
},
/**
* 组件的办法列表
*/
methods: {showDialog: function (content) {
var that = this;
that.setData({
show: true,
title: content.title ? content.title : "",
content: content.content ? content.content : "",
noTitle: !content.title ? true : false,
noContent: !content.content ? true : false,
cancelText: content.cancelText ? content.cancelText : that.data.cancelText,
cancelColor: content.cancelColor ? content.cancelColor : that.data.cancelColor,
confirmText: content.confirmText ? content.confirmText : that.data.confirmText,
confirmColor: content.confirmColor ? content.confirmColor : that.data.confirmColor,
showCancel: content.showCancel != null ? content.showCancel : that.data.showCancel,
confirmPosition: content.confirmPosition ? content.confirmPosition : that.data.confirmPosition,
confirmNeedAuth: content.confirmNeedAuth ? content.confirmNeedAuth : that.data.confirmNeedAuth,
cancelHandler: content.cancelHandler,
confirmHandler: content.confirmHandler
});
tabbar.hideTab(this);
},
_cancelHandler: function () {console.log("点击了勾销按钮 INNER");
this.setData({show: false});
tabbar.showTab(this);
typeof this.data.cancelHandler == 'function' && this.data.cancelHandler();},
_confirmHandler: function (e) {console.log("点击了确定按钮 INNER");
this.setData({show: false});
tabbar.showTab(this);
typeof this.data.confirmHandler == 'function' && this.data.confirmHandler(e);
}
}
});
正文完
发表至： javascript
2021-03-09
