欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年01月18日 10:49:58   作者：祈蹊  
這篇文章主要介紹了vant框架van-cell插槽無法換行問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vant框架van-cell插槽無法換行

解決方法

在插槽中定義div的屬性display為block;再在里面定義一個塊級標(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 換行能左對齊問題

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

/* 解決多行能出現(xiàn)向左對齊的情況 */
.van-cell__value>text{
    display: inline-block;
    text-align: left;
    word-break: break-all; //換行能顯示全部字符
}
  <van-cell title="活動標(biāo)題" title-width="7em">
          <text>{{mainData.title}}</text>
        </van-cell>

總結(jié)

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

相關(guān)文章

最新評論