在前端开发中，会有很多场景需要用到工具栏，比如编辑器、富文本编辑器、动态表单等。而 vue-js-toolbar 就是一个非常好用的 Vue.js 工具栏插件，能够帮助我们快速实现各种各样的功能，并且使用起来十分简单。
安装
我们可以使用 npm 来安装 vue-js-toolbar：
npm install vue-js-toolbar
使用
在 Vue.js 项目中使用 vue-js-toolbar 也非常简单，只需要在组件中引入并注册即可：
-- -------------------- ---- -------
----------
-----
--------------- --------------------------------
---- -----------------------
------
-----------
--------
------ ------------ ---- -----------------
------ ------- -
----- ----------
----------- -
------------
--
------ -
------ -
-------- --------- -----------
------ -
-
----- -------
----- ---- ---------
------- -- -- -
---------------------------- ------ ------
-
--
-
----- ---------
----- ---- -----------
------- -- -- -
------------------------------ ------ ------
-
-
-
--
-
--
---------通过传递一个名为 tools 的数组，我们可以定义工具栏中的按钮，每个按钮都需要包含以下三个属性：
name：按钮的名称。icon：按钮的图标。action：按钮的操作。
指南
vue-js-toolbar 不仅仅是一个工具栏插件，还提供了一些有用的功能和指导：
按钮类型
除了常规的按钮，vue-js-toolbar 还支持以下类型的按钮：
分割线
{
name: "divider",
icon: "divider"
}分组
-- -------------------- ---- -------
-
----- --------
----- --------
------ -
-
----- -------
----- ---- ---------
------- -- -- -
---------------------------- ------ ------
-
--
-
----- ---------
----- ---- -----------
------- -- -- -
------------------------------ ------ ------
-
-
-
-自定义按钮样式
如果想要更改按钮样式，可以在组件中使用 scoped 样式或者自定义主题样式。
自定义主题样式：
VueJsToolbar.theme.dark .vjtb-button {
color: #ffffff;
background-color: #222222;
}使用插件
vue-js-toolbar 支持使用插件的方式扩展功能，比如 vue-js-toolbar-link、vue-js-toolbar-image 等。
import VueJsToolbarLink from "vue-js-toolbar-link"; Vue.use(VueJsToolbarLink);
示例
下面是一个简单的编辑器示例，使用了 vue-js-toolbar 和 marked：
-- -------------------- ---- -------
----------
-----
--------------- --------------------------------
-----
--------- ---------------- ----------------------------------
---- -----------------------
------
------
-----------
--------
------ ------------ ---- -----------------
------ ------ ---- ---------
------ ---------------- ---- ----------------------
--------------------------
------ ------- -
----- ---------
----------- -
------------
--
------ -
------ -
------- ---
-------- ---
------ -
-
----- -----
----- ---- ------------
------- -- -- -
----------------------------------- ------ ------
-
--
-
----- -----
----- ---- ------------
------- -- -- -
----------------------------------- ------ ------
-
--
-
----- -------
----- ---- ---------
------- -- -- -
---------------------------- ------ ------
-
--
-
----- ---------
----- ---- -----------
------- -- -- -
------------------------------ ------ ------
-
--
-
----- -------
----- ---- ---------
-------- -------------
------- ----------------------
-------- -
------ ------- ------
------------ ---------------------
------------ ---------
------------- -------------------------
-------------- -------------------------
-
-
-
--
--
-------- -
--------------- -
--- ---- - ------------------ -- ----
------------ - -----
-
-
--
---------
------ -------
-------- -
------ -----
------- ------
-------------- -----
-
----------------------- -
------------- ----
-------- ----
------ ------
------- ---- ----- ----
---------- -----
-
------------------------ -
----------------- -----
------- ---- ----- ----
---------- -----
------- --------
-
--------总结
vue-js-toolbar 是一个非常好用的 Vue.js 工具栏插件，不仅能够帮助我们快速实现各种各样的功能，还提供了一些有用的功能和指导。使用 vue-js-toolbar，前端开发会变得更加高效，更加方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d0881e8991b448e6caf