vue3使用el-tooltip插槽達到換行效果
更新時間：2023年08月31日 15:41:14 作者：燕哥學前端
本文主要介紹了vue3使用el-tooltip插槽達到換行效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
el-tooltip的content屬性中的內(nèi)容可以使用插槽來替換
話不多說，直接上代碼
<el-tooltip effect="light" placement="top-start">
<div slot="content" class="tips"> // 在這里運用插槽
<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; // 設置一個最大寬度
white-space: pre-wrap; // 超出這個寬度就直接換行
}
</style>最后放上效果對比圖，如果覺得有幫到你，可以給我一個贊嗎??沒換行前的效果
換行后的效果
到此這篇關于vue3使用el-tooltip插槽達到換行效果的文章就介紹到這了,更多相關vue3 el-tooltip插槽換行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇vue 解決form表單提交但不跳轉頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue實例的對象參數(shù)options的幾個常用選項詳解
今天小編就為大家分享一篇Vue實例的對象參數(shù)options的幾個常用選項詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
使用vue-router與v-if實現(xiàn)tab切換遇到的問題及解決方法
這篇文章主要介紹了vue-router與v-if實現(xiàn)tab切換的思考,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了詳解vue 組件的相關知識，文中講解非常細致，代碼供大家參考學習，感興趣的朋友可以了解下2020-06-06
這篇文章主要介紹了vue屬性props默認類型的寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
最近工作中遇到個需求,需要實現(xiàn)個可視化圖表頁的PDF文件導出,所以下面這篇文章主要給大家介紹了關于利用vue如何將html頁面生成高清晰pdf文件的相關資料,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖形驗證碼登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
根據(jù)登錄的角色不一樣,實現(xiàn)不同的路由展示，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2024-04-04
本文主要介紹了vue實現(xiàn)excel表格的導入導出的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
今天小編就為大家分享一篇vue遍歷生成的輸入框 綁定及修改值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10