vant框架van-cell插槽無法換行問題及解決
更新時間:2023年01月18日 10:49:58 作者:祈蹊
這篇文章主要介紹了vant框架van-cell插槽無法換行問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
vant框架van-cell插槽無法換行
解決方法
在插槽中定義div的屬性display為block;再在里面定義一個塊級標簽就行了。
<template> <div> <van-cell-group v-for="item in list" :key="item.index"> <van-list v-bind="item" > <div style="width: 100%;"> <van-cell :title="item.name"> <template slot="label"> <span>{{item.sex}}</span> <div style="display:block;"> <span style="display:block;">{{item.age}}</span> </div> </template> </van-cell> </div> </van-list> </van-cell-group> </div> </template> <script> export default { data() { return { list:[ { name:"張三", sex:"男", age:15 }, { name:"李四", sex:"男", age:16 } ] } } } </script> <style> </style>
效果如下:
小程序 van-cell 換行能左對齊問題
van-cell 的value 屬性 默認是右對齊,這時候我們只想顯示信息的時候就可以運用父元素用右對齊,子元素用行內(nèi)塊元素,然后左對齊
/* 解決多行能出現(xiàn)向左對齊的情況 */ .van-cell__value>text{ display: inline-block; text-align: left; word-break: break-all; //換行能顯示全部字符 }
<van-cell title="活動標題" title-width="7em"> <text>{{mainData.title}}</text> </van-cell>
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
在vue+element-plus中無法同時使用v-for和v-if的問題及解決方法
由于路由中存在不需要遍歷的數(shù)據(jù)所以像用v-if來過濾,但是報錯,百度說vue不能同時使用v-if和v-for,今天小編給大家分享解決方式,感興趣的朋友跟隨小編一起看看吧2023-07-07vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼
本篇文章主要介紹了vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05Vue2.X和Vue3.0數(shù)據(jù)響應原理變化的區(qū)別
這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應原理變化的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11Element-ui的table中使用fixed后出現(xiàn)行混亂情況的解決
這篇文章主要介紹了Element-ui的table中使用fixed后出現(xiàn)行混亂情況的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue-router使用next()跳轉(zhuǎn)到指定路徑時會無限循環(huán)問題
這篇文章主要介紹了vue-router使用next()跳轉(zhuǎn)到指定路徑時會無限循環(huán)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11