npm 包 vue-js-toolbar 使用教程

在前端开发中，会有很多场景需要用到工具栏，比如编辑器、富文本编辑器、动态表单等。而 vue-js-toolbar 就是一个非常好用的 Vue.js 工具栏插件，能够帮助我们快速实现各种各样的功能，并且使用起来十分简单。

安装

我们可以使用 npm 来安装 vue-js-toolbar：

--- ------- --------------

使用

在 Vue.js 项目中使用 vue-js-toolbar 也非常简单，只需要在组件中引入并注册即可：

----------
  -----
    --------------- --------------------------------
    ---- -----------------------
  ------
-----------

--------
------ ------------ ---- -----------------

------ ------- -
  ----- ----------
  ----------- -
    ------------
  --
  ------ -
    ------ -
      -------- --------- -----------
      ------ -
        -
          ----- -------
          ----- ---- ---------
          ------- -- -- -
            ---------------------------- ------ ------
          -
        --
        -
          ----- ---------
          ----- ---- -----------
          ------- -- -- -
            ------------------------------ ------ ------
          -
        -
      -
    --
  -
--
---------

通过传递一个名为 tools 的数组，我们可以定义工具栏中的按钮，每个按钮都需要包含以下三个属性：

  • name：按钮的名称。
  • icon：按钮的图标。
  • action：按钮的操作。

指南

vue-js-toolbar 不仅仅是一个工具栏插件，还提供了一些有用的功能和指导：

按钮类型

除了常规的按钮，vue-js-toolbar 还支持以下类型的按钮：

分割线

-
  ----- ----------
  ----- ---------
-

分组

-
  ----- --------
  ----- --------
  ------ -
    -
      ----- -------
      ----- ---- ---------
      ------- -- -- -
        ---------------------------- ------ ------
      -
    --
    -
      ----- ---------
      ----- ---- -----------
      ------- -- -- -
        ------------------------------ ------ ------
      -
    -
  -
-

自定义按钮样式

如果想要更改按钮样式，可以在组件中使用 scoped 样式或者自定义主题样式。

自定义主题样式：

----------------------- ------------ -
  ------ --------
  ----------------- --------
-

使用插件

vue-js-toolbar 支持使用插件的方式扩展功能，比如 vue-js-toolbar-link、vue-js-toolbar-image 等。

------ ---------------- ---- ----------------------

--------------------------

示例

下面是一个简单的编辑器示例，使用了 vue-js-toolbar 和 marked：

----------
  -----
    --------------- --------------------------------
    -----
      --------- ---------------- ----------------------------------
      ---- -----------------------
    ------
  ------
-----------

--------
------ ------------ ---- -----------------
------ ------ ---- ---------
------ ---------------- ---- ----------------------

--------------------------

------ ------- -
  ----- ---------
  ----------- -
    ------------
  --
  ------ -
    ------ -
      ------- ---
      -------- ---
      ------ -
        -
          ----- -----
          ----- ---- ------------
          ------- -- -- -
            ----------------------------------- ------ ------
          -
        --
        -
          ----- -----
          ----- ---- ------------
          ------- -- -- -
            ----------------------------------- ------ ------
          -
        --
        -
          ----- -------
          ----- ---- ---------
          ------- -- -- -
            ---------------------------- ------ ------
          -
        --
        -
          ----- ---------
          ----- ---- -----------
          ------- -- -- -
            ------------------------------ ------ ------
          -
        --
        -
          ----- -------
          ----- ---- ---------
          -------- -------------
          ------- ----------------------
          -------- -
            ------ ------- ------
            ------------ ---------------------
            ------------ ---------
            ------------- -------------------------
            -------------- -------------------------
          -
        -
      -
    --
  --
  -------- -
    --------------- -
      --- ---- - ------------------ -- ----
      ------------ - -----
    -
  -
--
---------

------ -------
-------- -
  ------ -----
  ------- ------
  -------------- -----
-

----------------------- -
  ------------- ----
  -------- ----
  ------ ------
  ------- ---- ----- ----
  ---------- -----
-

------------------------ -
  ----------------- -----
  ------- ---- ----- ----
  ---------- -----
  ------- --------
-
--------

总结

vue-js-toolbar 是一个非常好用的 Vue.js 工具栏插件，不仅能够帮助我们快速实现各种各样的功能，还提供了一些有用的功能和指导。使用 vue-js-toolbar，前端开发会变得更加高效，更加方便。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056d0881e8991b448e6caf

阅读全文

