在vant 中使用cell组件 定义图标该图片和位置操作

 更新时间:2020年11月02日 14:37:24   作者:小海龟hy  
这篇文章主要介绍了在vant 中使用cell组件 定义图标该图片和位置操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

@本来想直接使用icon组件,使用阿里的图标库,可是怎么弄也不行,折腾一下午,最后决定使用最笨的办法,直接上代码

vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样

<div>
 <van-cell-group class="vanCellGroupClass"><!--../../assets/tou.png-->
 <!--<van-cell icon="" title="二级经营单位" value="未完成" size="large" label="二级经营单位" class="vanCellClass" />-->
 <van-cell value="未完成" label="描述信息">
  <template slot="title">
  <div class="c1"><img src="../../assets/img/tou.png" style="width: 3.6rem;"></div>
  <span class="custom-text">二级经营单位</span>
  </template>
 </van-cell>
 </van-cell-group>
 <br>
 </div>
//css样式,给cell部分从新定义了css样式
.van-cell__value {
 color: #e6210c;
 font-weight: bold;
 font-size: 1rem;
 overflow: hidden;
 text-align: right;
 line-height: 3.0625rem;
 flex: 1;
 position: relative;
 vertical-align: middle;
 }
 .van-cell__title{
 position: relative;
 flex: 2;
 }
 .c1{
 width: 0.625rem;
 height: 0.625rem;
 }
 .van-cell__label[data-v-5ff568b8] {
 font-size: 1rem;
 line-height: 1.1rem;
 padding-left: 4.3rem;
 }.custom-text{
 font-size: 1.2rem;
 margin-left: 4.3rem;
 }

主要百度上的方法都试过了,实在没有办法。

补充知识:vant Grid组件图片加载问题 无法加载本地图片解决方案

我们引入图片直接用官网给的icon来加载案图片

<van-grid square>
 <van-grid-item 
  v-for="(item,index) in gridtextlist" 
  :key="index"
  :text="item.text"
  :icon="item.photo"
 />
 {{item}}
 </van-grid>

然后我们图片地址得用require包一下

gridtextlist:[
  {
  text:"女性专区",
  icon:"n",
  photo:require('../assets/cyimages/images/1indexjg1_05.png')
  },
  {
  text: "无醇",
  icon:"w",
  photo:require('../assets/cyimages/images/1indexjg2_05.png')
  },
  {
  text:"聚会畅想",
  icon:"j",
  photo:require('../assets/cyimages/images/1indexjg3_05.png')
  },
  {
  text:"关于爱情",
  icon:"g",
  photo:require('../assets/cyimages/images/1indexjg4_05.png')
  },
  {
  text:"火锅绝配",
  icon:"h",
  photo:require('../assets/cyimages/images/1indexjg5_05.png')
  },
  {
  text:"套餐推荐",
  icon:"template",
  photo:require('../assets/cyimages/images/1indexjg6_05.png')
  },
  {
  text:"送礼服务",
  icon:"scoped",
  photo:require('../assets/cyimages/images/1indexjg7_05.png')
  },
  {
  text:"侍酒专区",
  icon:"sh",
  photo:require('../assets/cyimages/images/1indexjg8_05.png')
  }, 
 ]

以上这篇在vant 中使用cell组件 定义图标该图片和位置操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue.js实战之利用vue-router实现跳转页面

    Vue.js实战之利用vue-router实现跳转页面

    对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-04-04
  • Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现

    Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现

    这篇文章主要介绍了Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • vue后台返回格式为二进制流进行文件的下载方式

    vue后台返回格式为二进制流进行文件的下载方式

    这篇文章主要介绍了vue后台返回格式为二进制流进行文件的下载方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue3封装侧导航文字骨架效果组件

    vue3封装侧导航文字骨架效果组件

    这篇文章主要为大家详细介绍了vue3封装侧导航文字骨架效果组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 使用element-ui的Pagination分页的注意事项及说明

    使用element-ui的Pagination分页的注意事项及说明

    这篇文章主要介绍了使用element-ui的Pagination分页的注意事项及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue常用知识点整理

    vue常用知识点整理

    Vue是一套用于构建用户界面的渐进式JavaScript框架。这篇文章整理了vue中的常用知识点,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • Vue项目启动报错解决方法大全

    Vue项目启动报错解决方法大全

    这篇文章主要给大家介绍了关于Vue项目启动报错解决方法的相关资料,文中通过图文将解决的过程介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Vue简化用户查询/添加功能的实现

    Vue简化用户查询/添加功能的实现

    本文主要介绍了Vue简化用户查询/添加功能的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • Vue精美简洁登录页完整代码实例

    Vue精美简洁登录页完整代码实例

    这篇文章主要给大家介绍了关于Vue精美简洁登录页完整代码的相关资料,通过文中的方法大家可以使用实现简单的用户登录界面,下面通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • element中table高度自适应的实现

    element中table高度自适应的实现

    这篇文章主要介绍了element中table高度自适应的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10

最新评论