Element-React 的 Tag 组件用于显示标签,可以是静态文本也可以是动态生成的。以下是一个简单的例子,演示如何在 Vue 组件中使用 Element-React 的 Tag 组件:

首先,确保你已经安装了 Element-React,并在你的项目中引入了相应的样式和组件。可以通过 npm 或 yarn 安装:
npm install element-react
# 或
yarn add element-react

然后,在你的 Vue 组件中,可以这样使用 Tag 组件:
<template>
  <div>
    <h3>Element-React Tag 标签</h3>
    <el-tag>Default Tag</el-tag>
    <el-tag type="success">Success Tag</el-tag>
    <el-tag type="info">Info Tag</el-tag>
    <el-tag type="warning">Warning Tag</el-tag>
    <el-tag type="danger">Danger Tag</el-tag>
  </div>
</template>

<script>
import { ElTag } from 'element-react';

export default {
  components: {
    ElTag,
  },
};
</script>

在这个例子中,我们引入了 Element-React 的 ElTag 组件,并在模板中使用它。通过设置 type 属性,你可以改变标签的颜色,可选的值有 'success'、'info'、'warning' 和 'danger'。默认为灰色。

你还可以通过设置其他属性来自定义标签,比如 closable 来显示关闭按钮,hit 来高亮显示标签,effect 来设置动画效果等。

请参考 Element-React 的官方文档:[Element-React Tag](https://element-plus.org/#/en-US/component/tag) 以获取更多详细信息和选项。


转载请注明出处:http://www.pingtaimeng.com/article/detail/5616/Element-React