猜你喜欢

  • npm 包 coinspot-async-api 使用教程

    前言 随着比特币等加密货币的兴起，数字货币交易所的应用也日益广泛。Coinspot 是一家位于澳大利亚的数字货币交易所，提供了一套简单的 API 供开发者调用。为了方便开发者使用这个 API，有人开发...

    3 年前
  • NPM包css-absolutely使用教程

    1. 了解npm包css-absolutely npm包css-absolutely是一个可以实现绝对定位（absolute positioning）的CSS库。该库的特点是支持基于容器的绝对定位，可...

    3 年前
  • npm包is-isbn使用教程

    前言 在前端开发中，我们经常需要处理图书数据。ISBN（国际标准书号）是一个用于标识图书的标准编码，它由13位数字组成。在处理图书数据时，我们经常需要验证、转换和提取ISBN。

    3 年前
  • npm 包 paper-mill 使用教程

    前言 在前端开发中，我们经常会用到生成 PDF 文件的需求。而实现这个需求的方法有很多，如使用 jsPDF 等 JavaScript 库，或者使用第三方服务进行转换。

    3 年前
  • npm 包 unvired-cli 使用教程

    前言 在前端开发中，我们经常需要使用一些工具来辅助我们进行项目开发。而使用 npm 包就是其中的一种重要方式。在本文中，我们将要介绍一款名为 unvired-cli 的 npm 包，它可以帮助我们更加...

    3 年前
  • npm 包 file-uti 使用教程

    在前端开发中，我们经常需要处理文件相关的操作，例如读取、修改、写入等等。这时就需要使用到文件类型检测工具。file-uti 是一个非常好用的 npm 包，可以方便地帮助我们对文件类型进行检测，本文将详...

    3 年前
  • npm 包 glam-react-styles 使用教程

    glam-react-styles 是一个 React 组件库的样式包，它的目的是让你在你的 React 组件中使用行内样式的方法来封装样式。这个 npm 包可以是一种大大简化和优化 React 组件...

    3 年前
  • npm 包 hubber-iot 使用教程

    简介 Hubber IoT 是一个用于高度定制化设备集成和数据可视化的 npm 包。该包使用 TypeScript 编写，可以轻松地在你的项目中使用它来帮助你实现设备集成和数据可视化。

    3 年前
  • npm 包 hubber-plugins 使用教程

    npm 包 hubber-plugins 使用教程 前端开发中，经常需要使用各类 npm 包来增加代码的复用性、提高效率。在这些包中，hubber-plugins 是一个非常有用的工具，它可以帮助我们...

    3 年前
  • npm 包 meepo-shake 使用教程

    什么是 npm 包 meepo-shake？ meepo-shake 是一个基于 CSS3 实现的前端动态效果库，它可以给网页元素添加抖动效果，塑造出更加生动的用户体验，使得网页看起来更加有趣。

    3 年前
  • npm 包 patches 使用教程

    在前端开发中，我们经常会使用第三方的 npm 包，而有时候我们需要对这些包做出修改以满足我们的特定需求。但是，直接更改这些包的源代码并不是一个好方法，因为当这些包升级版本时，我们的更改会丢失。

    3 年前
  • npm 包 generator-basedakp48-plugin 使用教程

    简介 generator-basedakp48-plugin 是一个基于 Yeoman 的 npm 包，它可以帮助前端开发者快速生成项目模板和插件模板。该插件的生成模板使用了基于 TypeScript...

    3 年前
  • npm 包 plivo-tu 使用教程

    在使用 WebRTC 技术进行语音通话时，需要使用到一些 WebRTC 自带 API ，比如 getUserMedia、createOffer 等。但在不同浏览器上，这些原生 API 的实现存在一些差...

    3 年前
  • 前端类技术文章：npm 包 react-iot 使用教程

    介绍 react-iot 是一个在 React 应用中集成物联网设备的 npm 包。它提供了一个可扩展的、易于使用的接口，帮助前端开发者轻松地将物联网设备集成到他们的 React 应用中。

    3 年前
  • npm 包 amazon-echo-onlaunch 使用教程

    amazon-echo-onlaunch 是一个基于 Node.js 的 npm 包，它提供了一种快速、简便的方式将您的代码与 Amazon Echo 设备的 onLaunch 事件进行连接。

    3 年前
  • npm 包 cachepot 使用教程

    简介 cachepot 是一个用于缓存和存储数据的 npm 包，它可以帮助开发者快速方便地创建和管理缓存。它提供了简单易用的 API，支持多种类型的数据，例如字符串、JSON 对象和 Buffer 等...

    3 年前
  • npm 包 cryptopia 使用教程

    简介 cryptopia 是一个 Node.js 的 npm 包，它提供了一些加密算法和哈希函数的实现，支持多种加密方式，包括 AES、DES、RSA 等。 安装 安装 cryptopia 可以使用 ...

    3 年前
  • npm 包 nativescript-ng-shadow 使用教程

    在前端开发中，阴影效果是一个非常常见的 UI 设计元素，可以让页面看起来更加立体和美观。在 NativeScript 开发中，我们可以使用一个名为 nativescript-ng-shadow 的 n...

    3 年前
  • NPM 包 Repatch 使用教程

    前言 在前端开发过程中，状态管理是一个非常关键的问题。需要对状态进行合理的控制和管理。而 Repatch 正是解决前端状态管理问题的一个好工具。 Repatch 简介 Repatch 是一个用于创建 ...

    3 年前
  • npm 包 toast-for-icon-font 使用教程

    在前端开发中，常常需要使用头像或者图标进行页面的渲染，这时就需要使用图标字体，而 toast-for-icon-font 是一个可以帮助我们快速引入图标字体的 npm 包。本文将介绍它的具体使用方法。

    3 年前

相关推荐

    暂无文章