快捷導(dǎo)航

vant框架van-cell插槽無(wú)法換行問題及解決

更新時(shí)間：2023年01月18日 10:49:58 作者：祈蹊

這篇文章主要介紹了vant框架van-cell插槽無(wú)法換行問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vant框架van-cell插槽無(wú)法換行

解決方法

在插槽中定義div的屬性display為block;再在里面定義一個(gè)塊級(jí)標(biāo)簽就行了。

<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 換行能左對(duì)齊問題

van-cell 的value 屬性默認(rèn)是右對(duì)齊，這時(shí)候我們只想顯示信息的時(shí)候就可以運(yùn)用父元素用右對(duì)齊，子元素用行內(nèi)塊元素，然后左對(duì)齊

/* 解決多行能出現(xiàn)向左對(duì)齊的情況 */
.van-cell__value>text{
    display: inline-block;
    text-align: left;
    word-break: break-all; //換行能顯示全部字符
}

  <van-cell title="活動(dòng)標(biāo)題" title-width="7em">
          <text>{{mainData.title}}</text>
        </van-cell>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue.js 中 ref 和 reactive 的區(qū)別及用法解析
在Vue.js中,ref主要用于創(chuàng)建響應(yīng)式的引用,通過(guò).value屬性來(lái)訪問和修改值,特別適用于需要頻繁更改整個(gè)值的場(chǎng)景,而reactive則用于創(chuàng)建深度響應(yīng)的對(duì)象或數(shù)組,本文給大家介紹Vue.js 中 ref 和 reactive 的區(qū)別及用法,感興趣的朋友跟隨小編一起看看吧
2024-09-09
vue3中如何使用dayjs
這篇文章主要介紹了vue3中如何使用dayjs問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue+j簡(jiǎn)單的實(shí)現(xiàn)輪播效果,滾動(dòng)公告,銜接
這篇文章主要介紹了vue+j簡(jiǎn)單的實(shí)現(xiàn)輪播效果,滾動(dòng)公告,銜接,文章圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-06-06
Vue中router-link如何添加mouseover提示
這篇文章主要介紹了Vue中router-link如何添加mouseover提示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-11-11
教你使用vue-cli快速構(gòu)建的小說(shuō)閱讀器
這篇文章主要介紹了vue-cli構(gòu)建的小說(shuō)閱讀器，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
vue使用Highcharts實(shí)現(xiàn)不同高度的3D環(huán)形圖
這篇文章主要為大家詳細(xì)介紹了vue使用Highcharts實(shí)現(xiàn)不同高度的3D環(huán)形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue快速入門基礎(chǔ)知識(shí)教程
VUE是一套前端框架，免除了原生JavaScript中的DOM操作，簡(jiǎn)化書寫。VUE基于MVVM（Model-View_ViewModel）思想，實(shí)現(xiàn)數(shù)據(jù)雙向綁定。Vue的核心庫(kù)只關(guān)注圖層.響應(yīng)式數(shù)據(jù)綁定和組件化開發(fā)是其兩大特點(diǎn)。
2023-01-01
前端文件導(dǎo)出設(shè)置responseType為blob時(shí)遇到的問題及解決
這篇文章主要給大家介紹了關(guān)于前端文件導(dǎo)出設(shè)置responseType為blob時(shí)遇到的問題及解決方法,文中通過(guò)圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-09-09
vue使用混入定義全局變量、函數(shù)、篩選器的實(shí)例代碼
本文主要是給大家分享利用混入mixins來(lái)實(shí)現(xiàn)全局變量和函數(shù)。這種方法優(yōu)點(diǎn)是ide會(huì)有方法、變量、篩選器提示。對(duì)vue中利用混入定義全局變量、函數(shù)、篩選器的相關(guān)知識(shí)感興趣的朋友，跟隨小編一起看看吧
2019-07-07
vue2路由中router-view不顯示的原因及踩坑記錄
這篇文章主要介紹了vue2路由中router-view不顯示的原因及踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04