【小程序】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.xdnf.cn/news/16670.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【玩具蛇——DFS】

题目 代码 #include <bits/stdc.h> using namespace std; int g[5][5]; int dx[] {0, 0, -1, 1}, dy[] {-1, 1, 0, 0}; int ans; void dfs(int x, int y, int t) {g[x][y] t;if (t > 16){ans;g[x][y] 0;return;}for (int i 0; i < 4; i){int nx x dx[i], n…

aar打包以及混淆问题

我们做sdk&#xff0c;经常要打成aar包。 如何打aar包&#xff1f; 1、首先module必须是library 2、build.gradle写的应用aar和module&#xff0c;要改成compileOnly&#xff0c;这样打包的时候就不会报错&#xff0c;因为aar不允许包含其他aar 3、 4、 aar包如何混淆 bui…

hhdb数据库介绍(9-14)

SQL语法支持 DML语句 在关系集群数据库中&#xff0c;DML语句的逻辑将变的更为复杂。计算节点将DML语句分为两大类&#xff1a;单库DML语句与跨库DML语句。 单库DML语句&#xff0c;指SQL语句只需在一个节点上运行&#xff0c;即可计算出正确结果。假设分片表customer分片字…

IDEA旗舰版编辑器器快速⼊门(笔记)

简介&#xff1a;javaweb开发必备软件之IDEA期间版介绍 DEA编辑器器版本介绍 官⽹网&#xff1a;https://www.jetbrains.com/地址&#xff1a;https://www.jetbrains.com/idea/download/#sectionmac DEA 分社区版(Community) 和 旗舰版(Ultimate)&#xff0c;我们做JavaWeb开…

HTML5实现剪刀石头布小游戏(附源码)

文章目录 1.设计来源1.1 主界面1.2 皮肤风格1.2 游戏中界面 2.效果和源码源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/143798520 HTM…

DAY65||Bellman_ford 队列优化算法(又名SPFA)|bellman_ford之判断负权回路|bellman_ford之单源有限最短路

Bellman_ford 队列优化算法&#xff08;又名SPFA&#xff09; 94. 城市间货物运输 I 思路 大家可以发现 Bellman_ford 算法每次松弛 都是对所有边进行松弛。 但真正有效的松弛&#xff0c;是基于已经计算过的节点在做的松弛。 给大家举一个例子&#xff1a; 本图中&#xff…

关于adb shell登录开发板后terminal显示不完整

现象 今天有个同事跟我说&#xff0c;adb shell 登录开发板后&#xff0c;终端显示不完整&#xff0c;超出边界后就会出现奇怪的问题&#xff0c;比如字符覆盖显示等。如下图所示。 正常情况下应该如下图所示&#xff1a; 很明显&#xff0c;第一张图的显示区域只有完整区域…

01 P2367 语文成绩

题目&#xff1a; 样例输入&#xff1a; 3 2 1 1 1 1 2 1 2 3 1 样例输出&#xff1a; 2 代码&#xff1a; #include<bits/stdc.h> using namespace std;long long sa[5000005]; long long sb[5000005];int main() {int n,p;cin>>n>>p;for(int i1;i<n;i)…

聊聊Flink:Flink的分区机制

一、前言 flink任务在执行过程中&#xff0c;一个流&#xff08;stream&#xff09;包含一个或多个分区&#xff08;Stream partition&#xff09;。TaskManager中的一个slot的subtask就是一个stream partition&#xff08;流分区&#xff09;&#xff0c;一个Job的流&#xf…

VRRP HSRP GLBP 三者区别

1. VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由冗余协议&#xff09; 标准协议&#xff1a;VRRP 是一种开放标准协议&#xff08;RFC 5798&#xff09;&#xff0c;因此支持的厂商较多&#xff0c;通常用于多种网络设备中。主备模式&#xff1a;…

VMware 17虚拟Ubuntu 22.04设置共享目录

