简介
wec-mint-ui 是一款基于 mint-ui 前端组件库进行封装的 npm 包。它提供了一系列常用的 UI 组件、常见页面、工具方法等功能，可以帮助我们更便捷的开发前端项目，提升工作效率。
安装
使用 npm 进行安装，如下：
npm install wec-mint-ui --save
其中，--save 表示将 wec-mint-ui 作为项目的依赖包进行保存。
使用
我们可以在 Vue 项目中使用 wec-mint-ui，如下：
import Vue from 'vue' import WecMintUI from 'wec-mint-ui' Vue.use(WecMintUI)
上述代码表示在 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
<template>
<wec-header title="我的">
<template v-slot:right>
<wec-button icon="edit"></wec-button>
</template>
</wec-header>
</template>该组件通常用于页面头部的展示，其中：
- title 属性为页面标题；
- 插槽 right 中的内容将会显示在 header 右侧（例如右侧按钮）。
wec-tabbar
<template>
<wec-tabbar :value="activeTab">
<wec-tabbar-item icon="home" label="首页" value="home" />
<wec-tabbar-item icon="setting" label="设置" value="setting" />
</wec-tabbar>
</template>该组件为底部标签栏，其中：
- value 属性为当前选中的 tab 的值；
- wec-tabbar-item 为 tab 项组件，其中 icon 为图标名，label 为标签显示的文字，value 为 tab 的值。
wec-toast
this.$wecToast({
message: '这是一个提示',
position: 'middle',
duration: 3000
})该组件是用于在页面中展示一段时间的提示信息，其中：
- message 属性为提示信息的内容；
- position 属性为提示信息的位置，可选值为 top、middle、bottom；
- duration 属性为提示信息展示的持续时间，单位为毫秒。
wec-pull-refresh
-- -------------------- ---- -------
----------
----------------- -------------------------- ---------------------
----
--- ------------- ------ -- --------- --------------- ---- -------
-----
-------------------
-----------
--------
------ ------- -
------ -
------ -
------------- ------
--------- --
-
--
-------- -
----------- -
----------------- - ----
------------- -- -
------------- - --------- -------- -------- --------
----------------- - -----
-- -----
-
-
-
---------该组件为下拉刷新组件，其使用方式与 mint-ui 的 scroller 组件相同，只需将 scroller 替换为 wec-pull-refresh，并为其绑定 refresh 和 refreshing 属性即可。
工具方法
wec-mint-ui 中还提供了一些常用的工具方法，例如：
parseUrl
用来解析 url，例如：
import { parseUrl } from 'wec-mint-ui'
const url = 'https://www.baidu.com/s?wd=vue.js'
console.log(parseUrl(url))输出结果为：
-- -------------------- ---- -------
-
----- ------------------------------------
--------- --------
----- ----------------
--------- ----------------
----- ---
------- -------------
------ -
--- --------
--
----- --
-debounce
用来防抖动，可以用于减少一些高频触发的事件，例如：
import { debounce } from 'wec-mint-ui'
window.addEventListener('resize', debounce(() => {
console.log('窗口大小调整')
}, 300))上述代码表示当窗口大小调整时，如果 300 毫秒内没有再次触发 resize 事件，就执行事件处理函数。
结语
wec-mint-ui 是一款非常实用的前端类的 npm 包，它提供了丰富的 UI 组件和常用工具方法，可以加速我们的前端开发中的效率，值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d5d81e8991b448e6ff5