因为默认的弹窗很丑。所以决定自己写一个仿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
{{title}}{{content}}{{cancelText}}{{confirmText}}{{confirmText}}{{confirmText}}{{confirmText}}{{cancelText}}
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);
}
}
});