el-dialog ts 使用

`el-dialog` 是 Element UI 提供的一个轻量级弹窗组件，在 TypeScript 项目中使用 `el-dialog` 需要在 Vue 项目中引入 Element UI 的 TypeScript 定义文件，并按照以下步骤操作：

1. **安装依赖**：首先确保已安装了 Element UI 和相应的 TypeScript 支持。可以使用 npm 或 yarn 进行安装：

   npm install element-ui --save
   npm install @types/element-ui --save-dev

2. **引入组件**：在需要使用 `el-dialog` 的组件 `.ts` 文件头部导入 `ElDialog` 类：

   import { ElDialog } from 'element-ui';

3. **创建对话框**：在模板 (`<template>` 标签内) 中声明对话框的引用，并在适当的地方使用它：

   <el-button @click="openDialog">打开对话框</el-button>
   <el-dialog :visible.sync="dialogVisible" title="提示信息">
     <p>这是一个示例内容。</p>
     <div slot="footer">
       <el-button @click="closeDialog">关闭</el-button>
     </div>
   </el-dialog>

在对应的 Vue 实例中，定义变量 `dialogVisible` 控制对话框的显示隐藏，以及相应的打开和关闭方法 `openDialog` 和 `closeDialog`。

4. **状态管理**：如果你正在使用 Vuex 管理全局状态，记得将 `dialogVisible` 更新到 store 中。

5. **类型安全**：在处理 `dialogVisible` 变量时，Vue 提供的 `sync` 指令用于确保数据双向绑定，同时 TypeScript 会为你提供类型检查。