Vue.js使用this.$confirm换行显示提示信息
在写一个简单的按钮点击确认框信息的时候，发现换行不能用n。用了发现也是字符串的输出形式
去查了下发现需要使用$createElement来创建
这里我需要显示两行信息。
代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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，如：
1 | h('i', { class: 'el-icon-question' }) |
- 如果写成下面的，则可以定义props。（以element的弹出框el-tooltip为例）
1 2 3 4 5 6 | h('el-tooltip',{props:{ content: (function() { return '弹出信息' })(), placement: 'top' }}) |
- 包含关系用
h('div',[...])，如div中包含两个p标签：（可以继续嵌套）
1 2 3 4 | 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
1 | let _this = this |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | const _this = thisthis.$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 }}) |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
