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

更新时间：2023年07月06日 09:04:19 作者：JackieDYH

本文主要介绍了Vue3使用element-plus实现弹窗效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

使用

<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;
  }; -->

到此这篇关于Vue3使用element-plus实现弹窗效果的文章就介绍到这了,更多相关Vue3 element-plus弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用Vue-axios进行数据交互的方法
这篇文章主要介绍了使用Vue-axios进行数据交互详情，文章围绕Vue-axios进行数据交互的相关资料展开详细内容，需要的小伙伴可以参考一下，希望对你的学习或工作有所帮助
2022-03-03
vue之字符串、数组之间的相互转换方式
这篇文章主要介绍了vue之字符串、数组之间的相互转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Vue跨域请求问题解决方案过程解析
这篇文章主要介绍了Vue跨域请求问题解决方案过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
Vue中子组件不能修改父组件传来的Prop值的原因分析
在Vue中，父子组件之间通过Prop和Event实现了数据的双向绑定，但是，Vue设计者为什么不允许子组件修改父组件传递的Prop呢，本文就来带大家探究为什么子组件不能修改Prop,需要的朋友可以参考下
2023-06-06
vue webpack打包原理解析(全网最新最全)
webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系，这篇文章主要介绍了vue webpack打包原理,本篇介绍的有点长，希望大家耐心阅读
2023-02-02
mpvue实现左侧导航与右侧内容的联动
这篇文章主要为大家详细介绍了mpvue实现左侧导航与右侧内容的联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
vue 动态组件component
这篇文章主要介绍了 vue 动态组件component ，vue提供了一个内置的<component>,专门用来实现动态组件的渲染，这个标签就相当于一个占位符，需要使用is属性指定绑定的组件，想了解更多详细内容的小伙伴请参考下面文章的具体内容
2021-11-11
详解Vue.js入门环境搭建
这篇文章主要介绍了详解Vue.js入门环境搭建，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-03-03
vue3 + vite + ts 中使用less文件全局变量的操作方法
这篇文章主要介绍了vue3 + vite + ts 中使用less文件全局变量的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03
Vue3中props和emit的使用方法详解
props是Vue中最常见的父子通信方式,使用起来也比较简单,下面这篇文章主要给大家介绍了关于Vue3中props和emit的使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03