脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3 element-plus弹窗

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

 更新时间：2023年07月06日 09:04:19   作者：JackieDYH  
本文主要介绍了Vue3使用element-plus实现弹窗效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

本文介绍了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;
  }; -->

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

您可能感兴趣的文章:

相关文章

  • 使用mint-ui实现省市区三级联动效果的示例代码

    使用mint-ui实现省市区三级联动效果的示例代码

    下面小编就为大家分享一篇使用mint-ui实现省市区三级联动效果的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue组件tabbar使用方法详解

    vue组件tabbar使用方法详解

    这篇文章主要为大家详细介绍了vue组件tabbar使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Vue.extend和VueComponent的关系源码解析

    Vue.extend和VueComponent的关系源码解析

    这篇文章主要为大家详解了Vue.extend和VueComponent的关系源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • vue实现一个懒加载的树状表格实例

    vue实现一个懒加载的树状表格实例

    这篇文章主要介绍了vue实现一个懒加载的树状表格实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • vue中使用vue-qriously插件生成二维码

    vue中使用vue-qriously插件生成二维码

    集成vue-cli脚手架里面的二维码插件貌似很多，一般都会满足大部分需求，这次就讲一下插件vue-qriously生成二维码效果，感兴趣的朋友一起看看吧
    2022-04-04
  • VUE表格显示错位的两种解决思路分享

    VUE表格显示错位的两种解决思路分享

    这篇文章主要介绍了VUE表格显示错位的两种解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue 的keep-alive缓存功能的实现

    vue 的keep-alive缓存功能的实现

    本篇文章主要介绍了vue 的keep-alive缓存功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Vue + OpenLayers 快速入门学习教程

    Vue + OpenLayers 快速入门学习教程

    大家都知道使用 Openlayers可以很灵活自由的做出各种地图和空间数据的展示。而且这个框架是完全免费和开源的，本文记录下 Vue 使用 OpenLayers 入门，使用 OpenLayers 创建地图组件的相关知识，需要的朋友一起学习下吧
    2021-09-09
  • 基于VUE选择上传图片并页面显示（图片可删除）

    基于VUE选择上传图片并页面显示（图片可删除）

    这篇文章主要为大家详细介绍了基于VUE选择上传图片并页面显示，图片可以删除的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 使用Vue写一个datepicker的示例

    使用Vue写一个datepicker的示例

    这篇文章主要介绍了使用Vue写一个datepicker的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论