element-ui this.$confirm 自定义样式
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
this.$confirm('删除后无法恢复,你还要继续吗?', '删除用户信息', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'confirm'
}).then(function(res) {
console.log(res)
}).catch(function(err) {
console.log(err)
})
问题:在js里定义了一个$confirm 修改弹框样式,没有效果,主要是因为这个div不是vue的组件 不具备组件的一些特性 所以不生效也是必然
解决问题:scoped不生效,那么只能将样式放全局,在当前组件加上一段不带scoped的style,或者放到全局样式表中
<style>
.confirm{
height: 160px;
}
.confirm .el-message-box__header{
border-bottom: 1px solid #CCCCCC;
}
.confirm .el-message-box__container{
text-align: center;
}
.confirm .el-message-box__status.el-icon-warning{
left: 70px;
}
.confirm.el-message-box__title{
font-size: 16px;
}
.confirm .el-message-box__message p {
color: #F92D2D;
margin-top: 5px;
}
.confirm .el-message-box__btns{
text-align: center;
margin-top: 10px;
}
</style>
scoped会影响局部样式修改,当样式无法修改,首先要检查是否是scoped对其干扰了。
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)