简介
wec-mint-ui 是一款基于 mint-ui 前端组件库进行封装的 npm 包。它提供了一系列常用的 UI 组件、常见页面、工具方法等功能，可以帮助我们更便捷的开发前端项目，提升工作效率。
安装
使用 npm 进行安装，如下：
--- ------- ----------- ------
其中，--save 表示将 wec-mint-ui 作为项目的依赖包进行保存。
使用
我们可以在 Vue 项目中使用 wec-mint-ui，如下：
------ --- ---- ----- ------ --------- ---- ------------- ------------------
上述代码表示在 Vue 中引入 wec-mint-ui，并将其作为 Vue 插件进行注册。
接着，我们可以在 Vue 组件中使用 wec-mint-ui 的组件，例如：
----------
----------- ---------------------------------
-----------
--------
------ ------- -
-------- -
--------- -
---------------------
-
-
-
---------此处，我们使用了 wec-button 组件，并为其绑定了一个点击事件。
组件
wec-mint-ui 的组件分为两类：
- mint-ui 的组件封装，例如：wec-button、wec-cell 等；
- 新增的自定义组件，例如：wec-header、wec-footer 等。
所有组件的使用方式都与 mint-ui 的组件相同，唯一不同的是将原本的组件名改为了以 wec- 开头的名字。
下面列举一些常用组件的使用示例。
wec-header
----------
----------- -----------
--------- -------------
----------- -------------------------
-----------
-------------
-----------该组件通常用于页面头部的展示，其中：
- title 属性为页面标题；
- 插槽 right 中的内容将会显示在 header 右侧（例如右侧按钮）。
wec-tabbar
----------
----------- -------------------
---------------- ----------- ---------- ------------ --
---------------- -------------- ---------- --------------- --
-------------
-----------该组件为底部标签栏，其中：
- value 属性为当前选中的 tab 的值；
- wec-tabbar-item 为 tab 项组件，其中 icon 为图标名，label 为标签显示的文字，value 为 tab 的值。
wec-toast
---------------- -------- --------- --------- --------- --------- ---- --
该组件是用于在页面中展示一段时间的提示信息，其中：
- message 属性为提示信息的内容；
- position 属性为提示信息的位置，可选值为 top、middle、bottom；
- duration 属性为提示信息展示的持续时间，单位为毫秒。
wec-pull-refresh
----------
----------------- -------------------------- ---------------------
----
--- ------------- ------ -- --------- --------------- ---- -------
-----
-------------------
-----------
--------
------ ------- -
------ -
------ -
------------- ------
--------- --
-
--
-------- -
----------- -
----------------- - ----
------------- -- -
------------- - --------- -------- -------- --------
----------------- - -----
-- -----
-
-
-
---------该组件为下拉刷新组件，其使用方式与 mint-ui 的 scroller 组件相同，只需将 scroller 替换为 wec-pull-refresh，并为其绑定 refresh 和 refreshing 属性即可。
工具方法
wec-mint-ui 中还提供了一些常用的工具方法，例如：
parseUrl
用来解析 url，例如：
------ - -------- - ---- ------------- ----- --- - ----------------------------------- --------------------------
输出结果为：
-
----- ------------------------------------
--------- --------
----- ----------------
--------- ----------------
----- ---
------- -------------
------ -
--- --------
--
----- --
-debounce
用来防抖动，可以用于减少一些高频触发的事件，例如：
------ - -------- - ---- ------------- --------------------------------- ----------- -- - --------------------- -- -----
上述代码表示当窗口大小调整时，如果 300 毫秒内没有再次触发 resize 事件，就执行事件处理函数。
结语
wec-mint-ui 是一款非常实用的前端类的 npm 包，它提供了丰富的 UI 组件和常用工具方法，可以加速我们的前端开发中的效率，值得一试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056d5d81e8991b448e6ff5