介绍
npm 包 @beisen/platform-base 是贝岸集团开发的一款前端基础框架，旨在为前端开发人员提供便捷的开发体验，其中包含了多个常用的前端组件，如表格组件、表单组件、选择器组件等。本教程将详细介绍 @beisen/platform-base 的使用方法，包括安装、引入、使用等内容。
安装
使用 @beisen/platform-base，需要先将其安装到项目中。通过使用 npm 安装，可以轻松地将其添加到项目依赖中，并在项目中进行引用。
npm install @beisen/platform-base --save
引入
在项目中引入 @beisen/platform-base 的方式有两种，一种是全量引入，即在项目入口文件中引入，可以将所有组件导入到项目中：
import PlatformBase from '@beisen/platform-base' import '@beisen/platform-base/dist/platform-base.css' Vue.use(PlatformBase);
另一种是按需引入，即只引入需要使用的组件，可以减少代码量。
import { BTable, BFormItem } from '@beisen/platform-base'
Vue.use(BTable).use(BFormItem);使用
下面以表单组件 BFormItem 为例，介绍一下如何使用 @beisen/platform-base。
基本用法
-- -------------------- ---- -------
----------
------------ ------------------- -------------------- ---------
------ ------------- ----------- ------------------- ------------------- --
----- -------------------- -------- ---------
--------------
-----------
--------
------ - --------- - ---- -----------------------
------ ------- -
----------- - --------- --
------ -
------ -
----- -
------ ------
------ --
--
---------- - --------- ---- --
--------- --
-
--
------ -
-------------------- -
-------------- -
------------- - ----- - -- - --------
--
----- ----
-
-
-
---------以上代码实现了一个包含 BFormItem 组件的简单表单，其中 v-model 绑定了组件的值，required 属性指定该表单项为必填项，v-valid 属性定义了该表单项的验证规则，errorMsg 属性定义了验证失败时的提示信息。
高级用法
除了基本用法，@beisen/platform-base 中还提供了许多高级用法，如使用插槽、自定义模板等。
使用插槽
BFormItem 组件提供了多个插槽，可以通过插槽来自定义表单项的样式和内容。
-- -------------------- ---- -------
----------
------------ ------------------- -------------------- ---------
--------- -------------
-- ----------- -----------------
-----------
--------- -------
----- -------------------- ---------- ---------
-- ---------------- --------------------------
-----------
--------- ---------
------ ------------- ----------- ------------------- ------------------- --
-----------
--------- --------
-- ----------- -----------------
-----------
----- -------------------- -------- ---------
--------------
-----------
--------
------ - --------- - ---- -----------------------
------ ------- -
----------- - --------- --
------ -
------ -
----- -
------ ------
------ --
--
---------- - --------- ---- --
--------- --
-
--
-------- -
------------ -
-- -------
-
--
------ -
-------------------- -
-------------- -
------------- - ----- - -- - --------
--
----- ----
-
-
-
---------以上代码使用了表单项的 prefix-icon、label、default、suffix 四个插槽，分别用来设置表单项的前缀图标、标签、文本框和后缀图标。
自定义模板
除了使用插槽，@beisen/platform-base 还提供了自定义模板的功能，可以完全自定义一个表单项。
-- -------------------- ---- -------
----------
------------ ------------------- -------------------- ---------
--------- ---------- ------ ------ ------ --------- ------ ------- ---
-----
--------- ----- ----------
------ ----------- -------------- ---------------------- --------------------- --
----- ---------------- ----- ---------
------- ------------- -------------------------------
------- ------------- ------------- - -----------------
------- ------------- -------------------------------
------
-----------
--------------
-----------
--------
------ - --------- - ---- -----------------------
------ ------- -
----------- - --------- --
------ -
------ -
----- -
------ --------
------ ---
--
------ -----
------ --
--
--
------ -
---------- -
-- ----- -
---------- - ---
- ---- -
---------- - -------------------------
-
-
--
-
---------以上代码实现了一个自定义模板的表单项，使用了 BFormItem 的 custom 模板，将表单项的样式和内容完全自定义。
结语
以上就是 @beisen/platform-base 的使用教程，本文详细介绍了其安装、引入和使用方法，同时也介绍了其基本用法、高级用法以及自定义模板的实现方式。通过本教程的学习，相信读者已经可以熟练使用 @beisen/platform-base 进行前端开发了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/134770