脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:

相关文章

  • 解决antd的Form组件setFieldsValue的警告问题

    解决antd的Form组件setFieldsValue的警告问题

    这篇文章主要介绍了解决antd的Form组件setFieldsValue的警告问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue3实现页面跳转的示例代码

    vue3实现页面跳转的示例代码

    这篇文章给大家介绍了vue3如何实现页面跳转,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • vue从仓库state中取不到数据的问题

    vue从仓库state中取不到数据的问题

    这篇文章主要介绍了vue从仓库state中取不到数据的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue实现表格合并与拆分的示例代码

    Vue实现表格合并与拆分的示例代码

    在Vue应用程序中，表格是一个非常常见的组件，在这篇文章中，我们将介绍如何在Vue中进行表格的合并和拆分，感兴趣的小伙伴可以了解一下
    2023-06-06
  • Vue ElementUI实现:限制输入框只能输入正整数的问题

    Vue ElementUI实现:限制输入框只能输入正整数的问题

    这篇文章主要介绍了Vue ElementUI实现:限制输入框只能输入正整数的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue_drf实现短信验证码

    vue_drf实现短信验证码

    我们在做网站开发时，登录页面很多情况下是可以用手机号接收短信验证码，本文主要介绍了vue_drf实现短信验证码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • 详解vue-cli中配置sass

    详解vue-cli中配置sass

    本篇文章主要介绍了详解vue-cli中配置sass ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue代理报错404问题及解决(vue配置proxy)

    Vue代理报错404问题及解决(vue配置proxy)

    这篇文章主要介绍了Vue代理报错404问题及解决(vue配置proxy)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • Vue中如何使用Axios发送FormData请求

    Vue中如何使用Axios发送FormData请求

    Axios提供了简单而强大的API来处理HTTP请求,而FormData提供了用于构建表单数据的API,这篇文章主要介绍了Vue中如何使用Axios发送FormData请求,需要的朋友可以参考下
    2024-07-07
  • Vue组件实现旋转木马动画

    Vue组件实现旋转木马动画

    这篇文章主要为大家详细介绍了Vue组件实现旋转木马动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07

最新评论