介绍
在前端开发过程中，可能会有一些常用的 UI 组件需要用到，比如按钮、表单、弹窗等，这时候我们可以通过引入第三方 UI 库来方便快捷地完成开发。本文将介绍一款基于 Vue.js 的 UI 组件库：vue-yy-ui。
安装和使用
安装
使用 npm 命令进行安装：
npm install vue-yy-ui
引入
在项目中的 main.js 文件中引入 vue-yy-ui：
import Vue from 'vue'; import VueYYUI from 'vue-yy-ui'; import 'vue-yy-ui/lib/vue-yy-ui.css'; Vue.use(VueYYUI);
使用
可以在组件中直接使用 vue-yy-ui 提供的组件，例如：
<yy-button>点击我</yy-button>
更多组件用法请参考官方文档：https://vue-yy-ui.gitee.io/docs/
示例
下面是一个简单的示例，展示了如何使用 vue-yy-ui 的 Modal 组件：
-- -------------------- ---- -------
----------
-----
---------- -----------------------------------
--------- --------------------------
---------------
---- --------------
---------- --------------------------------
---------- ------------------------------------
------
-----------
------
-----------
--------
------ ------- -
------ -
------ -
---------- ------
--
--
-------- -
----------- -
-------------- - -----
--
---------- -
-----------------------
-------------- - ------
--
-------------- -
-----------------------
-------------- - ------
--
--
--
---------在这个示例中，我们使用了 yy-button 和 yy-modal 两个组件。在按钮被点击时，会触发 showModal 方法，使 yy-modal 变为可见状态。在 yy-modal 的 footer 插槽中，我们放置了两个按钮：确认和取消，分别绑定了 handleOk 和 handleCancel 方法，当这两个按钮被点击时，会分别触发对应的方法。
总结
通过本文的介绍，我们了解了如何使用 vue-yy-ui 这个 UI 组件库，并展示了一个简单的使用示例。当然，vue-yy-ui 提供的组件不仅仅只有 Modal，还有很多其他的组件，需要用到时可以参考官方文档进行学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e8d9381d61a3540b85