npm 包 vue-popx 使用教程

vue-popx 是一个基于 Vue.js 的弹出框插件，可以快速帮助我们创建弹出层，包括页面提示、确认、输入、加载等等。它支持多种主题，默认提供了两个主题，浅色（light）和深色（dark）。在本篇文章中，我们将学习如何使用 vue-popx 插件来实现弹出层。

安装和使用

要使用 vue-popx 插件，我们需要先安装它。打开命令行工具（如终端、命令提示符等），进入到项目的根目录，然后运行下面的命令：

npm install vue-popx --save

安装完成后，我们就可以在 Vue.js 中使用 vue-popx 插件了。在需要使用插件的组件中，引入 vue-popx 并声明：

import VuePopx from 'vue-popx'

export default {
  components: {
    VuePopx
  }
  // ...
}

然后在需要弹出层的位置，使用 VuePopx 组件即可：

<vue-popx :show="showModal">
  <h1>这里是标题</h1>
  <p>这里是内容</p>
</vue-popx>

示例代码中的 showModal 是一个布尔类型的数据，控制弹出层是否显示。

基础用法

vue-popx 提供了三种弹出层类型：提示框、确认框和输入框。我们可以通过 type 属性来设置不同的类型。以下是它们的基本使用方法：

<!-- 提示框 -->
<vue-popx type="alert" :show="showAlert">这里是提示框</vue-popx>

<!-- 确认框 -->
<vue-popx type="confirm" :show="showConfirm">这里是确认框</vue-popx>

<!-- 输入框 -->
<vue-popx type="prompt" :show="showPrompt">这里是输入框</vue-popx>

三种弹出层类型的区别在于对用户输入的响应方式不同，分别是 alert、confirm 和 prompt。alert 是单纯地展示信息，用户只能关闭它，而 confirm 是需要用户确认的操作，询问是否继续，最终决策为 “是” 或 “否”；prompt 是需要用户输入的操作，询问用户输入一个字符串。下面我们将看到这三种弹出层的详细用法。

提示框

使用 alert 弹出层时，我们可以通过 title 属性设置标题，通过 message 属性设置内容。弹出框中有一个 “OK” 的按钮，点击后关闭弹出框。

<vue-popx type="alert"
  :show="showAlert"
  title="警告"
  message="您确认删除该条记录吗？"
></vue-popx>

效果如下图所示：

确认框

使用 confirm 弹出层时，同样可以通过 title 属性设置标题，message 属性设置内容。弹出框中有两个按钮 “OK” 和 “Cancel”，点击 “OK” 按钮表示用户确认操作，点击 “Cancel” 按钮表示用户取消操作。

<vue-popx type="confirm"
  :show="showConfirm"
  title="确认"
  message="您确认要退出登录吗？"
  @ok="doLogout"
  @cancel="showConfirm = false"
></vue-popx>

上面的示例中，我们在 :show 绑定了一个数据 showConfirm，表示是否显示弹出框。我们绑定了两个事件：@ok 和 @cancel，在用户点击 “OK” 按钮时，调用组件的 doLogout 方法处理退出登录事件，在用户点击 “Cancel” 按钮时，关闭弹出框。

效果如下图：

输入框

使用 prompt 弹出层时，我们除了要设置标题和内容外，还需要传递一个对象作为属性 input 的值。这个对象表示输入框的初始值和类型等信息，具体包括以下属性：

• value：输入框的初始值（字符串类型）
• type：输入框的类型，可以是 “text”（默认值）、“number”、“date”、“email” 等

<vue-popx type="prompt"
  :show="showPrompt"
  title="登录"
  message="请输入账号"
  :input="username"
  @ok="doLogin"
  @cancel="showPrompt = false"
></vue-popx>

示例中，我们通过 :input 属性传递了一个变量 username，它是一个对象，有两个属性：value 表示初始值，类型为字符串；type 表示输入框类型，这里为默认值 “text”。绑定了两个事件：@ok 和 @cancel，分别处理用户点击 “OK” 和 “Cancel” 两个事件。

效果如下：

选择主题

vue-popx 插件默认提供了两个主题，light（浅色）和 dark（深色）。这里我们使用 theme 属性来指定弹出层使用哪个主题。例如：

<vue-popx theme="light" :show="showModal">这里是弹出层</vue-popx>

示例中，我们将主题设置为 “light” （浅色）。

自定义按钮

vue-popx 插件还可以自定义按钮。我们可以通过 :buttons 属性传递一个数组，数组中的每个元素就是一个按钮。

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

在这个示例中，我们使用 type: 'transparent' 来设置按钮透明背景，type: 'danger' 来设置危险的操作。每个按钮都可以指定一个 handler 处理器，表示用户点击该按钮时会执行的回调函数。这里按钮一共有两个：一个保留、一个删除。当用户点击保留时，弹出框关闭；当用户点击删除时，弹出框关闭，并调用组件的 doDeleteFile 方法来处理删除文件的操作。

效果如下：

总结

在本文中，我们学习了如何使用 vue-popx 这个 npm 包，完成了三种弹出层类型的实现。具体来说，我们学习了不同类型弹出层的基本使用方法，以及如何选择主题、自定义按钮等。希望本文对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560d281e8991b448df143