返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vant框架van-cell插槽无法换行问题及解决
  • 181
分享到

vant框架van-cell插槽无法换行问题及解决

vantvan-cell插槽van-cell插槽无法换行vantvan-cell 2023-01-18 12:01:51 181人浏览 八月长安
摘要

目录vant框架van-cell插槽无法换行解决方法小程序 van-cell 换行能左对齐问题总结vant框架van-cell插槽无法换行 解决方法 在插槽中定义div的属性disp

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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vant框架van-cell插槽无法换行问题及解决

本文链接: https://lsjlt.com/news/178095.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作