目录vant框架van-cell插槽无法换行解决方法小程序 van-cell 换行能左对齐问题总结vant框架van-cell插槽无法换行 解决方法 在插槽中定义div的属性disp
在插槽中定义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; //换行能显示全部字符
}
<van-cell title="活动标题" title-width="7em">
<text>{{mainData.title}}</text>
</van-cell>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vant框架van-cell插槽无法换行问题及解决
本文链接: https://lsjlt.com/news/178095.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0