这个比较简单 我就直接上代码了
只需要传入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();}