Vue.js使用this.$confirm换行显示提示信息实例
作者：EruruI
在编写Web应用时,实现多行文本显示通常需要用到HTML标签或JavaScript特定函数,本文介绍了如何使用JavaScript的$createElement函数来创建多行文本显示,$createElement可以创建任何HTML标签,使得在JavaScript中控制HTML输出更加灵活,通过简单的代码示例
Vue.js使用this.$confirm换行显示提示信息
在写一个简单的按钮点击确认框信息的时候，发现换行不能用\n。用了< br>发现也是字符串的输出形式
去查了下发现需要使用$createElement来创建
这里我需要显示两行信息。
代码如下：
creatNew(){
const h = this.$createElement
this.$confirm('提示', {
title: '提示',
message: h('div', [
h('p', '新建会导致之前设置失效'),
h('p', '是否继续新建？')
]),
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() => {
....//调用新建方法
}).catch(()=>({}))//不要忘记catch
//最后可以.finally(()=>({}))
}解释
h('div')就表示创建一个div标签，- 如果写成
h('div',{class:'...'})就可以定义class，如：
h('i', { class: 'el-icon-question' })- 如果写成下面的，则可以定义props。（以element的弹出框el-tooltip为例）
h('el-tooltip',{props:{
content: (function() {
return '弹出信息'
})(),
placement: 'top'
}})- 包含关系用
h('div',[...])，如div中包含两个p标签：（可以继续嵌套）
h('div', [
h('p', '第一个p'),
h('p', '第二个p')
])Vue的this.$confirm中注意this的指向
Vue开发过程中遇到this. confirm( )里面的this失效问题，就是当你想在里面使用data数据的时候，我们往往是 this.dataName这种方式拿到值，但在 this.confirm()里面的this失效问题，就是当你想在里面使用data数据的时候，我们往往是this.dataName这种方式拿到值，但在this. confirm()里面的this失效问题，就是当你想在里面使用data数据的时候，我们往往是this.dataName这种方式拿到值，但在this.confirm()里面的this不是指向当前vue了，所以是取不到data的数据。
解决方法
因此我们在使用this.$confirm()前先保存this
let _this = this
const _this = this
this.$confirm({
title: '當前郵件正文内容爲空',
content: h => <div style="color:red;">確認是否發佈?</div>,
onOk () {
console.log('保存提交的对象', this.objData)
_this.loading = true
initAxios.saveMail(_this.objData).then((res) => {
_this.loading = false
if (res.data.code === '200' && res.data.result) {
_this.$router.go(-1) // 处理返回需要点两次的问题
_this.$message.success('發佈成功！')
}
})
},
onCancel () {
return false
}
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。