vue修改this.$confirm的文字样式、自定义样式代码实例
更新时间：2024年02月22日 10:31:19 作者：金乌Y
this.$confirm是一个 Vue.js 中的弹窗组件,其样式可以通过 CSS 进行自定义,下面这篇文章主要给大家介绍了关于vue修改this.$confirm的文字样式、自定义样式的相关资料,需要的朋友可以参考下
通常使用 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>
但偶尔也需要修改文字等样式，这时该怎么做呢？
一、 将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：
三、文字换行显示
<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>四、使用 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(2) {
margin-right: 10px;
background-color: #2d8cf0;
border-color: #2d8cf0;
}
}
</style>附：vue element插件this.$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>
两个按钮都请求，则：
//任务下线
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文字样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
el-table表头根据内容自适应完美解决表头错位和固定列错位
这篇文章主要介绍了el-table表头根据内容自适应完美解决表头错位和固定列错位,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了Vue ECharts设置主题，本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue2.0 常用的 UI 库实例讲解，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了vue 实现锚点功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了vue-cropper插件实现图片截取上传组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要为大家详细介绍了vue实现简单数据双向绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
本文主要介绍了vue基于el-table拓展之table-plus组件，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue3中使用swiper及遇到的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue elementui 搜索栏子组件封装,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue如何实现左右滑动tab(vue-touch)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论