<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.zyzy.cn/article/detail/5760/Vant