vue Tooltip提示動態(tài)換行問題
Vue Tooltip提示動態(tài)換行
在項目中遇到一個需求,通過接口獲取到的接口數(shù)據(jù)名稱比較長,提交加一個title來全部顯示出來,因為用的是原生的標簽,所以直接在li中加了一個title,但是遇到的問題就是title不能換行,于是改變策略,我就引用了element的tooltip
element的tooltip
通過按鈕引入組件,避免項目文件太大,還有不會的小伙伴嗎?直接去官網(wǎng)看一下吧!element-Tooltip:
下面進入正題
//這是hmtl <li style="width: 55%" v-if="item.name.length>15"> ? ?<el-tooltip placement="top"> ? ?//敲黑板了啊!注意這里,原生就用v-html解析 ? ? ?<div slot="content" ?v-html="item.name"></div>? ? ? ?<span>{{ item.name.substring(0,15)+'...' ?}}</span> ? ?</el-tooltip> ?</li> //這是方法 ?? ?ProcessNewline(){ ?? ??? ?//this.newNameList 是你后臺獲取過來的數(shù)組,進行遍歷 ? ? ? for(var i of this.newNameList){ ? ? ? ?? ?//判斷每項的長度,這個15,你們可以自己設(shè)置,也可以動態(tài)設(shè)置 ? ? ? ? if(i.name.length > 15){ ? ? ? ? ?? ?//通過match方法在字符串內(nèi)檢索指定的值,然后進行匹配,里面的20,就是你想間隔的字符位數(shù),至于這里為什么用br,那是因為v-html,只能解析br,解析不了 \n, ? ? ? ? ? i.name = i.name.match(/.{1,20}/g).join("<br />") ? ? ? ? } else { ? ? ? ? ? i.name = i.name ? ? ? ? } ? ? ? } ? ? },
這個方法親測有效。
使用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標簽,
如果寫成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標簽:(可以繼續(xù)嵌套)
h('div', [ ? ? ? ? ? ? h('p', '第一個p'), ? ? ? ? ? ? h('p', '第二個p') ? ? ? ? ? ])
簡單介紹到這里。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue?動態(tài)路由component?傳遞變量報錯問題解決
這篇文章主要為大家介紹了vue?動態(tài)路由component?傳遞變量報錯問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05vue2.0+vuex+localStorage代辦事項應(yīng)用實現(xiàn)詳解
本篇文章給大家分享了一個用vue2.0+vuex+localStorage代辦事項應(yīng)用實現(xiàn)的代碼過程,有興趣的朋友跟著參考學(xué)習(xí)下。2018-05-05vue el-form一行里面放置多個el-form-item的實現(xiàn)
本文主要介紹了vue el-form一行里面放置多個el-form-item的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08vue優(yōu)化之優(yōu)雅的拋出錯誤(Error)問題
這篇文章主要介紹了vue優(yōu)化之優(yōu)雅的拋出錯誤(Error)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue大文件分片上傳之simple-uploader.js的使用
本文主要介紹了vue大文件分片上傳之simple-uploader.js的使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05iview table render集成switch開關(guān)的實例
下面小編就為大家分享一篇iview table render集成switch開關(guān)的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03