快捷導(dǎo)航

Vue3使用element-plus實現(xiàn)彈窗效果

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

本文主要介紹了Vue3使用element-plus實現(xiàn)彈窗效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

使用

<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">帶單平臺設(shè)置</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>

基礎(chǔ)代碼

<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: '申請?zhí)峤怀晒?，我們的工作人員將在24小時內(nèi)完成審核'
    }
  }
});
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">
//單獨設(shè)置顏色 /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">確定以當(dāng)前市場價格平倉？</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;
  }; -->

到此這篇關(guān)于Vue3使用element-plus實現(xiàn)彈窗效果的文章就介紹到這了,更多相關(guān)Vue3 element-plus彈窗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: