脚本宝典收集整理的这篇文章主要介绍了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 的value 属性 默认是右对齐,这时候我们只想显示信息的时候就可以运用父元素用右对齐,子元素用行内块元素,然后左对齐
/* 解决多行能出现向左对齐的情况 */ .van-cell__value>text{ display: inline-block; text-align: left; word-break: break-all; //换行能显示全部字符 }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的vant框架van-cell插槽无法换行问题及解决全部内容,希望文章能够帮你解决vant框架van-cell插槽无法换行问题及解决所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。