npm 包 optimat-vue-alert-dialog 使用教程

介绍

optimat-vue-alert-dialog 是一个 Vue 组件库，用于创建弹窗提示框，包括警告框、确认框等。该库使用简单，支持自定义样式和操作按钮。

安装

使用 npm 安装 optimat-vue-alert-dialog：

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

使用

在 Vue 组件中引入 optimat-vue-alert-dialog：

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

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

在模板中使用：

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

API

Props

  • is-open (Boolean)：是否打开弹窗。
  • title (String)：弹窗标题。
  • message (String)：弹窗信息。
  • confirm-text (String)：确认按钮文字。
  • cancel-text (String)：取消按钮文字。
  • confirm-button-class (String)：自定义确认按钮类名。
  • cancel-button-class (String)：自定义取消按钮类名。

Events

  • confirm：确认按钮点击事件。
  • cancel：取消按钮点击事件。

自定义样式

可以通过在父组件的样式中设置以下类名来自定义 AlertBox 的样式：

  • .alert-box-container：弹窗容器。
  • .alert-box-title：弹窗标题。
  • .alert-box-message：弹窗信息。
  • .alert-box-confirm-button：确认按钮。
  • .alert-box-cancel-button：取消按钮。

示例代码

完整示例代码如下：

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

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

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

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

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

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

总结

optimat-vue-alert-dialog 是一个轻量级的 Vue 组件库，能够帮助你快速构建弹窗提示框。开发者可以通过自定义样式和按钮操作，实现符合业务需求的弹窗提示框。

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

阅读全文

猜你喜欢

  • npm 包 wpr 使用教程

    简介 wpr是一个基于webpack实现的提高开发效率的工具，可以让前端开发者在不依赖后端的情况下，快速构建和部署前端应用。通过wpr，可以自动处理打包、编译、压缩和优化等工作。

    4 年前
  • npm 包 cert-store 使用教程

    简介 cert-store 是 Node.js 的下载和安装 SSL/TLS 证书的工具，支持 http、https 和 ftp 协议。它与 Node.js 内置的 https 模块和第三方模块如 r...

    4 年前
  • npm 包 discord.js-artisan 使用教程

    简介 Discord 是一个广受欢迎的聊天工具，它的用户群体涵盖了游戏玩家、开发者、社交爱好者等多个群体。Discord 具有完善的 API 可以通过编写程序来自动化聊天的过程，但是受限于 API 需...

    4 年前
  • npm 包 os-on-screen-time 使用教程

    简介 os-on-screen-time 是一个 Node.js 模块，可以返回计算机屏幕的活跃时间和非活跃时间。它是一个非常有用的工具，可以被用于各种前端应用，如监控应用或自动关机等。

    4 年前
  • npm 包 fetchware 使用教程

    前言 在前端开发中，我们经常需要向后端请求数据。在过去，大家普遍使用 jQuery 的 ajax 方法来完成这个任务，但现在随着浏览器内置的 fetch API 和 XMLHttpRequest AP...

    4 年前
  • npm包paramap-it使用教程

    简介 npm 是世界上最大的软件库，用于公开发布和下载 Node.js 组件，也是前端开发者最常用的工具之一。paramap-it 是一款 npm 包，用于实现对象数组的并行执行，是一款非常实用的技术...

    4 年前
  • npm 包 git-started 使用教程

    前言 如果你是一名前端工程师，那么 npm 包肯定是你日常工作中必备的工具之一。而 git 则是最常用的版本管理工具。那么如果将二者结合起来，就会出现一款非常神奇的 npm 包：git-started...

    4 年前
  • npm 包 rocssti 使用教程

    在前端开发领域，CSS 一直是个重要的话题。在开发复杂的 Web 应用时，CSS 的维护变得非常困难，通常需要采用一些工具来加速、简化流程。其中一个非常流行的工具就是 rocssti。

    4 年前
  • npm 包 file-curator 使用教程

    前言 在前端开发中，我们常常要处理文件相关的操作，例如读取和写入文件、重命名和删除文件等。如果每次都需要自己实现操作，那将会非常耗时和困难。好在现在已经有很多优秀的 npm 包可以帮助我们解决这个问题...

    4 年前
  • npm 包 appium-repl 使用教程

    在前端开发中，自动化测试是不可避免的一个环节。而 appium-repl 是一个非常好用的自动化测试工具，可以帮助开发者快速测试移动端应用。本文将介绍如何使用 npm 包 appium-repl 进行...

    4 年前
  • npm 包 react-grid-hover 使用教程

    react-grid-hover 是一个用于实现网格区域鼠标悬停效果的 React 组件。在前端开发中，通过鼠标悬停来显示或隐藏内容是一个非常常见的需求。通常情况下，我们需要手动编写一些复杂的代码来实...

    4 年前
  • npm 包 material-ui-pickers-plus 使用教程

    前言 在现代 Web 应用程序的开发中，前端框架已经成为了一个不可或缺的组件，而 Material-UI 框架是其中的一种非常流行的方案。它是一个基于 React 的 UI 组件库，并拥有 Mater...

    4 年前
  • NPM 包 react-simple-editlabel 的使用教程

    在前端开发中，我们经常会遇到需要让用户输入数据的场景。利用 react-simple-editlabel 这个 NPM 包，我们可以快速地实现一个可编辑的 label，让用户可以方便地修改其中的内容。

    4 年前
  • npm 包 @code-7885/outside-weather-cli 使用教程

    简介 npm 包 @code-7885/outside-weather-cli 是一个可以查询全球任何城市天气预报的命令行工具。你可以通过终端输入城市名或者城市的经纬度，获取该城市最近几天的天气情况。

    4 年前
  • npm 包 spicy-words 使用教程

    简介 在前端开发过程中，经常会遇到需要对文本进行各种操作的场景。而 npm 贡献了许多优秀的工具包，可以大大提高开发的效率。其中，spicy-words 是一个十分有趣的工具包，它可以帮助我们生成一些...

    4 年前
  • npm 包 shylog 使用教程

    在前端开发过程中，日志记录是非常重要的一项工作。为了方便地进行日志记录和管理，社区中一些开发者推出了 npm 包 shylog。本篇文章将详细介绍 shylog 的安装、使用和一些注意事项。

    4 年前
  • npm 包 product-set-generator 使用教程

    在前端开发过程中，有时需要生成所有可能的商品组合，以便在电子商务平台或产品展示页面上展示所有可用的商品选择。为了解决这个问题，可以使用 npm 包 product-set-generator。

    4 年前
  • npm包 @aaronchenwei/tslint-config 使用教程

    前言 在开发前端应用的过程中，我们往往会遇到代码规范和风格的问题。为了解决这种问题，有很多开放源代码的工具可用，其中之一就是 TSLint。本文将介绍如何使用 @aaronchenwei/tslint...

    4 年前
  • npm 包 node-red-contrib-fabric-blocks-listener 使用教程

    前言 在区块链领域中，Hyperledger Fabric 是一个非常流行的开源平台，支持创建自定义的区块链网络，使得开发者可以构建适用于其特定需求的应用程序。 今天，我想介绍一个非常实用的 npm ...

    4 年前
  • npm 包 json-api-redux 使用教程

    一、简介 json-api-redux 是一款基于 Redux 和 json-api 规范的 npm 包，它提供了一系列的 action 和 reducer，方便我们在前端项目中使用 json-api...

    4 年前

相关推荐

    暂无文章