js 创建eldialog对象

### 创建 Element UI 的 Dialog 组件 为了使用 JavaScript 创建 Element UI 的 `Dialog` 组件，可以通过 Vue 实例来实现这一功能。下面是一个完整的例子展示如何定义并控制一个对话框的显示与隐藏。 ```javascript // 导入必要的库和组件 import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App); app.use(ElementPlus); // 使用 Element Plus 中的 Dialog 和 Button 组件作为示例 <template> <div id="app"> <!-- 对话框触发按钮 --> <el-button @click="dialogVisible = true">打开对话框</el-button> <!-- 对话框本身 --> <el-dialog :visible.sync="dialogVisible" title="提示"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, }; }, }; </script> ``` 上述代码展示了怎样通过点击按钮来切换对话框的状态[^1]。这里的关键在于理解 `v-model` 或者说在新版中的 `.sync` 修改器用于双向绑定属性值到数据模型上，在本案例中即为 `dialogVisible` 变量。当这个变量被设置成 `true` 时，对话框就会显现出来；反之则会关闭它。 对于希望仅利用纯 JavaScript 而不是框架的情况，可以采用如下方式： ```html <!-- HTML 部分 --> <div id="app"></div> <button onclick="openDialog()">Open Dialog</button> <!-- 弹窗模板 --> <div v-if="isShow" style="display:none;" ref="myDialogTemplate"> <el-dialog :visible.sync="isShow" title="Hello World"> <p>This is an example of creating a dialog.</p> </el-dialog> </div> ``` ```javascript // JavaScript部分 let vm; new Vue({ el: '#app', data: function () { return { isShow: false, } }, mounted(){ // 将弹窗挂载至DOM树下 document.body.appendChild(this.$refs.myDialogTemplate) }, }); function openDialog() { vm.isShow = !vm.isShow; } ``` 这段脚本说明了即使不完全依赖于Vue单文件组件的形式也可以成功创建并管理Element UI提供的交互式元素[^2]。