快捷導(dǎo)航

Vue.js使用this.$confirm換行顯示提示信息實例

更新時間：2024年10月17日 10:05:41 作者：EruruI

在編寫Web應(yīng)用時,實現(xiàn)多行文本顯示通常需要用到HTML標(biāo)簽或JavaScript特定函數(shù),本文介紹了如何使用JavaScript的$createElement函數(shù)來創(chuàng)建多行文本顯示,$createElement可以創(chuàng)建任何HTML標(biāo)簽,使得在JavaScript中控制HTML輸出更加靈活,通過簡單的代碼示例

Vue.js使用this.$confirm換行顯示提示信息

在寫一個簡單的按鈕點擊確認框信息的時候，發(fā)現(xiàn)換行不能用\n。用了< br>發(fā)現(xiàn)也是字符串的輸出形式

去查了下發(fā)現(xiàn)需要使用$createElement來創(chuàng)建

這里我需要顯示兩行信息。

代碼如下：

creatNew(){
 const h = this.$createElement
        this.$confirm('提示', {
          title: '提示',
          message: h('div', [
            h('p', '新建會導(dǎo)致之前設(shè)置失效'),
            h('p', '是否繼續(xù)新建？')
          ]),
          confirmButtonText: '確定',
          cancelButtonText: '取消'
        }).then(() => {
        ....//調(diào)用新建方法
        }).catch(()=>({}))//不要忘記catch
        //最后可以.finally(()=>({}))
        }

解釋

h('div')就表示創(chuàng)建一個div標(biāo)簽，
如果寫成h('div',{class:'...'})就可以定義class，如：

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

如果寫成下面的，則可以定義props。（以element的彈出框el-tooltip為例）

h('el-tooltip',{props:{
					content: (function() {
                  	return '彈出信息'
                  	})(),
                	placement: 'top'
                	}})

包含關(guān)系用h('div',[...])，如div中包含兩個p標(biāo)簽：（可以繼續(xù)嵌套）

h('div', [
            h('p', '第一個p'),
            h('p', '第二個p')
          ])

Vue的this.$confirm中注意this的指向

Vue開發(fā)過程中遇到this. confirm( )里面的this失效問題，就是當(dāng)你想在里面使用data數(shù)據(jù)的時候，我們往往是 this.dataName這種方式拿到值，但在 this.confirm()里面的this失效問題，就是當(dāng)你想在里面使用data數(shù)據(jù)的時候，我們往往是this.dataName這種方式拿到值，但在this. confirm()里面的this失效問題，就是當(dāng)你想在里面使用data數(shù)據(jù)的時候，我們往往是this.dataName這種方式拿到值，但在this.confirm()里面的this不是指向當(dāng)前vue了，所以是取不到data的數(shù)據(jù)。

解決方法

因此我們在使用this.$confirm()前先保存this

let _this = this

			const _this = this
            this.$confirm({
              title: '當(dāng)前郵件正文內(nèi)容爲(wèi)空',
              content: h => <div style="color:red;">確認是否發(fā)佈?</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('發(fā)佈成功！')
                  }
                })
              },
              onCancel () {
                return false
              }
            })