【小程序】dialog组件

请添加图片描述

这个比较简单 我就直接上代码了

只需要传入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();}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/886732.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】ubantu 系统 MySQL的安装与免密码登录的配置

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;MySQL初阶探索&#xff1a;构建数据库基础 欢迎大家点赞收藏评论&#x1f60a; 目录 &#x1f4da;mysql的安装&#x1f4d5;MySQL的登录&#x1f30f;MySQL配置免密码登录 &#x1f4da;mysql的…

Dubbo源码解析-服务注册(五)

一、服务注册 当确定好了最终的服务配置后&#xff0c;Dubbo就会根据这些配置信息生成对应的服务URL&#xff0c;比如&#xff1a; dubbo://192.168.65.221:20880/org.apache.dubbo.springboot.demo.DemoService? applicationdubbo-springboot-demo-provider&timeout300…

计算机网络-理论部分(二):应用层

网络应用体系结构 Client-Server客户-服务器体系结构&#xff1a;如Web&#xff0c;FTP&#xff0c;Telnet等Peer-Peer&#xff1a;点对点P2P结构&#xff0c;如BitTorrent 应用层协议定义了&#xff1a; 交换的报文类型&#xff0c;请求or响应报文类型的语法字段的含义如何…

麒麟时间同步搭建chrony服务器

搭建chrony服务器 在本例中&#xff0c;kyserver01&#xff08;172.16.200.10&#xff09;作为客户端&#xff0c;同步服务端时间&#xff1b;kyserver02&#xff08;172.16.200.11&#xff09;作为服务端&#xff0c;提供时间同步服务。 配置服务端&#xff0c;修改以下内容…

学习threejs,通过SkinnedMesh来创建骨骼和蒙皮动画

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.SkinnedMesh 蒙皮网格…

HarmonyOS NEXT应用元服务开发Intents Kit(意图框架服务)习惯推荐方案概述

一、习惯推荐是HarmonyOS学习用户的行为习惯后做出的主动预测推荐。 1.开发者将用户在应用/元服务内的使用行为向HarmonyOS共享&#xff0c;使得HarmonyOS可以基于共享的数据学习用户的行为习惯。 2.在HarmonyOS学习到用户的行为习惯后&#xff0c;会给用户推荐相应功能&#x…

华为防火墙技术基本概念学习笔记

1.防火墙概述 1.1防火墙与交换机、路由器对比 路由器与交换机的本质是转发&#xff0c;防火墙的本质是控制。 防火墙与路由器、交换机是有区别的。路由器用来连接不同的网络&#xff0c;通过路由协议保证互联互通&#xff0c;确保将报文转发到目的地;交换机则通常用来组建局域…

shell(5)字符串运算符和逻辑运算符

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…

帆软report参数栏宽度设置

最右边的竖杠被放大后在拉回来

Mysql-DQL语句

文章目录 DQL 语句简单查询查询表所有数据查询指定列 别名查询清除重复值查询结果参与运算 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Mysql专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月16日11点39分 DQL 语句 DQL 语句数据…

MySQL数据库3——函数与约束

一.函数 1.字符串函数 MySQL中内置了很多字符串函数&#xff0c;常用的几个如下&#xff1a; 使用方法&#xff1a; SELECT 函数名(参数);注意&#xff1a;MySQL中的索引值即下标都是从1开始的。 2.数值函数 常见的数值函数如下&#xff1a; 使用方法&#xff1a; SELECT…

Vue.js 插槽 Slots 实际应用 最近重构项目的时候遇到的...

前端开发中 插槽 Slots 是一个重要的概念 我们可以查看一下vue.js的官方文档 https://cn.vuejs.org/guide/components/slots 类似于连接通道一样 可以把核心代码逻辑搬到另外的地方 做一个引用 而原先的地方可能并不能这样书写 对于这个概念我在vue的官方文档里面找到了…

5G 现网信令参数学习(3) - RrcSetup(2)

前一篇&#xff1a;5G 现网信令参数学习(3) - RrcSetup(1) 目录 1. rlf-TimersAndConstants 2. spCellConfigDedicated 2.1 initialDownlinkBWP 2.1.1 pdcch-Config 2.1.1.1 controlResourceSetToAddModList 2.1.1.2 searchSpacesToAddModList 2.1.2 pdsch-Config 2.1…

MySQL(5)【数据类型 —— 字符串类型】

阅读导航 引言一、char&#x1f3af;基本语法&#x1f3af;使用示例 二、varchar&#x1f3af;基本语法&#x1f3af;使用示例 三、char 和 varchar 比较四、日期和时间类型1. 基本概念2. 使用示例 五、enum 和 set&#x1f3af;基本语法 引言 之前我们聊过MySQL中的数值类型&…

【蓝桥杯C/C++】翻转游戏:多种实现与解法解析

文章目录 &#x1f4af;题目&#x1f4af;问题分析解法一&#xff1a;减法法解法二&#xff1a;位运算解法解法三&#xff1a;逻辑非解法解法四&#xff1a;条件运算符解法解法五&#xff1a;数组映射法不同解法的比较 &#x1f4af;小结 &#x1f4af;题目 在蓝桥镇&#xff0…

深度学习之人脸检测

在目标检测领域可以划分为了人脸检测与通用目标检测&#xff0c;往往人脸这方面会有专门的算法&#xff08;包括人脸检测、人脸识别、人脸其他属性的识别等等&#xff09;&#xff0c;并且和通用目标检测&#xff08;识别&#xff09;会有一定的差别&#xff0c;着主要来源于人…

docker busybox作为initContainers

一、上传到私有仓储 docker pull busybox:1.33.1 docker tag busybox:1.33.1 192.168.31.185/public/busybox:1.33.1 docker push 192.168.31.185/public/busybox:1.33.1 --- apiVersion: apps/v1 kind: Deploymentspec:containers:- env:- name: ASPNETCORE_ENVIRONMENTvalue…

Java实现两数交换

文章目录 实现两数交换方法一、&#xff08;数组的方式进行交换&#xff09;方法二、&#xff08;对象的方式进行交换&#xff09;总结 实现两数交换 实现两数交换&#xff0c;没有办法通过直接传递数字达到交换的结果&#xff0c;定义的int型变量是被存储在栈空间上的&#xf…

GOLANG+VUE后台管理系统

1.截图 2.后端工程截图 3.前端工程截图

Axure PR 9 穿梭框 设计交互

​大家好&#xff0c;我是大明同学。 这期内容&#xff0c;我们将深入探讨Axure中穿梭筛选宽元件设计与交互技巧。 穿梭筛选框元件 创建穿梭筛选框所需的元件 左穿梭筛选框 1.打开一个新的 RP 文件并在画布上打开 Page 1。 2.现在画布上创建一个背景&#xff0c;在元件库中…