使用弹窗进行交互可以提升用户体验度,使页面也变得简洁
官网介绍:http://element-cn.eleme.io/#/zh-CN/component/dialog#dialog-dui-hua-kuang
最简单的组成
1. 触发的按钮,此弹框一般都是点击按钮触发后弹出来的
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
- @click:点击触发的事件
- dialogVisible = true:dialogVisible 这个局部变量控制着弹窗的显示隐藏( true 为显示,false 为隐藏)
2. 最基本的弹框模型
<el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose">
<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>
- title:弹窗的标题
- :visible.sync="dialogVisible":dialogVisible 这个局部变量控制着弹窗的显示隐藏( true 为显示,false 为隐藏)
- :before-close="handleClose":关闭前的回调,会暂停 Dialog 的关闭
- slot="footer":弹窗分为两部分( body 和 footer ),这里为 footer
- @click="dialogVisible = false":确定和取消按钮都将关闭弹窗
3. data() 中的变量
data() {
return {
dialogVisible: false
};
}
- dialogVisible:上文中使用频率最高的变量,用来控制弹框的显示隐藏
4. methods 方法
handleClose(done){
this.$confirm('确定关闭吗').then(() => {
// function(done),done 用于关闭 Dialog
done();
console.info("点击右上角 'X' ,取消按钮或遮罩层时触发");
}).catch(() => {
console.log("点击确定时触发");
});
}
- handleClose:弹窗在关闭前触发的事件(点击右上角的 'X',取消按钮以及遮罩层部分时) 询问是否确定关闭此弹窗,点击确定则关闭
整个完整demo
<template>
<div class="app-container">
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose">
<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
};
},
methods: {
handleClose(done){
this.$confirm('确定关闭吗').then(() => {
// function(done),done 用于关闭 Dialog
done();
console.info("点击右上角 'X' ,取消按钮或遮罩层时触发");
}).catch(() => {
console.log("点击确定时触发");
});
}
}
};
</script>
欢迎来访我的vue专栏总篇博客
希望能够帮助到你
over