Vant3 的 van-tag 组件用于展示标签,以下是一个简单的例子,演示如何在 Vue 组件中使用 Vant3 的 Tag:
<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