caseEditor/src/components/dialog/index.vue

<template>
  <teleport to="#dialog">
    <div class="dialog-bg" v-if="show">
      <div class="dialog" :style="{ width: width + 'px' }">
        <div class="head">
          <h3>{{ title }}</h3>
          <el-icon @click="closeHandle" v-if="showClose || cornerClose">
            <Close />
          </el-icon>
        </div>
        <div class="content">
          <slot />
        </div>
        <div class="floot" v-if="showFloor">
          <el-button type="danger" v-if="showDel" @click="deleteHandle">删 除</el-button>
          <el-button @click="closeHandle" v-if="showClose">取 消</el-button>
          <el-button type="primary" :disabled="!!disabled" @click="enterHandle">
            {{ enterText }}
          </el-button>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { computed, ref, watch, watchEffect } from "vue";
import { user } from "@/store/user";
import { operateIsPermissionByPath } from "@/directive/permission";
import { DialogProps } from "./type";

const props = withDefaults(defineProps<DialogProps>(), {
  width: 680,
  show: false,
  hideFloor: false,
  showClose: true,
  enterText: "保 存",
});

const emit = defineEmits<{
  (e: "update:show", show: boolean): void;
  (e: "quit"): void;
  (e: "submit"): void;
  (e: "delete"): void;
}>();

const showDel = ref(props.showDelete);
const showFloor = computed(() => !props.hideFloor);

const closeHandle = () => {
  emit("update:show", false);
  emit("quit");
};
const enterHandle = () => {
  emit("submit");
};
const deleteHandle = () => {
  emit("delete");
};

const disabled = computed(() => props.power && !operateIsPermissionByPath(props.power));
</script>

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