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

目录

• vant框架van-cell插槽无法换行
• 解决方法
• 小程序 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 属性 默认是右对齐，这时候我们只想显示信息的时候就可以运用父元素用右对齐，子元素用行内块元素，然后左对齐

/* 解决多行能出现向左对齐的情况 */.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>
    

总结

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

• 全局引入vant后使用Toast的问题及解决
• 使用Vant框架list组件遇到的坑及解决
• vant-ui框架的一个bug(解决切换后onload不触发)

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！