简介
@goldenplanet/vue-strap 是一款 Vue 组件库，包含了多个常用组件，如 navbar、button、alert、modal 等等。通过引入该组件库，可以快速轻松地搭建出一个富交互的前端应用，提升开发效率和用户体验。
该组件库提供了丰富的组件样式和属性配置，可以满足大部分业务需求。此外，对于样式不满足需求的情况，也提供了样式修改注入的方式。
安装及使用
可以通过 npm 安装该组件库：
npm install @goldenplanet/vue-strap
在 Vue 项目中引入该组件库：
import Vue from 'vue'; import VueStrap from '@goldenplanet/vue-strap'; import '@goldenplanet/vue-strap/dist/@goldenplanet/vue-strap.css'; Vue.use(VueStrap);
组件使用
Navbar
Navbar 组件作为一个网站的头部导航栏，主要用于页面的导航和用户选项展示。该组件已经封装好了一些常用的样式，可以方便使用。
在组件中，通过 slots 分别代表左侧内容和右侧内容。可以通过 props 定制组件中部的文字和样式。
-- -------------------- ---- -------
----------
------- ------------ -------------
--------- ------------
------------ ------ --------------------------------------------
-----------
---------
-----------
--------
------ ------- -
------ -
------ -
----- -
----- --------
------- ---
--
----- -
- ------ ------- ----- --- --
- ------ -------- ----- -------- --
- ------ ---------- ----- ---------- --
--
--
--
--
---------Button
Button 组件作为用户与页面交互的最基本组件，有着丰富的样式和事件，可以根据业务需求自由定制。
该组件的样式由 props 控制，点击事件由 emit 触发，可以通过父组件对其进行监听。
-- -------------------- ---- -------
----------
-----
------- ------------------ ----------------------------------- -----------
------
-----------
--------
------ ------- -
------ -
------ -
----- -------
-------- -------
--
----- -
----- -------
-------- ---------
--
--
--
---------
------ -------
----------- -
------- -----
-------- -----
---------- -----
------ -----
----------------- -----
-
--------Alert
Alert 组件作为展示一条消息或警告的组件，可以定制不同类型的样式。在不同场景下，可以定制不同的颜色和图标。
该组件依赖于另一个组件 icon，该组件提供了多个常用图标的定制。通过 props 改变组件样式和数据。
-- -------------------- ---- -------
----------
------ -------------- -------------------- -----------------------------
-- ------- --
--------
-----------
--------
------ ------- -
------ -
------ -
----- -------
-------- -------
--
-------- -
----- -------
-------- ---
--
--------- -
----- --------
-------- -----
--
--
--
---------Modal
Modal 组件作为展示一些重要信息和操作的弹出框，可以由父组件通过监听 visible 属性来控制组件的显示和隐藏。
该组件的样式由 props 控制，可自由定制。点击事件由 emit 触发，可以通过父组件对其进行监听。
-- -------------------- ---- -------
----------
------ ------------------ -------------- ---------------------- -------------------------------
-- ------- --
--------
-----------
--------
------ ------- -
------ -
-------- -
----- --------
-------- ------
--
------ -
----- -------
-------- ---
--
-------- -
----- -------
-------- ---
--
------- -
----- -------
-------- -----
--
----------- -
----- -------
-------- ---------
--
--
--
---------总结
@goldenplanet/vue-strap 是一款非常实用的 Vue 组件库，在前端开发中可以大大提高开发效率以及用户体验。本文介绍了该组件库的使用方法，包括安装、引入、组件使用以及相关说明。通过本文的学习，读者能够轻松掌握该组件库的使用方法，快速应用到项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eac81e8991b448dc256