<template>
<div>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :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>
<button @click="dialogVisible = true">dialog</button>
</div>
</template>
<script>
export default {
data () {
return {
dialogVisible: false
};
},
created () { },
computed: {},
mounted () { },
methods: {}
};
</script>
<style>
/* @import url(); 引入css类 */
/**dialog css */
.el-dialog {
border-radius: 5px;
text-align: left;
}
.el-dialog__title {
line-height: 24px;
font-size: 18px;
color: #ffff !important;
}
.el-dialog__body {
padding: 20px 20px;
color: #606266;
font-size: 14px;
word-break: break-all;
}
.el-dialog__header {
padding: 10px 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
/* 从左到右的垂直渐变 #1268a5; */
background: linear-gradient(to right, #1268a5, #ccf3de);
}
.el-dialog__headerbtn .el-dialog__close {
color: #05276d;
}
.el-dialog__headerbtn {
position: absolute;
top: 14px;
right: 20px;
padding: 0;
background: 0 0;
border: none;
outline: 0;
cursor: pointer;
font-size: 16px;
}
</style>
el-dialog样式修改
最新推荐文章于 2024-07-26 10:22:20 发布
本文详细介绍了在Vue应用中如何使用el-dialog组件创建提示信息对话框,包括其属性设置、显示和关闭方法,以及CSS样式定制。
摘要由CSDN通过智能技术生成