Vant Weapp TreeSelect如何加图片
时间: 2024-01-09 14:03:55 浏览: 134
在 Vant Weapp 的 TreeSelect 组件中,可以通过设置 `icon-class` 属性来添加图片。具体步骤如下:
1. 在需要添加图片的节点中设置 `icon-class` 属性为自定义的 class 名称。
```html
<van-tree-select
:items="items"
:main-active-index.sync="mainActiveIndex"
:active-id.sync="activeId"
>
<template #item-icon="{ item }">
<i :class="item.iconClass"></i>
</template>
</van-tree-select>
```
2. 在 CSS 样式中定义该 class 名称,并设置 `background-image` 属性为需要添加的图片地址。
```css
.custom-icon {
background-image: url('图片地址');
width: 20px;
height: 20px;
display: inline-block;
background-size: cover;
}
```
3. 在数据源中为需要添加图片的节点添加 `iconClass` 属性,并设置为自定义的 class 名称。
```js
items: [
{
text: '节点名称',
id: '1',
iconClass: 'custom-icon' // 自定义的 class 名称
}
]
```
这样就可以在 TreeSelect 组件的节点中添加图片了。
阅读全文