基本用法
1. 安装 Vant4 和 Cell 组件：
首先，确保你已经安装了 Vant4 和相关的样式：
npm install vant@next
2. 引入 Cell 组件：
在需要使用 Cell 的组件中，引入 Cell 组件：
<template>
<van-cell title="单元格标题" value="单元格内容" />
</template>
常见配置选项
Vant4 的 Cell 组件支持一系列常见的配置选项，例如 title、value、icon、label 等。
<template>
<van-cell
title="标题"
value="内容"
icon="like-o"
label="标签"
is-link
@click="handleClick"
/>
</template>
<script>
import { ref } from 'vue';
export default {
methods: {
handleClick() {
console.log('Cell 被点击了！');
}
}
};
</script>
图标
可以通过 icon 属性设置 Cell 左侧的图标，图标的名称可参考 Vant4 的图标库，比如 'like-o'、'star-o' 等。
<template>
<van-cell title="带图标的单元格" icon="like-o" />
</template>
描述信息
可以通过 label 属性设置 Cell 的描述信息。
<template>
<van-cell title="标题" value="内容" label="描述信息" />
</template>
右侧箭头
通过设置 is-link 属性，可以在右侧显示箭头，表示该单元格可点击。
<template>
<van-cell title="可点击的单元格" is-link @click="handleClick" />
</template>
<script>
import { ref } from 'vue';
export default {
methods: {
handleClick() {
console.log('可点击的单元格被点击了！');
}
}
};
</script>
这只是 Vant4 中 Cell 组件的一些基本用法和配置选项。你可以根据项目需要，查阅 Vant4 官方文档以获取更多详细信息和高级用法。
转载请注明出处：http://www.zyzy.cn/article/detail/5790/Vant