介绍
@nylira/vue-field 是一个 Vue 组件库，提供了常用的表单字段组件，例如 input、select、checkbox 等等。使用这个组件库能够快速地构建复杂的表单页面，并且在样式上非常容易进行自定义。
安装
@nylira/vue-field 可以通过 npm 安装，使用以下命令：
npm install @nylira/vue-field
使用
引入组件
在 Vue 组件中引入组件非常简单，可以像下面这样导入所有组件：
import VueField from '@nylira/vue-field'; import '@nylira/vue-field/dist/vue-field.css'; Vue.use(VueField);
使用组件
在模板中，使用组件也非常简单。组件名称以 <field- 开头，例如：<field-input>、<field-select>、<field-checkbox> 等等。
-- -------------------- ---- -------
----------
-----
------------ --------------- -------------------------
------------- --------------- ------------------ --------------------------
--------------- --------------- ------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
-------- -
- ------ ----- ------ --------- --
- ------ ----- ------ ---------- --
- ------ ----- ------ ---------- -
-
-
-
-
---------自定义样式
默认情况下，@nylira/vue-field 提供的样式是非常简单的，可以满足大部分场景的需求。但如果需要更个性化的样式，也非常容易进行自定义。
修改主题颜色
@nylira/vue-field 的主色调是 $vue-field-primary，可以使用类似下面的方式来自定义主题颜色：
.vue-field-theme-primary {
--vue-field-primary: #007aff;
}自定义每个组件的样式
我们可以通过给组件添加 class 或设置 style 的方式来自定义每个组件的样式，例如：
-- -------------------- ---- -------
----------
-----
------------ --------------- ---------- -----------------------------------
------------- --------------- ------------------ ---------- ------------- -----------------------
--------------- --------------- ------------ -----------------------------------------
------
-----------
------ -------
------------- -
-------------- ----
------- --- ----- -----
-------- -----
---------- -----
-
---------------- ---------------- -
------------ -----
-
--------这里的 .custom-input 和 .custom-checkbox 就是自定义的类名，样式中的属性可以按照自己的需求进行修改。
总结
@nylira/vue-field 是一个非常实用的 Vue 组件库，提供了常用的表单字段组件，并且可以非常方便地进行自定义样式。使用这个组件库能够极大地提升前端开发的效率，是值得推荐的一个工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bd0967216659e244e89