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 属性 默认是右对齐,这时候我们只想显示信息的时候就可以运用父元素用右对齐,子元素用行内块元素,然后左对齐

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

总结

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

相关文章

  • 在vue+element-plus中无法同时使用v-for和v-if的问题及解决方法

    在vue+element-plus中无法同时使用v-for和v-if的问题及解决方法

    由于路由中存在不需要遍历的数据所以像用v-if来过滤,但是报错,百度说vue不能同时使用v-if和v-for,今天小编给大家分享解决方式,感兴趣的朋友跟随小编一起看看吧
    2023-07-07
  • Vue实现input宽度随文字长度自适应操作

    Vue实现input宽度随文字长度自适应操作

    这篇文章主要介绍了Vue实现input宽度随文字长度自适应操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue.js中computed的基本使用方法

    Vue.js中computed的基本使用方法

    Vue.js中,computed属性根据依赖进行缓存,只有依赖改变时才重新计算,这样有效提高性能,computed属性是响应式的,可以自动更新,并且默认是只读的,它与methods的主要区别在于计算属性具有缓存性,而方法每次调用都会执行,使用computed可以使模板更加简洁,提高应用性能
    2024-09-09
  • vue.js获取数据库数据实例代码

    vue.js获取数据库数据实例代码

    本篇文章主要介绍了vue.js获取数据库数据实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 基于Vuejs和Element的注册插件的编写方法

    基于Vuejs和Element的注册插件的编写方法

    这篇文章主要介绍了基于Vuejs和Element的注册插件的编写方法,需要的朋友可以参考下
    2017-07-07
  • Vue.js如何实现路由懒加载浅析

    Vue.js如何实现路由懒加载浅析

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要懒加载的功能,发现网上这方面的资料较少,所以下面这篇文章主要给大家介绍了关于Vue.js如何实现路由懒加载的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • vue图片加载与显示默认图片实例代码

    vue图片加载与显示默认图片实例代码

    这篇文章主要为大家详细介绍了vue图片加载与显示默认图片的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Vue2.X和Vue3.0数据响应原理变化的区别

    Vue2.X和Vue3.0数据响应原理变化的区别

    这篇文章主要介绍了Vue2.X和Vue3.0数据响应原理变化的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Element-ui的table中使用fixed后出现行混乱情况的解决

    Element-ui的table中使用fixed后出现行混乱情况的解决

    这篇文章主要介绍了Element-ui的table中使用fixed后出现行混乱情况的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue-router使用next()跳转到指定路径时会无限循环问题

    vue-router使用next()跳转到指定路径时会无限循环问题

    这篇文章主要介绍了vue-router使用next()跳转到指定路径时会无限循环问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论