vue3-confirm组件封装

最新推荐文章于 2024-05-15 14:59:55 发布

前端、小老弟

最新推荐文章于 2024-05-15 14:59:55 发布

阅读量854

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Shiqi_777/article/details/125941580

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<template>
  <transition name="confirm-fade">
    <div class="b-confirm" v-show="$props.visible">
      <!-- 头部标题 -->
      <div class="b-confirm-header">
        <slot name="header">
          <b-icon
            name="setting"
            :style="{ fontSize: '60px', color: 'red' }"
          ></b-icon>
        </slot>
        <b-icon name="close" class="b-close-icon" @click="close"></b-icon>
      </div>
      <!-- 内容区域 -->
      <div class="b-confirm-content">
        <slot>
          <div>删除后无法恢复，</div>
          <div>确定删除？</div>
        </slot>
      </div>
      <!-- 底部按钮 -->
      <div class="b-confirm-footer">
        <div class="b-confirm-btn">
          <b-button type="default" @click="close">取消</b-button>
          <b-button type="primary" @click="ok">确认</b-button>
        </div>
      </div>
    </div>
  </transition>
  <!-- 遮罩层 -->
  <div class="mask" v-show="$props.visible" @click="close"></div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import BButton from '@/components/button/src/button.vue'
import BIcon from '@/components/icon/src/icon.vue'

export default defineComponent({
  name: 'BConfirm',
  components: { BButton, BIcon },
  props: {
    visible: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  emits: ['cancel', 'update:visible', 'submit'],
  setup(props, { emit }) {
    // 取消

    const close = () => {
      emit('cancel')
      emit('update:visible', false)
    }
    // 确认
    const ok = () => {
      emit('submit')
      emit('update:visible', false)
    }

    return {
      close,
      ok
    }
  }
})
</script>

<style scoped lang="less">
@import "../style/confirm.less";
</style>

css部分：

// 遮罩层
.mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 30%);
}

.b-confirm {
  position: fixed;
  top: 45%;
  left: 50%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 460px;
  height: 304px;
  background-color: #fff;
  border-radius: 8px;
  transition: 0.5s;
  transform: translate(-50%, -50%);

  .b-confirm-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;

    .b-close-icon {
      position: absolute;
      top: 21px;
      right: 20px;
      width: 22px !important;
      height: 22px !important;
      cursor: pointer;
    }
  }

  // 内容
  .b-confirm-content {
    position: absolute;
    top: 128px;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 94px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #242934;
  }

  // 底部按钮
  .b-confirm-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    padding-bottom: 48px;
    border: none;

    .b-confirm-btn {
      display: flex;
      justify-content: center;

      button {
        margin-left: 12px;
      }
    }
  }
}

// 模态框展示隐藏的动画
.confirm-fade-enter-active {
  transition: all 0.3s ease-out;
}

.confirm-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.confirm-fade-enter-from,
.confirm-fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%) scale3d(0, 0, 0);
}