dialog v2与v3 的差异

<!-- 组件使用 -->
<HistoryData v-model="isHistoryData"></HistoryData>

v2中的使用

<template>
  <!-- :visible.sync="isShow"  存在差异 -->
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="isShow"
    :title="title"
  >
    <template #footer>
      <el-button @click="handleCancle">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { computed } from "vue";
// value 为 v2.7版本的
const props = withDefaults(
  defineProps<{
    value: boolean;
    isEdit?: boolean;
  }>(),
  { value: false, isEdit: false }
);
const emit = defineEmits(["input"]);
const isShow = computed({
  get() {
    return props.value;
  },
  set(val) {
    emit("input", val);
  },
});
const handleConfirm = () => {
  closeDialog();
};
const handleCancle = () => {
  closeDialog();
};
const closeDialog = () => {
  isShow.value = false;
};
    
const title = computed(() => {
  return props.isEdit ? "编辑" : "新增";
});
</script>
<style lang="scss" scoped></style>

v3中的使用

<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    v-model="isShow"
    :title="title"
  >
    <template #footer>
      <el-button @click="handleCancle">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";
const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    isEdit?: boolean;
  }>(),
  {
    modelValue: false,
    isEdit: false,
  }
);

//v3中 v-bind:value改成了v-bind:modelValue，监听的事件也从input改成了update:modelValue
const emit = defineEmits(["update:modelValue"]);
const isShow = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  },
});

const handleConfirm = () => {
  isShow.value = false;
};
const handleCancle = () => {
  isShow.value = false;
};
    
const title = computed(() => {
  return props.isEdit ? "编辑" : "新增";
});
</script>

<style lang="scss" scoped></style>