Vant 库中如何给 List 列表组件的 cell 中左右两边来添加小图标？

最新推荐文章于 2024-07-26 12:00:01 发布

狮子座的男孩

最新推荐文章于 2024-07-26 12:00:01 发布

阅读量5.7k

点赞数 6

分类专栏： # Vant 文章标签： javascript 前端 vant 经验分享 vue

本文链接：https://blog.csdn.net/weixin_43405300/article/details/124779254

版权

Vant 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ⅰ、问题描述：

1、Vant 中 List 列表的使用是方便且常用的，但如何给 List 组件中添加小图标而达到想要的效果呢？

2、图例展示：

其一、想要在 Vant 的 List 组件右边添加 播放 的小图标：
在这里插入图片描述

其二、想要在 Vant 的 List 组件左边添加 播放 的小图标(当然：size 可以自己设置)：

在这里插入图片描述

Ⅱ、问题实现过程：

1、用的 Vant 库及 List 列表组件的地址为：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/icon
在这里插入图片描述
2、左右两边添加小图标的方法：

其一、在左边添加小图标：

A、添加的核心代码为：icon="play-circle-o"

<van-list>
  <van-cell icon="play-circle-o" v-for="item in list" :key="item" :title="item" />
</van-list>

B、页面查看的显示结果为：van-cell__left-icon

在这里插入图片描述
C、效果展示：

其二、在右边添加小图标方法一：

A、添加的核心代码为：<template #right-icon> <van-icon name="play-circle-o" /> </template>"

<van-list>
  <van-cell v-for="item in list" :key="item" :title="item" />
	  <template #right-icon>
	  	<van-icon name="play-circle-o" />
	  </template>
  </van-cell>
</van-list>

B、页面查看的显示结果为：van-icon-play-circle-o(即：表示的就是在右边添加一个小图标的位置)

在这里插入图片描述

C、效果展示：
在这里插入图片描述

其三、在右边添加小图标方法二：

A、添加的核心代码为：<template> <van-icon name="play-circle-o" /> </template>"

<van-list>
  <van-cell v-for="item in list" :key="item" :title="item" />
	  <template>
	  	<van-icon name="play-circle-o" />
	  </template>
  </van-cell>
</van-list>

B、页面查看的显示结果为：van-cell__value 下的 van-icon-play-circle-o

// 即：说明此时的代码是直接创建了一个 van-cell__value 类值与 van-cell__title 并列；
在这里插入图片描述
C、效果展示：

Ⅲ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482