微信小程序自定义Dialog弹框

本文实例为大家分享了微信小程序自定义Dialog弹框的具体代码，供大家参考，具体内容如下

一、创建组件

1、在根目录下自定义一个components文件夹，用来存放自定义的组件。

2、再针对每一个组件创建一个文件夹，用来存放这个组件相关的文件。

3、在指定组件的文件夹中右键->新建Component创建组件。这样创建的目的是在json文件中添加"component": true，将其声明为一个组件。

下面开始例子：1、组件页面 index.wxml

{{ cancelButtonText }}{{ confirmButtonText }}2、组件样式 index.wxss/* components/dialog/index.wxss */.dialog-overlay-view {background-color: #000000;opacity: 0.5;position: fixed;z-index: 10;}.col-center {position: fixed;z-index: 11;display: flex;flex-direction: column;justify-content: center;align-items: center;}.dialog-content-view {width: 210px;background: #FFFFFF;border-radius: 8px;display: flex;flex-direction: column;justify-content: center;padding: 40px 40px 20px 40px;}.dialog-content-text {font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #454545;line-height: 20px;}

.cancel-text {height: 14px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #999999;line-height: 14px;}.confirm-text {height: 14px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #E63719;line-height: 14px;}3、组件json配置 index.json{"component": true,"usingComponents": {}}4、组件页面的js index.js// components/dialog/index.jsComponent({options: {/**styleIsolation 选项从基础库版本 2.6.5 开始支持。它支持以下取值：isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）*/styleIsolation: 'isolated'},/*** 组件的属性列表*/properties: {cancelButtonText: {type: String,value: '取消'},confirmButtonText: {type: String,value: '确定'},message: {type: String,value: ''},show: {type: Boolean,value: false,},confirmCallback: null,cancelCallback: null,},/*** 组件的初始数据*/data: {windowWidth: 0,windowHeight: 0,},/*** 生命周期函数*/ready: function() {var _this = this;wx.getSystemInfo({success: function(res) {_this.setData({windowWidth: res.windowWidth,windowHeight: res.windowHeight,});}});},/*** 组件的方法列表*/methods: {onConfirm() {if (this.properties.confirmCallback) {this.properties.confirmCallback();}this.setData({ show: false });},onCancel() {if (this.properties.cancelCallback) {this.properties.cancelCallback();}this.setData({ show: false });},}});5、组件js dialog.jsconst defaultOptions = {show: false,message: '',selector: '#cus-dialog',confirmButtonText: '确认',cancelButtonText: '取消',confirmCallback: null,cancelCallback: null,};let currentOptions = Object.assign({}, defaultOptions);function getContext() {const pages = getCurrentPages();return pages[pages.length - 1];}const Dialog = (options) => {options = Object.assign(Object.assign({}, currentOptions), options);const context = options.context || getContext();const dialog = context.selectComponent(options.selector);delete options.context;delete options.selector;if (dialog) {dialog.setData(options);wx.nextTick(() => {dialog.setData({ show: true });});}else {console.warn('未找到 cus-dialog 节点，请确认 selector 及 context 是否正确');}};Dialog.confirm = (options) => Dialog(Object.assign({ showCancelButton: true }, options));export default Dialog;

6、使用方法

需要用到dialog的页面引入dialog组件：{"usingComponents": {"cus-dialog": "../../components/dialog/index"}}页面加入dialog节点：在页面的js中弹出dialog窗口：//引入dialog组件import Dialog from '../../components/dialog/dialog';

//在代码中调用Dialog.confirm({message: '弹窗内容',selector: '#cus-dialog',confirmCallback: function() {console.log('确认啦');}});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。您可能感兴趣的文章:微信小程序实现简单弹框效果微信小程序自定义弹框效果微信小程序开发实现首页弹框活动引导功能微信小程序实现自定义动画弹框/提示框的方法实例微信小程序实现弹框效果微信小程序之几种常见的弹框提示信息实现详解微信小程序开发之实现自定义Toast弹框微信小程序开发之toast等弹框提示使用教程微信小程序 modal弹框组件详解微信小程序自定义Modal弹框