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-dialog
    v-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>
        <img
          src="@/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>
          <img
            class="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>
          <img
            class="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>
  <ElDialog
    destroy-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-dialog
    v-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;
  }; -->

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

mysql的两种安装方式（yum在线安装和通用二进制）

mysql的两种安装方式（yum在线安装和通用二进制）

文章目录 msqly的安装一、yum在线安装二、通用二进制安装mysql msqly的安装 一、yum在线安装 yum是一种在线安装方式&#xff0c;通过官网网址在linux下载安装 首先是配置一个yum安装源 yum install http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm也…
阅读更多...
使用Jetpack Compose中的LazyRow

使用Jetpack Compose中的LazyRow

在Jetpack Compose中&#xff0c;我们可以使用LazyRow来创建一个水平滚动的列表&#xff0c;类似于传统Android开发中的HorizontalScrollView。在这篇博客中&#xff0c;我们将探讨如何在Jetpack Compose中使用LazyRow。 创建LazyRow 要创建一个LazyRow&#xff0c;我们需要创…
阅读更多...
旧手机不要轻易扔掉，将其设置为无线网卡，不消耗流量

旧手机不要轻易扔掉，将其设置为无线网卡，不消耗流量

如果你有一部旧手机正在闲置着&#xff0c;或者正考虑要将其丢弃&#xff0c;那么请暂停一下。因为这个旧手机可以成为你的无线网卡&#xff0c;帮助你在家中或出行时实现更快的网络下载速度&#xff0c;而且毫不费流量。接下来&#xff0c;我将告诉你如何将旧手机变成无线网卡…
阅读更多...
idea中如何过滤某些文件不提交

idea中如何过滤某些文件不提交

文章目录 前言设置.gitignore文件解决方案 设置新的忽略文件具体步骤如下 常用过滤文件 前言 在开发过程中&#xff0c;经常会遇到一些文件是我们不想提交的内容。那么应该如何过滤掉&#xff1f;不去提交到我们的git仓库&#xff1f; 比如&#xff0c;我们常用的一些配置文件…
阅读更多...
01_面向对象的设计原则

01_面向对象的设计原则

面向对象的设计原则 参考资料&#xff1a; 视频书籍 《设计模式&#xff1a;可复用面向对象软件的基础》 简介 面对复杂问题如何解决&#xff1f; 分解&#xff1a;分而治之&#xff0c;大问题分解成小问题。抽象&#xff1a;忽视非本质的细节&#xff0c;处理泛化和理想化…
阅读更多...
卷积神经网络--猫狗系列之下载、导入数据集

卷积神经网络--猫狗系列之下载、导入数据集

