我要评论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
}
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论