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>

总结

作者:祈蹊原文地址:https://blog.csdn.net/weixin_43562107/article/details/104942320

%s 个评论

要回复文章请先登录注册