(由于是学习&#xff0c;所以文章会有一些报错及解决办法) 在Kaggle()获取数据集&#xff1a;&#xff08;没有账号先去注册一个账号&#xff0c;在注册时可能会出现的问题见Kaggle注册出现一排“Captcha must be filled out.”&#xff01;&#xff09; https://www.kaggle.…
阅读更多...
人工智能在航天领域中有哪些应用？

人工智能在航天领域中有哪些应用？

随着科技的不断进步&#xff0c;人工智能已经成为各个领域中的重要驱动力。在航天领域中&#xff0c;人工智能的应用正日益展现出巨大的潜力。航天领域对精确性、自动化和高效性的需求&#xff0c;使得人工智能成为实现这些目标的关键技术之一。人工智能正在以其独特的优势和算…
阅读更多...
Linux中Docker详细安装说明

Linux中Docker详细安装说明

1.准备环境 说明&#xff1a;准备Linux系统centos7版本(以上) 2.切换管理模式 说明&#xff1a;输入一下命令&#xff0c;然后回车&#xff0c;输入密码。 su – 3.更新yum 说明&#xff1a;为了保证doker能够给顺利安装&#xff0c;那么更新一下&#xff1b;如果没有也可以…
阅读更多...
【SpringMVC】| 报文信息转换器HttpMessageConverter

【SpringMVC】| 报文信息转换器HttpMessageConverter

目录 框架搭建 报文信息转换器HttpMessageConverter 1. RequestBody注解 2. RequestEntity类型 3. RequestBody注解&#xff08;常用&#xff09; 重点&#xff1a;SpringMVC处理json 重点&#xff1a;SpringMVC处理ajax 重点&#xff1a;RestController注解 4. Respo…
阅读更多...
day1-若依项目前后端分离的初步使用

day1-若依项目前后端分离的初步使用

响应式布局: 做好的产品能在pc端,手机,平板都能正常浏览 开发项目两种方式 1.自己从0开始写代码 2.在若依中下载拥有基础功能的源码 若依使用的mysql版本 mysql5.7 导入别人的项目如何操作 若依项目下载地址**:https://gitee.com/y_project/RuoYi-Vue.git** 可以使用揉…
阅读更多...
AIPRM for ChatGPT 提示词模板扩展工具实践

AIPRM for ChatGPT 提示词模板扩展工具实践

&#xff08;1&#xff09;基本介绍 AIPRM for ChatGPT是一个Chrome浏览器扩展程序&#xff0c;基于Chromium内核开发的浏览器都可以使用该扩展&#xff0c;比如微软的Edge浏览器等。 在AIPRM的帮助下&#xff0c;我们可以在ChatGPT中一键使用各种专门为网站SEO、SaaS、营销、…
阅读更多...
Transformer(四)--实现验证：transformer 机器翻译实践

Transformer(四)--实现验证：transformer 机器翻译实践

转载请注明出处&#xff1a;https://blog.csdn.net/nocml/article/details/125711025 本系列传送门&#xff1a; Transformer(一)–论文翻译&#xff1a;Attention Is All You Need 中文版 Transformer(二)–论文理解&#xff1a;transformer 结构详解 Transformer(三)–论文实…
阅读更多...
idea搭建springmvc

idea搭建springmvc

Spring MVC是一种基于MVC模式的框架&#xff0c;它是Spring框架的一部分。它提供了一种更简单和更有效的方式来构建Web应用程序。它提供了一系列的功能&#xff0c;可以帮助您更快地构建Web应用程序&#xff0c;如控制器&#xff0c;视图&#xff0c;模型&#xff0c;数据绑定&…
阅读更多...
如何用Airtest脚本无线连接Android设备？

如何用Airtest脚本无线连接Android设备？

1. 前言 之前我们已经详细介绍过如何用AirtestIDE无线连接Android设备&#xff1a; 手把手教你用AirtestIDE无线连接手机&#xff01; &#xff0c;它的关键点在于&#xff0c;需要先 adb connect 一次&#xff0c;才能点击 connect 按钮无线连接上该设备&#xff1a; 但是有很…
阅读更多...
20230705点亮STC32G实验箱9.6（STC32G12K128）开发板的跑马灯LED（深入了解）

20230705点亮STC32G实验箱9.6（STC32G12K128）开发板的跑马灯LED（深入了解）

08第六集&#xff1a;LED闪烁第六集&#xff1a;LED闪烁和花式点灯上和花式点灯上.mp4 09第六集&#xff1a;LED闪烁和花式点灯下.mp4 【大文哥学习32位8051】20230704【冲哥视频】第六集的晶振时钟的学习困惑 2023/7/5 17:36 delay_ms(3000); 刷机的时候如果使用11.0592M的Fos…
阅读更多...
【LeetCode周赛】2022上半年题目精选集——思维题

【LeetCode周赛】2022上半年题目精选集——思维题

文章目录 2211. 统计道路上的碰撞次数&#xff08;栈 || 脑筋急转弯&#xff09;解法1&#xff1a;自己想的——使用栈解法2——思维&#xff1a;去掉左右两边往左右开的车代码写法1——找左右端点代码写法2——正则表达式去除流处理api补充&#xff1a;replaceAll() 和 正则表…
阅读更多...
python图像处理实战（三）—图像几何变换

python图像处理实战（三）—图像几何变换

&#x1f680;写在前面&#x1f680; &#x1f58a;个人主页&#xff1a;https://blog.csdn.net/m0_52051577?typeblog &#x1f381;欢迎各位大佬支持点赞收藏&#xff0c;三连必回&#xff01;&#xff01; &#x1f508;本人新开系列专栏—python图像处理 ❀愿每一个骤雨初…
阅读更多...
c语言修炼之猜数字游戏

c语言修炼之猜数字游戏

前言 小伙伴们&#xff0c;今天来学习猜数字游戏叭&#xff01;废话不多说&#xff0c;让我们一起开始学习叭! 思路&#xff1a; 一打开游戏就出现一个菜单然后可以让我们选择是进入游戏还是退出游戏&#xff01; #include<stdio.h> void menu() {printf("*****…
阅读更多...
【MySQL】基本查询之表的增删改查

【MySQL】基本查询之表的增删改查

【MySQL】表的增删改查 一、插入操作----insert1.1 简单插入1.2 插入时是否更新----ON DUPLICATE KEY UPDATE1.3 插入时替换----REPLACE 二、查询----select2.1 简单查询与去重2.2 基本查询----where条件2.2.3 案列演示 2.4 排序----order by 三、修改操作----update四、删除--…
阅读更多...
Lua学习笔记：浅谈table的实现

Lua学习笔记：浅谈table的实现

前言 本篇在讲什么 Lua中的table的实现 本篇适合什么 适合初学Lua的小白 本篇需要什么 对Lua语法有简单认知 依赖Sublime Text编辑器 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#xff0c;快速上手 提供全流程的源码内容 ★提高阅读体验★ &…
阅读更多...
最新文章

Copyright @ 2022~2023