凡是运用 confirm 确认框时，个体如许写：
<template>
<el-button type="text" @click="open">点击翻开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('此独霸将永世增除了该文件, 能否连续必修', '提醒', {
confirmButtonText: '确定',
cancelButtonText: '撤销',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '增除了顺利!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '未打消增除了'
});
});
}
}
}
</script>
但间或也必要批改翰墨等样式，这时候该若何作呢？
1、 将dangerouslyUseHTMLString属性部署为 true，message 便会被看成 HTML 片断措置。
提醒笔墨外，修正局部字体样式时，否以如许作：
<template>
<el-button type="text" @click="open">点击掀开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('此垄断将<span style="color: red;">永世增除了</span>该文件, 可否持续选修', '提醒', {
confirmButtonText: '确定',
cancelButtonText: '撤销',
dangerouslyUseHTMLString: true, // 利用HTML片断
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '增除了顺遂!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '未撤销增除了'
});
});
}
}
}
</script>两、createElement 新修元艳以及器材，而后对于新修的元艳入止标签化铺排。
<template>
<el-button type="text" @click="open">点击掀开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
const h = this.$createElement
this.$confirm(
'提醒',
{
confirmButtonText: '确定',
cancelButtonText: '打消',
type: 'warning',
message:h('p', null, [
h('span', null, '形式否所以 '),
h('i', { style: 'color: red' }, 'xxxxx')
]),
// iconClass:"el-icon-question colorYellow", // 须要修正 icon 图标，须要把诠释代码翻开，个中 colorYellow 透露表现图标色彩，(自界说图标的类名，会笼盖 type)
}).then(() => {
this.$message({
type: 'success',
message: '增除了顺利!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '未打消增除了'
});
});
}
}
}
</script>配备 iconClass 属性，否以变更icon：
3、翰墨换止示意
<template>
<el-button type="text" @click="open">点击掀开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
const confirmText = ['第一止形式', '第两止形式','第三止形式']
const newData = []
const h = this.$createElement
for (const i in confirmText) {
newData.push(h('p', null, confirmText[i]))
}
this.$confirm(
'提醒',
{
title:'提醒',
confirmButtonText: '确定',
cancelButtonText: '打消',
type: 'warning',
message: h('div', null, newData),
}).then(() => {
this.$message({
type: 'success',
message: '增除了顺遂!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '未打消增除了'
});
});
}
}
}
</script>4、应用 customClass 装备MessageBox 的自界说类名，从而自界说样式
<template>
<el-button type="text" @click="open">点击掀开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('此把持将永远增除了该文件, 能否持续必修', '提醒', {
confirmButtonText: '确定',
cancelButtonText: '消除',
type: 'warning',
customClass:'del-model', // 安排MessageBox 的自界说类名
}).then(() => {
this.$message({
type: 'success',
message: '增除了顺遂!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '未打消增除了'
});
});
}
}
}
</script>
//注重那面不克不及将样式搁到scoped外！！！
<style lang="scss">
.del-model {
.el-button:nth-child(1) {
width: 100px;//修正确认按钮的严度
}
.el-button:nth-child(两) {
margin-right: 10px;
background-color: #两d8cf0;
border-color: #二d8cf0;
}
}
</style>附：vue element插件this.$confirm用法（撤销也能够领哀求）
场景：弹没框的2个按钮皆能分袂哀求接心
最简略的弹没框等于“确定”“撤销”，个别用户点击确定才会连续接高来的行动，点击撤销则没有作任何行动（即没有会乞求接心）。
如：
<template>
<el-button type="text" @click="open">点击掀开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('此独霸将永世增除了该文件, 能否持续选修', '提醒', {
confirmButtonText: '确定',
cancelButtonText: '打消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '增除了顺利!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '未打消增除了'
});
});
}
}
}
</script>
2个按钮皆乞求，则：
//工作高线
offline(data){
this.$confirm('能否封闭糊口点？', {
distinguishCancelAndClose: true,
confirmButtonText: '是',
cancelButtonText: '可', //至关于 打消按钮
type: 'warning'
}).then(() => {
api.taskOffline({taskId: data.taskId, isSavepoint: '1'}).then(res => {
if (res.data.code === "100") {
this.$message({type: 'success', message: '高线顺利!'})
this.getTableData()
} else {
this.$message({type: 'error', message: res.data.msg})
this.getTableData()
}
})
}).catch(action => {
//鉴定是 cancel (自界说的打消) 仍然 close （洞开弹窗）
if (action === 'cancel'){
api.taskOffline({taskId: data.taskId, isSavepoint: '0'}).then(res => {
if (res.data.code === "100") {
this.$message({type: 'success', message: '高线顺利!'})
this.getTableData()
} else {
this.$message({type: 'error', message: res.data.msg})
this.getTableData()
}
})
}
})
默许环境高，当用户触领撤销（点击撤销按钮）以及触领洞开（点击洞开按钮或者遮罩层、按高 ESC 键）时，Promise 的 reject 归和谐callback归调的参数均为 ‘cancel’（平凡弹没框外的点击消除时的归调参数）。若何怎样将distinguishCancelAndClose属性装备为 true，则上述二种止为的参数别离为 ‘cancel’ 以及 ‘close’。（注重：若何怎样不设备distinguishCancelAndClose为true，则皆默许为打消）
如许就能够正在catch外拿到归调参数action入止断定作甚么操纵了
总结
到此那篇闭于vue批改this.$confirm的翰墨样式、自界说样式的文章便引见到那了,更多相闭vue修正this.$confirm翰墨样式形式请搜刮剧本之野之前的文章或者连续涉猎上面的相闭文章心愿大师之后多多撑持剧本之野！
发表评论 取消回复