VMware 17虚拟Ubuntu 22.04设置共享目录 共享文件夹挂载命令&#xff01;&#xff01;&#xff01;<font colorred>配置启动自动挂载Chapter1 VMware 17虚拟Ubuntu 22.04设置共享目录一、卸载老版本二、安装open-vm-tools<font colorred>三、配置启动自动挂载四、添…

二叉树Golang

二叉树 前言 完全二叉树 最底层节点按顺序从左到右排列。 满二叉树 一颗二叉树只有0度和2度的节点。 二叉搜索树 左子树上的所有节点的值均小于根节点的值。右子树上的所有节点的值均大于根节点的值。 平衡二叉搜索树 左右两个子树的高度差的绝对值不超过1 。 二叉树的存储…

【鸿蒙开发】第十三章 ArkTS基础类库-容器(数据结构)

目录 1 容器简述 2 线性容器 2.1 ArrayList 2.2 Vector 2.3 List 2.4 LinkedList 2.5 Deque 2.6 Queue 2.7 Stack 2.8 线性容器的使用 3 非线性容器 3.1 HashMap 3.2 HashSet 3.3 TreeMap 3.4 TreeSet 3.5 LightWeightMap 3.6 LightWeightSet 3.7 PlainArray…

3D电子商务是什么?如何利用3D技术提升销售转化?

在数字化浪潮席卷全球的今天&#xff0c;网上购物已成为消费者日常生活中不可或缺的一部分。然而&#xff0c;尽管其便捷性无可比拟&#xff0c;但传统电商模式中的“看不见、摸不着”问题始终困扰着消费者与商家。商品是否符合期望、尺寸是否合适、颜色是否真实……这些不确定…

腾讯地图GL JS点标识监听:无dragend事件的经纬度获取方案

引入腾讯地图SDK <!--腾讯地图 API--><script charset"utf-8" src"https://map.qq.com/api/gljs?librariestools&v1.exp&key***"></script>构建地图容器 <div class"layui-card"><div class"layui-car…

基于SpringBoot+RabbitMQ完成应⽤通信

前言&#xff1a; 经过上面俩章学习&#xff0c;我们已经知道Rabbit的使用方式RabbitMQ 七种工作模式介绍_rabbitmq 工作模式-CSDN博客 RabbitMQ的工作队列在Spring Boot中实现&#xff08;详解常⽤的⼯作模式&#xff09;-CSDN博客作为⼀个消息队列,RabbitMQ也可以⽤作应⽤程…

3. Spring Cloud Eureka 服务注册与发现(超详细说明及使用)

3. Spring Cloud Eureka 服务注册与发现(超详细说明及使用) 文章目录 3. Spring Cloud Eureka 服务注册与发现(超详细说明及使用)前言1. Spring Cloud Eureka 的概述1.1 服务治理概述1.2 服务注册与发现 2. 实践&#xff1a;创建单机 Eureka Server 注册中心2.1 需求说明 图解…

2024年11月第2个交易周收盘总结

计划自己的交易&#xff0c;交易自己的计划! 跟随市场而情绪波动&#xff0c;最终一定会导向失败&#xff01;连续、平稳、冷静地惯彻交易计划&#xff0c;比什么都重要&#xff01; 交易本身是极其简单和清楚的&#xff0c;让事情变复杂的原因不是行情走势和交易本身&#x…

一种时间戳对齐的方法(离线)

这段代码的主要功能是: 读取指定目录下的 pcd 文件和 jpg 文件。对于每个 pcd 文件,在 jpg 目录中找到时间戳最接近的 jpg 文件。将找到的 jpg 文件复制到对应的输出目录,实现时间戳对齐。 这种时间戳对齐的操作在多传感器数据融合中非常常见,它确保了不同传感器采集的数据在时…

【数据分享】全国农产品成本收益资料汇编(1953-2024)

数据介绍 一、《全国农产品成本收益资料汇编 2024》收录了我国2023年主要农产品生产成本和收益资料及 2018年以来六年的成本收益简明数据。其中全国性数据均未包括香港、澳门特别行政区和台湾省数据。 二、本汇编共分七个部分,即:第一部分,综合;第二部分,各地区粮食、油料;第…