vant框架van-cell插槽无法换行问题及解决
作者：祈蹊
这篇文章主要介绍了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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。