<template>
<div>
<!-- 使用 van-tag 组件 -->
<van-tag type="primary">标签1</van-tag>
<van-tag type="success">标签2</van-tag>
<van-tag type="info">标签3</van-tag>
<van-tag type="warning">标签4</van-tag>
<van-tag type="danger">标签5</van-tag>
</div>
</template>
<script>
export default {
setup() {
// 这里可以添加组件的相关逻辑
return {};
},
};
</script>
<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>
在上述代码中，我们使用了 van-tag 组件，并通过 type 属性设置标签的类型。type 属性支持的值有：'default'、'primary'、'success'、'warning'、'danger'、'info'。你可以根据实际需求选择合适的类型。
你还可以通过 plain 属性设置标签的样式，将标签设置为镂空样式。
确保你的项目已经正确引入了 Vant3 并按照文档配置，以确保组件能够正常工作。你可以根据实际需求定制标签的样式和行为。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5760/Vant