vue3使用el-tooltip插槽達(dá)到換行效果
更新時(shí)間：2023年08月31日 15:41:14 作者：燕哥學(xué)前端
本文主要介紹了vue3使用el-tooltip插槽達(dá)到換行效果,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
el-tooltip的content屬性中的內(nèi)容可以使用插槽來替換
話不多說，直接上代碼
<el-tooltip effect="light" placement="top-start">
<div slot="content" class="tips"> // 在這里運(yùn)用插槽
<p class="tip-text">
我是頁面中展示的內(nèi)容
</p>
</div>
<template #content> // 這里是插槽中的內(nèi)容
<p class="content">
我是tooltip中的內(nèi)容 我是tooltip中的內(nèi)容 我是tooltip中的內(nèi)容 我是tooltip中的內(nèi)容 我是tooltip中的內(nèi)容
我是tooltip中的內(nèi)容 我是tooltip中的內(nèi)容 我是tooltip中的內(nèi)容 我是tooltip中的內(nèi)容 我是tooltip中的內(nèi)容
</p>
</template>
</el-tooltip>
<style>
.content {
max-width: 200px; // 設(shè)置一個(gè)最大寬度
white-space: pre-wrap; // 超出這個(gè)寬度就直接換行
}
</style>最后放上效果對比圖，如果覺得有幫到你，可以給我一個(gè)贊嗎??沒換行前的效果
換行后的效果
到此這篇關(guān)于vue3使用el-tooltip插槽達(dá)到換行效果的文章就介紹到這了,更多相關(guān)vue3 el-tooltip插槽換行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何在Vue單頁面中進(jìn)行業(yè)務(wù)數(shù)據(jù)的上報(bào)
為什么要在標(biāo)題里加上一個(gè)業(yè)務(wù)數(shù)據(jù)的上報(bào)呢，因?yàn)樵谠蹅兦岸隧?xiàng)目中，可上報(bào)的數(shù)據(jù)維度太多，比如還有性能數(shù)據(jù)、頁面錯誤數(shù)據(jù)、console捕獲等。這里我們只講解業(yè)務(wù)數(shù)據(jù)的埋點(diǎn)。2021-05-05
Vue中 Runtime + Compiler 和 Runtime-o
這篇文章主要介紹了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式含義和區(qū)別,結(jié)合實(shí)例形式詳細(xì)分析了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式基本功能、原理、區(qū)別與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue3?hook自動導(dǎo)入的原理,介紹了API的自動導(dǎo)入及組件的自動導(dǎo)入，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了在Vue項(xiàng)目中是否使用store原理深究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue開發(fā)過程中遇到的疑惑知識點(diǎn)總結(jié)
vue是法語中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫，同時(shí)擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開發(fā)過程中遇到的疑惑知識點(diǎn),有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
本篇文章主要介紹了Vue.js -- 過濾器使用總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
vue-video-player 斷點(diǎn)續(xù)播的實(shí)現(xiàn)
這篇文章主要介紹了vue-video-player 斷點(diǎn)續(xù)播的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
前端XSS攻擊場景詳解與Vue.js處理XSS的方法(vue-xss)
這篇文章主要給大家介紹了關(guān)于前端XSS攻擊場景與Vue.js使用vue-xss處理XSS的方法,介紹了實(shí)際工作中渲染數(shù)據(jù)時(shí)遇到XSS攻擊時(shí)的防范措施,以及解決方案,需要的朋友可以參考下2024-02-02
vue中在echarts里設(shè)置的定時(shí)器清除不掉問題及解決
這篇文章主要介紹了vue中在echarts里設(shè)置的定時(shí)器清除不掉問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue精簡版風(fēng)格指南的相關(guān)資料，包括組件名稱，指令及特征,需要的朋友可以參考下2018-01-01