介绍
@beisen-cmps/common-label 是一款前端常用的文本标签组件，支持自定义颜色和文本，丰富的样式和简易的使用方式，使其成为前端工程师必不可少的工具之一。
安装
使用 npm 安装 @beisen-cmps/common-label:
npm install @beisen-cmps/common-label
使用
引入组件
在需要使用组件的文件中引入：
import CommonLabel from '@beisen-cmps/common-label';
基本用法
通过配置组件的 color 和 text 属性，我们可以创建一个简单的标签：
<CommonLabel color={'#ff0000'} text={'example'}/>自定义样式
CommonLabel 支持自定义样式，你可以以属性的形式传入 style：
<CommonLabel style={{fontSize: '20px', fontWeight: 'bold', backgroundColor: '#ff0000'}} color={'#fff'} text={'example'}/>其他属性
CommonLabel 还支持其他属性，如 onClick、className 等，具体说明如下：
点击事件（onClick）
<CommonLabel onClick={()=>alert('click')} color={'#ff0000'} text={'example'}/>类名（className）
<CommonLabel className={'custom-label'} color={'#ff0000'} text={'example'}/>示例代码
下面是一份 CommonLabel 的示例代码，你可以修改其中的 text 和 color 属性以达到你的需求：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ----------------------------
----- ------- ------- --------------- -
------------------ -
-------------
-
-------- -
------ -
------------ ----------------- ------------------
--
-
-
------------------------ --- ---------------------------------总结
通过本文的介绍和示例代码，你应该已经了解了如何使用 @beisen-cmps/common-label，并且能够创建一个简单的标签。同时，你也可以通过自定义样式的方式来修改标签的外观。希望你能把这款组件应用于你的开发项目中，并对你的工作产生帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/137884