首先,确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装:
npm install vant@next
# 或
yarn add vant@next
然后,在你的 Vue 组件中,可以像这样使用 Divider 组件:
<template>
<div>
<!-- 使用 vant-divider 组件 -->
<van-divider>文本</van-divider>
<!-- 或者使用带内容的插槽 -->
<van-divider>
<van-icon name="star" />
<span>自定义内容</span>
<van-icon name="star" />
</van-divider>
</div>
</template>
<script>
import { Divider, Icon } from 'vant';
export default {
components: {
[Divider.name]: Divider,
[Icon.name]: Icon,
},
};
</script>
在这个例子中,我们使用了 van-divider 组件,可以直接在组件中添加文本,也可以通过带内容的插槽自定义分割线的内容。在第二个例子中,我们使用了 van-icon 组件添加了图标,以及一些自定义内容。
你可以根据实际需求调整分割线的样式和内容。
转载请注明出处:http://www.zyzy.cn/article/detail/5832/Vant