vue Tooltip提示動(dòng)態(tài)換行問(wèn)題
Vue Tooltip提示動(dòng)態(tài)換行
在項(xiàng)目中遇到一個(gè)需求，通過(guò)接口獲取到的接口數(shù)據(jù)名稱比較長(zhǎng)，提交加一個(gè)title來(lái)全部顯示出來(lái)，因?yàn)橛玫氖窃臉?biāo)簽，所以直接在li中加了一個(gè)title,但是遇到的問(wèn)題就是title不能換行，于是改變策略，我就引用了element的tooltip
element的tooltip
通過(guò)按鈕引入組件，避免項(xiàng)目文件太大，還有不會(huì)的小伙伴嗎？直接去官網(wǎng)看一下吧！element-Tooltip：
下面進(jìn)入正題
//這是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 是你后臺(tái)獲取過(guò)來(lái)的數(shù)組，進(jìn)行遍歷
? ? ? for(var i of this.newNameList){
? ? ? ?? ?//判斷每項(xiàng)的長(zhǎng)度，這個(gè)15，你們可以自己設(shè)置，也可以動(dòng)態(tài)設(shè)置
? ? ? ? if(i.name.length > 15){
? ? ? ? ?? ?//通過(guò)match方法在字符串內(nèi)檢索指定的值,然后進(jìn)行匹配，里面的20，就是你想間隔的字符位數(shù)，至于這里為什么用br,那是因?yàn)関-html,只能解析br,解析不了 \n，
? ? ? ? ? i.name = i.name.match(/.{1,20}/g).join("<br />")
? ? ? ? } else {
? ? ? ? ? i.name = i.name
? ? ? ? }
? ? ? }
? ? },這個(gè)方法親測(cè)有效。
使用this.$confirm換行顯示提示信息
在寫一個(gè)簡(jiǎn)單的按鈕點(diǎn)擊確認(rèn)框信息的時(shí)候，發(fā)現(xiàn)換行不能用\n。用了< br>發(fā)現(xiàn)也是字符串的輸出形式
去查了下發(fā)現(xiàn)需要使用$createElement來(lái)創(chuàng)建
這里我需要顯示兩行信息。代碼如下
creatNew(){
?const h = this.$createElement
? ? ? ? this.$confirm('提示', {
? ? ? ? ? title: '提示',
? ? ? ? ? message: h('div', [
? ? ? ? ? ? h('p', '新建會(huì)導(dǎo)致之前設(shè)置失效'),
? ? ? ? ? ? h('p', '是否繼續(xù)新建？')
? ? ? ? ? ]),
? ? ? ? ? confirmButtonText: '確定',
? ? ? ? ? cancelButtonText: '取消'
? ? ? ? }).then(() => {
? ? ? ? ....//調(diào)用新建方法
? ? ? ? }).catch(()=>({}))//不要忘記catch
? ? ? ? //最后可以.finally(()=>({}))
? ? ? ? }解釋：
h('div')就表示創(chuàng)建一個(gè)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中包含兩個(gè)p標(biāo)簽：（可以繼續(xù)嵌套）
h('div', [
? ? ? ? ? ? h('p', '第一個(gè)p'),
? ? ? ? ? ? h('p', '第二個(gè)p')
? ? ? ? ? ])簡(jiǎn)單介紹到這里。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
iview table高度動(dòng)態(tài)設(shè)置方法
下面小編就為大家分享一篇iview table高度動(dòng)態(tài)設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue3中使用reactive時(shí),后端有返回?cái)?shù)據(jù)但dom沒(méi)有更新的解決
這篇文章主要介紹了Vue3中使用reactive時(shí),后端有返回?cái)?shù)據(jù)但dom沒(méi)有更新的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖
這篇文章主要為大家詳細(xì)介紹了基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
element的el-tree多選樹(shù)(復(fù)選框)父子節(jié)點(diǎn)關(guān)聯(lián)不關(guān)聯(lián)
最近想要實(shí)現(xiàn)多選框關(guān)聯(lián)的功能，但是卻出現(xiàn)了element的el-tree多選樹(shù)(復(fù)選框)父子節(jié)點(diǎn)關(guān)聯(lián)不關(guān)聯(lián)的問(wèn)題，本文就來(lái)介紹一下解決方法，一起來(lái)了解一下2021-05-05
這篇文章主要介紹了Vue使用Proxy代理后仍無(wú)法生效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
markRaw是將一個(gè)對(duì)象標(biāo)記為普通對(duì)象,而toRaw是將reactive對(duì)象變?yōu)槠胀▽?duì)象,在 Vue 3 中,markRaw 是一個(gè)用于告訴 Vue 的響應(yīng)性系統(tǒng)不要對(duì)某個(gè)對(duì)象進(jìn)行轉(zhuǎn)換或追蹤其響應(yīng)性的函數(shù),下面給大家介紹vue3中markRaw詳解,感興趣的朋友一起看看吧2024-04-04
vue.js中引入vuex儲(chǔ)存接口數(shù)據(jù)及調(diào)用的詳細(xì)流程
這篇文章主要給大家介紹了關(guān)于在vue.js中引入vuex儲(chǔ)存接口數(shù)據(jù)及調(diào)用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要介紹了vue-cli4打包靜態(tài)資源到指定目錄方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
如何解決ECharts圖表切換后縮成一團(tuán)的問(wèn)題
這篇文章主要介紹了如何解決ECharts圖表切換后縮成一團(tuán)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式(超詳細(xì)整理)
這篇文章給大家詳細(xì)的整理了Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式,使用vue-router,聲明式-router-link,編程式這三種方法,分別有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09