这个比较简单 我就直接上代码了
只需要传入title即可, 内容部分设置slot
代码
dialog.ttml
<view class="dialog-wrapper" hidden="{{!visible}}">
<view class="mask" />
<view class="dialog">
<view class="dialog-header">
<text class="dialog-title">{{ title }}</text>
<dg-button type="text" icon="close" bind:handleClick="handleCancel" />
</view>
<view class="dialog-content">
<slot />
</view>
<view class="dialog-footer">
<dg-button type="primary" content="取消" plain bind:handleClick="handleCancel" />
<dg-button type="primary" content="确定" bind:handleClick="handleConfirm" />
</view>
</view>
</view>
dialog.ttss
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.dialog {
position: fixed;
margin: 0 auto 50px;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
width: 60%;
z-index: 2000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
overflow: hidden;
}
.dialog-header {
padding: 16px 24px;
font-size: 16px;
color: rgba(0, 0, 0, 0.88);
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dialog-title {
font-weight: 500;
}
.dialog-content {
padding: 32px 100px;
}
.dialog-footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 8px 24px 20px;
}
dialog.js
Component({
options: {
addGlobalClass: true,
},
properties: {
title: {
type: String,
value: '标题',
},
},
data: {
visible: false,
},
methods: {
// 隐藏弹框
hideDialog() {
this.setData({
visible: !this.data.visible,
});
},
// 展示弹框
showDialog() {
this.setData({
visible: !this.data.visible,
});
},
handleCancel() {
this.triggerEvent('handleCancel');
},
handleConfirm() {
this.triggerEvent('handleConfirm');
},
},
});
dialog.json
{
"component": true,
"usingComponents": {
"dg-button": "/components/button/button"
}
}
使用
<dialog
id='dialog'
title='我是标题'
bind:handleCancel="handleCancel"
bind:handleConfirm="handleConfirm"
>
hahah
</dialog>
<button type="primary" bindtap="showDialog" content="ClickMe!" />
onReady: function () {
//获得dialog组件
this.dialog = this.selectComponent("#dialog");
},
showDialog(){
this.dialog.showDialog();
},
//取消事件
handleCancel(){
console.log('点击了取消');
this.dialog.hideDialog();
},
//确认事件
handleConfirm(){
console.log('点击了确定');
this.dialog.hideDialog();
}