老师，关于控制模态框的显示隐藏有另外的思路：1. 不用v-model="visible"去控制模态框的显示隐藏，改用model-value="visible"，这样就不会直接修改props ; 2.利用el-dialog的before-close属性监听关闭模态框，在事件回调中，不执行默认的done方法，而是执行自定义的更新visible props的方法handleClickBtn，即实现正常的显示隐藏模态框。

<template>
  <el-button type="primary" @click="handleClickBtn">
    选择图标
    <slot></slot>
  </el-button>

  <el-dialog
    :model-value="visible"
    :title="title"
    width="30%"
    :before-close="handleClose"
  >
    <span>This is a message</span>
  </el-dialog>
</template>

<script setup lang="ts">
const props = defineProps<{
  visible: boolean;
  title: string;
}>();
const emits = defineEmits<{
  (event: "update:visible", visible: boolean): void;
}>();

const handleClickBtn = () => {
  emits("update:visible", !props.visible);
};
const handleClose = (done: () => void) => {
  // 直接执行done()会导致props.visible的值没有更新
  handleClickBtn();
  // done();
};
</script>

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