element Dialog 的用法
时间: 2024-04-29 07:21:19 浏览: 162
Element Dialog 是一个弹出框组件,用于在页面中展示一个模态窗口,通常用于提示用户或者展示详细信息。
使用 Element Dialog 的步骤如下:
1. 在 HTML 文件中引入 Element UI 的样式文件和 JavaScript 文件。
2. 在需要使用 Dialog 的组件中,引入 Dialog 组件并注册。
```javascript
import { Dialog } from 'element-ui';
export default {
components: {
Dialog
},
...
}
```
3. 在组件中使用 Dialog 组件,可以通过 v-model 控制 Dialog 的显示和隐藏。
```html
<template>
<div>
<el-button type="primary" @click="dialogVisible = true">打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<p>这是一个 Dialog 弹出框。</p>
<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
}
},
methods: {
handleClose(done) {
this.$confirm('确定关闭?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
}
</script>
```
4. 在 Dialog 组件中可以添加各种组件和数据,比如标题、内容、底部按钮等,可以通过 slot 来实现。
```html
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<p>这是一个 Dialog 弹出框。</p>
<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>
```
以上就是 Element Dialog 的用法。