Vue.js使用this.$confirm换行显示提示信息实例

一品毛尖

Vue.js使用this.$confirm换行显示提示信息

在写一个简单的按钮点击确认框信息的时候，发现换行不能用\n。用了< br>发现也是字符串的输出形式
去查了下发现需要使用$createElement来创建
这里我需要显示两行信息。
代码如下：

1. creatNew(){
   
2. const h = this.$createElement
   
3.         this.$confirm('提示', {
   
4.           title: '提示',
   
5.           message: h('div', [
   
6.             h('p', '新建会导致之前设置失效'),
   
7.             h('p', '是否继续新建？')
   
8.           ]),
   
9.           confirmButtonText: '确定',
   
10.           cancelButtonText: '取消'
    
11.         }).then(() => {
    
12.         ....//调用新建方法
    
13.         }).catch(()=>({}))//不要忘记catch
    
14.         //最后可以.finally(()=>({}))
    
15.         }

复制代码

解释

• 1. h('div')

  复制代码
  就表示创建一个div标签，
  
• 如果写成
  1. h('div',{class:'...'})

  复制代码
  就可以定义class，如：
  

1. h('i', { class: 'el-icon-question' })

复制代码

• 如果写成下面的，则可以定义props。（以element的弹出框el-tooltip为例）
  

1. h('el-tooltip',{props:{
   
2.                                         content: (function() {
   
3.                           return '弹出信息'
   
4.                           })(),
   
5.                         placement: 'top'
   
6.                         }})

复制代码

• 包含关系用
  1. h('div',[...])

  复制代码
  ，如div中包含两个p标签：（可以继续嵌套）
  

1. h('div', [
   
2.             h('p', '第一个p'),
   
3.             h('p', '第二个p')
   
4.           ])

复制代码

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.                         const _this = this
   
2.             this.$confirm({
   
3.               title: '當前郵件正文内容爲空',
   
4.               content: h => <div style="color:red;">確認是否發佈?</div>,
   
5.               onOk () {
   
6.                 console.log('保存提交的对象', this.objData)
   
7.                 _this.loading = true
   
8.                 initAxios.saveMail(_this.objData).then((res) => {
   
9.                   _this.loading = false
   
10.                   if (res.data.code === '200' && res.data.result) {
    
11.                     _this.$router.go(-1) // 处理返回需要点两次的问题
    
12.                     _this.$message.success('發佈成功！')
    
13.                   }
    
14.                 })
    
15.               },
    
16.               onCancel () {
    
17.                 return false
    
18.               }
    
19.             })

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/328924fdz.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！