Vue3使用element-plus实现弹窗效果-demo

 使用 


<ShareDialog v-model="isShow" @onChangeDialog="onChangeDialog" />
import ShareDialog from './ShareDialog.vue';
const isShow = ref(false);
const onShowDialog = (show) => {isShow.value = show;
};
const onChangeDialog = (val) => {console.log('onSureClick', val);isShow.value = false;
};

 组件代码

<template><el-dialogv-model="isShow":show-close="false"class="share-dialog-dialog"style="width: 423px;height: 314px;display: flex;flex-direction: column;justify-content: space-between;background-color: #fff !important;"><template #header><div class="dialog-header"><div class="title">带单平台设置</div><imgsrc="@/assets/images/followOrder/close.svg"@click="isShow = false"/></div></template><template #default><div class="dialog-box"><div:class="['icon', { active: Bi.includes('okx') }]"@click="selectBi('okx')"><i class="icon-btn"></i><img class="icon-bi" src="@/assets/images/followOrder/okx-icon.svg" /><span>Okx</span></div><div:class="['icon', { active: Bi.includes('binance') }]"@click="selectBi('binance')"><i class="icon-btn"></i><imgclass="icon-bi"src="@/assets/images/followOrder/binance-icon.svg"/><span>Binance</span></div><div:class="['icon', { active: Bi.includes('bitget') }]"@click="selectBi('bitget')"><i class="icon-btn"></i><imgclass="icon-bi"src="@/assets/images/followOrder/bitget-icon.svg"/><span>Bitget</span></div></div></template><template #footer><div class="dialog-footer"><div class="false" @click="isShow = false">取消</div><div class="true" @click="onSureClick">确定</div></div></template></el-dialog>
</template><script setup>
import { defineProps, defineEmits, ref, reactive } from 'vue';
const props = defineProps({modelValue: {type: Boolean,default: false}
});const Bi = reactive([]);
const selectBi = (val) => {console.log(val, 888);const i = Bi.indexOf(val);if (i <= -1) {Bi.push(val);} else {Bi.splice(i, 1);}console.log(Bi, 88);
};
const emits = defineEmits(['update:modelValue', 'onChangeDialog']);
const isShow = computed({get() {return props.modelValue;},set(val) {emits('update:modelValue', val);}
});const onSureClick = (val) => {emits('onChangeDialog', true);
};
</script><style lang="less">
.el-dialog__header {margin-right: 0;
}
</style>
<style lang="less" scoped>
.share-dialog-dialog {.dialog-header {display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #f1f1f1;padding-bottom: 14px;.title {color: #000;font-size: 20px;font-style: normal;font-weight: 600;line-height: normal;}img {width: 14.161px;height: 14.515px;cursor: pointer;}}.dialog-box {padding: 0 25px;display: flex;justify-content: space-between;align-items: center;.icon {position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 110px;height: 110px;border-radius: 4px;border: 1px solid #f1f1f1;background: #fff;.icon-btn {position: absolute;top: 5px;right: 5px;width: 15px;height: 15px;background-image: url(@/assets/images/followOrder/quan-icon.svg);background-size: contain;background-repeat: no-repeat;}.icon-bi {width: 40px;height: 40px;margin-bottom: 8px;}& > span {color: #000;font-size: 16px;font-family: PingFang SC;font-style: normal;font-weight: 500;line-height: normal;}}.active {border: 1px solid #31daff;background: #f1fdff;.icon-btn {background-image: url(@/assets/images/followOrder/gou-icon.svg);}}}.dialog-footer {display: flex;align-items: center;justify-content: space-between;color: #000;.false {padding: 10px 75px;border: 1px solid #000000;border-radius: 4px;cursor: pointer;}.true {padding: 10px 75px;background: #31daff;// background: linear-gradient(266.54deg, #f1fb6f 0%, #7cf9cd 98.94%);border-radius: 4px;cursor: pointer;}}
}
</style>

基础代码 

<template><ElDialog:append-to-body="true"destroy-on-close:show-close="false"v-model="isShow"class="application-dialog"><div class="application-dialog-container"><h1>111111</h1></div></ElDialog>
</template><script setup>
import { ElDialog, ElButton } from 'element-plus';
import { defineProps, defineEmits, ref, reactive } from 'vue';const props = defineProps({modelValue: {type: Boolean,default: false}
});const emits = defineEmits(['update:modelValue', 'onChangeDialog']);
const isShow = computed({get() {return props.modelValue;},set(val) {emits('update:modelValue', val);}
});const onSureClick = (val) => {emits('onChangeDialog', true);
};
</script><style lang="less" scoped></style>

 完整代码 

<template><ElDialogdestroy-on-close:show-close="false":append-to-body="true"v-model="isShow"class="application-dialog"style="width: 420px; height: 266px"><div class="application-dialog-container"><img class="fail" src="@/assets/images/followOrder/fail-1.svg" /><div class="title">{{ errType.title }}</div><div class="cont">{{ errType.cont }}</div><div class="footer"><div class="but" @click="closeDialog">确定</div></div></div></ElDialog>
</template><script setup>
import { ElDialog, ElButton } from 'element-plus';
import { defineProps, defineEmits, ref, reactive } from 'vue';const props = defineProps({modelValue: {type: Boolean,default: false},errType: {type: Object,default: {title: '审核中',cont: '申请提交成功，我们的工作人员将在24小时内完成审核'}}
});const emits = defineEmits(['update:modelValue', 'onChangeDialog']);
const isShow = computed({get() {return props.modelValue;},set(val) {emits('update:modelValue', val);}
});const closeDialog = (val) => {console.log('onChangeDialog');emits('onChangeDialog', true);
};
</script>
<style lang="less">
//单独设置颜色 /deep/ :deep  ::v-deep
.application-dialog {&.el-dialog {--el-dialog-bg-color: transparent !important;.el-dialog__header,.el-dialog__body {padding: 0;}}
}
</style>
<style lang="less" scoped>
.application-dialog {position: relative;.application-dialog-container {position: absolute;width: 100%;height: 246px;background: #ffffff;border-radius: 8px;bottom: 0;padding: 70px 24px 24px;display: flex;flex-direction: column;align-items: center;justify-content: space-between;.title {color: #000;text-align: center;font-size: 18px;font-family: PingFang SC;font-style: normal;font-weight: 500;line-height: normal;}.cont {display: flex;flex-direction: column;color: #868e9b;text-align: center;font-size: 14px;font-family: PingFang SC;font-style: normal;font-weight: 500;line-height: normal;padding: 0 14px;}.footer {.but {width: 372px;height: 40px;color: #fff;font-size: 14px;font-family: PingFang SC;font-style: normal;font-weight: 500;line-height: normal;background: #000;border-radius: 5px;display: flex;justify-content: center;align-items: center;cursor: pointer;}}.fail {width: 64.632px;height: 66.607px;position: absolute;top: -20px;left: calc((100% / 2) - (64.632px / 2));}}
}
</style>

弹窗-over 

<template><el-dialogv-model="isShow":show-close="false"class="share-dialog-dialog"style="width: 319px;height: 209px;display: flex;flex-direction: column;justify-content: space-between;background-color: #fff !important;"><template #default><div class="dialog-text">确定以当前市场价格平仓？</div></template><template #footer><div class="dialog-footer"><div class="false" @click="isShow = false">取消</div><div class="true" @click="onSureClick()">确定</div></div></template></el-dialog>
</template><script setup>
import { defineProps, defineEmits, ref, reactive } from 'vue';
const props = defineProps({modelValue: {type: Boolean,default: false}
});const Bi = reactive([]);
const selectBi = (val) => {console.log(val, 888);const i = Bi.indexOf(val);if (i <= -1) {Bi.push(val);} else {Bi.splice(i, 1);}console.log(Bi, 88);
};
const emits = defineEmits(['update:modelValue', 'onChangeDialog']);
const isShow = computed({get() {return props.modelValue;},set(val) {emits('update:modelValue', val);}
});const onSureClick = (val) => {emits('onChangeDialog', true);
};
</script><style lang="less">
.el-dialog__header {margin-right: 0;
}
</style>
<style lang="less" scoped>
.share-dialog-dialog {.dialog-text {font-family: 'PingFang SC';font-size: 18px;line-height: 25px;text-align: center;padding: 20px 0;color: #000000;}.dialog-footer {display: flex;align-items: center;justify-content: space-between;color: #000;.false {padding: 10px 50px;border: 1px solid #000000;border-radius: 4px;cursor: pointer;}.true {padding: 10px 50px;background: #000;color: #fff;// background: linear-gradient(266.54deg, #f1fb6f 0%, #7cf9cd 98.94%);border-radius: 4px;cursor: pointer;}}
}
</style><!-- 使用<ClosingDialog v-model="isShow" @onChangeDialog="onChangeDialog" />import ClosingDialog from '@/views/followOrder/myTracking/components/ClosingDialog.vue';const isShow = ref(false);const onShowDialog = (show) => {isShow.value = show;};const onChangeDialog = (val) => {console.log('onSureClick', val);isShow.value = false;}; -->

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

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

相关文章

关于 Eclipse 的一场 “三角关系”

关于 Eclipse 的一场 “三角关系”

上个世纪 90 年代&#xff0c;世界上的计算机要么不联网&#xff0c;要么在企业内部联网。但是&#xff0c;在互联网的概念下&#xff0c;计算机之间共享信息和资源的需求成为了必要。 1995 年 5 月&#xff0c;Java 横空出世。Java 的父亲是当时凭借 Solaris 操作系统风头正盛…
阅读更多...
springboot集成quartz（集群）实现任务定时/立即执行

springboot集成quartz（集群）实现任务定时/立即执行

添加pom依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-quartz</artifactId></dependency><dependency><groupId>com.alibaba</groupId><artifactId>druid</a…
阅读更多...
vue3笔记-基础篇

vue3笔记-基础篇

vue3笔记 第一章 基础篇 MVVM框架 vue数据绑定方法 Object.defineProperty() vue2使用的数据绑定方法 var obj {} Object.defineProperty(obj,"myname",{get(){consloe.log("get")}set(value){console.log("set",value)} }proxy代理 vue…
阅读更多...
【C#】五种单例模式详解

【C#】五种单例模式详解

单例模式有五种&#xff1a; 饿汉模式、懒汉模式、双重锁懒汉模式、静态内部类模式、枚举模式。 1.饿汉式 public class SingleTon1 { private static SingleTon1 instance new SingleTon1(); private SingleTon1() { }public SingleTon1 getInstance(){return instance; …
阅读更多...
Golang 中的数组Array以及Slice底层实现

Golang 中的数组Array以及Slice底层实现

1、Array(数组) 数组是指一系列同一类型数据的集合。数组中包含的每个数据被称为数组元素 (element)，这种类型可以是任意的原始类型，比如 int 、 string 等，也可以是用户自定义的类型。一个数组包含的元素个数被称为数组的长度。 在 Golang 中数组是一个长度固定的数据类…
阅读更多...
【朱颜不曾改，芳菲万户香。AIGC人物图片创作---InsCode Stable Diffusion 美图活动一期】

【朱颜不曾改，芳菲万户香。AIGC人物图片创作---InsCode Stable Diffusion 美图活动一期】

【朱颜不曾改&#xff0c;芳菲万户香。AIGC人物图片创作 ---InsCode Stable Diffusion 美图活动一期】 本文目录&#xff1a; 一、 Stable Diffusion 模型在线使用 1.1、模板运行环境配置 1.2、运行InsCode平台的Stable Diffusion模板 二、Stable Diffusion主界面功能 2.…
阅读更多...
数据结构——各种常见算法的实现方法和思路

数据结构——各种常见算法的实现方法和思路

文章目录 常见的排序算法类型复杂度和稳定性 1.冒泡排序2.直接插入排序3.希尔排序4.简单选择排序方法1&#xff1a;双向遍历选择排序方法2&#xff1a;单向遍历选择排序 5.归并排序方法1&#xff1a;递归方法2&#xff1a;非递归 6.快速排序方法1&#xff1a;随机取keyi方法2&a…
阅读更多...
MAC下将jar包安装到本地maven仓库

MAC下将jar包安装到本地maven仓库

在终端执行命令如下&#xff1a; mvn install:install-file "-Dfile/Users/kkeer/lost_lib/slf4j-1.7.2.jar" "-DgroupIdorg.slf4j" "-DartifactIdslf4j-log4j12" "-Dversion1.7.2" "-Dpackagingjar" "-DgeneratePomt…
阅读更多...
thinkphp6 动态开启debug模式

thinkphp6 动态开启debug模式

1、找到config/app.php 2、自定义开启debug参数名称:示例参数为debug,可以根据自己项目情况自定义 3、必须同时设置App::debug 和 Env::set(APP_DEBUG) <?php // ---------------------------------------------------------------------- // | 应用设置 // --------…
阅读更多...
TiDB字符集和时区

TiDB字符集和时区

TiDB 字符集和时区 mysql> select version; -------------------------------------- | version | -------------------------------------- | 5.7.10-TiDB-v2.1.0-beta-179-g5a0fd2d | -------------------------------------- 1 row in set (0.00 sec) mysql> …
阅读更多...
谈 Delphi 中 JSON 的简便操作（非常简单）

谈 Delphi 中 JSON 的简便操作（非常简单）

我曾有讲过Delphi操作JSON的方法&#xff0c;特别是这一篇【delphi】类和记录的 helpers&#xff08;助手&#xff09;。但是因为当时是主要介绍的是Delphi的Helper&#xff0c;大家可能并没注意到Delphi中JSON的简便操作方法。 早期Delphi并没有自己的JSON操作库&#xff0c;大…
阅读更多...
了解 JVM - 认识垃圾回收机制与类加载过程

了解 JVM - 认识垃圾回收机制与类加载过程

前言 本篇通过介绍JVM是什么&#xff0c;认识JVM的内存区域的划分&#xff0c;了解类加载过程&#xff0c;JVM中垃圾回收机制&#xff0c;从中了解到垃圾回收机制中如何找到存活对象的方式&#xff0c;引用计数与可达性分析的方式&#xff0c;再释放垃圾对象时使用的方式&…
阅读更多...
Kerberos协议详解

Kerberos协议详解

0x01 kerberos协议的角色组成 Kerberos协议中存在三个角色&#xff1a; 客户端(Client)&#xff1a;发送请求的一方 服务端(Server)&#xff1a;接收请求的一方 密钥分发中心(Key distribution KDC) 密钥分发中心分为两个部分&#xff1a; AS(Authentication Server)&…
阅读更多...
HashMap和HashTable的区别是什么？

HashMap和HashTable的区别是什么？

HashMap和HashTable都是常见的哈希表实现方式&#xff0c;它们有以下主要区别&#xff1a; 1. 线程安全性&#xff1a;HashTable是线程安全的&#xff0c;而HashMap不是。HashTable的方法都是同步的&#xff0c;可以在多线程环境中安全使用&#xff0c;但是会带来额外的性能开…
阅读更多...
Nacos (2.0版本之后)状态异常集群节点状态异常

Nacos (2.0版本之后)状态异常集群节点状态异常

在nacos 2.0 之后正常部署后节点状态仅有一个正常,其余均为DOWN 或者SUSPICIOUS 状态 查看日志后发现 ERROR Server check fail, please check server 192.168.172.104 ,port 9849 is available , error {} 其实是nacos 相互之间不能正常通信造成的,nacos客户端升级为2.x版…
阅读更多...
apple pencil一代的平替有哪些品牌？苹果平板的触控笔

apple pencil一代的平替有哪些品牌？苹果平板的触控笔

随着苹果Pencil系列的推出&#xff0c;平替电容笔在国内市场得到了较好的发展&#xff0c;随之的销量&#xff0c;也开始暴涨&#xff0c;苹果pencil因为价格太高&#xff0c;导致很多人买不起。目前市场上&#xff0c;有不少的平替电容笔&#xff0c;可以替代苹果的Pencil&…
阅读更多...
MySQL 主从复制与读写分离

MySQL 主从复制与读写分离

MySQL 主从复制与读写分离 一、mysql读写分离的概念1、什么是读写分离&#xff1f;2、为什么要读写分离呢&#xff1f;3、什么时候要读写分离&#xff1f;4、主从复制与读写分离5、mysql支持的复制类型 二、主从复制的工作过程三、MySQL 读写分离原理常见的 MySQL 读写分离分为…
阅读更多...
【Distributed】分布式ELK日志文件分析系统（二）

【Distributed】分布式ELK日志文件分析系统（二）

文章目录 一、FilebeatELK 部署1. 环境部署2. 在 Filebeat 节点上操作2.1 安装 Filebeat2.2 设置 filebeat 的主配置文件 3. 在 Apache 节点上操作3.1 在 Logstash 组件所在节点上新建一个 Logstash 配置文件 3. 启动3.1 在Logstash 组件所在节点启动3.2 在 Filebeat 节点 启动…
阅读更多...
Stable Diffusion 用2D图片制作3D动态壁纸

Stable Diffusion 用2D图片制作3D动态壁纸

如果想让我们的2D图片动起来可以使用stable-diffusion-webui-depthmap-script插件在SD中进行加工让图片动起来。 这是一个可以从单个图像创建深度图，现在也可以生成3D立体图像对的插件，无论是并排还是浮雕。生成的结果可在3D或全息设备（如VR耳机或Looking Glass显示器）上查…
阅读更多...
C语言实现，固定内存通讯录（注释超详细）

C语言实现，固定内存通讯录（注释超详细）

头文件 #ifndef __LINKMAN_H__ #define __LINKMAN_H__#include<stdio.h> #include<string.h> #pragma warning (disable:4996) typedef struct LINKMAN//建立结构体&#xff0c;存放联系人信息 {char name[20];char sex[10];int age;int tel[12];char addr[50]; }…
阅读更多...
最新文章

Copyright @ 2022~2023