element plus之el-dialog二次封装

使用vue3+ts搭建的项目，使用的比较多的是vue2，对vue3的语法还是不熟，花费的时间比较多

vue2可以使用v-bind='$attrs'和v-on='$linstens',vue3废除了v-on='$linstens'，将其合并在一起使用v-bind='$attrs'即可

想法是将其el-dialog的api一起合并，可以在父组件直接使用el-dialog的api

例如这些api align-center :show-close='false'

<Dialog title="warn" v-model:isShow='isShow' width='30%' align-center :show-close='false' @confirm='confirm' @cancel='cancel'>
    <div class="dialog-text">Are you sure you want to choose a new theme to customize? Currently, only one theme can be customized. If you choose a new theme to customize, your previously configured theme will not be saved.</div>
  </Dialog>

vue2的做法是

import { Select } from "element-ui";

   props: Object.assign({}, Select.props, {
    value: {
      type: [Number, String],
      default: ''
    },
  }),

vue3就简单多了，直接 v-bind="$attrs"，不得不说，真香~~~

<!--
 * @Descripttion: 二次封装的dialog
 * @version: 
 * @Author: lihk
 * @Date: 2022-11-23 10:12:17
 * @LastEditors: lihk
 * @LastEditTime: 2022-11-23 15:33:31
-->
<template>
  <div class="flex-st">
    <el-dialog v-model="getIsShow" v-bind="$attrs" :before-close="handlerCancer">
      <template #header>
        <div class="flex-st">
          <img class="type-icon" src="@/assets/img/warning2.png" alt="">
          {{props.title}}
        </div>
      </template>
      <slot></slot>
      <template #footer>
        <div class="dialog-btn flex-ct">
          <span @click="handlerCancer">Do not switch</span>
          <span @click="handlerSubmit">switch anyway</span>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import { computed } from "vue";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  isShow: {
    type: Boolean,
    default: true,
  },
});
console.log("_dialogProps", props);
const emits = defineEmits(["update:isShow"]);
const handlerCancer = () => {
  emits("cancel");
  emits("update:isShow", false);
};
const handlerSubmit = () => {
  emits("confirm");
  emits("update:isShow",false);
};
const getIsShow = computed({
  get: () => props.isShow,
  set: (val) => {
    emits("update:isShow", val);
  },
});
</script>
<style lang='scss' scoped>
:deep(.el-dialog__body) {
  padding: 10px 21px 21px 21px;
}
:deep(.el-dialog.is-align-center){
  border-radius: 10px;
}
.dialog-btn {
  span {
    background-color: #dde3ee;
    padding: 10px 13px;
    border-radius: 4px;
  }
  span:first-child {
    margin-right: 27px;
  }
}
.type-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
</style>

路过的大佬可以微信搜索：前端的日常，帮忙涨涨人气