vant框架van-cell插槽无法换行问题及解决

目录 vant框架van-cell插槽无法换行 解决方法 小程序 van-cell 换行能左对齐问题 总结

vant框架van-cell 插槽 无法换行

解决方法

在插槽中定义div的属性dis play 为block;再在里面定义一个块级标签就行了。

<template>
<div>
    <van-cell-group v-for=" IT em in list" :key="item.index">
         <van-list v-bind="item" >
              <div style="width: 100%;">
                  <van-cell :title="item.n am e">
                   <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 换行能左对齐问题

&nbs p; van-cell 的value 属性 默认是右对齐，这时候我们只想显示信息的时候就可以运用父元素用右对齐，子元素用行内块元素，然后左对齐

/* 解决多行能出现向左对齐的情况 */
.van-cell__value>text{
    display: inline-block;
    text-align: left;
    word- br eak: break-all; //换行能显示全部字符
}

  <van-cell title=" 活动 标题" title-width="7em">
          <text>{{m ai nData.title}}</text>
        </van-cell>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的 文章 : 全局引入vant后使用Toast的问题及解决 使用Vant框架list组件遇到的坑及解决 vant-ui框架的一个bug(解决切换后onload不触发)

总结

以上是 为你收集整理的 vant框架van-cell插槽无法换行问题及解决 全部内容，希望文章能够帮你解决 vant框架van-cell插槽无法换行问题及解决 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vant框架van-cell插槽无法换行问题及解决的详细内容...