npm 包 ember-remodal 使用教程

介绍

Ember-remodal 是一个基于 Ember.js 的弹窗组件库。它提供了多种弹窗类型，包括 alert、confirm、prompt 等。同时还可以定制弹窗的样式和动画效果。使用 Ember-remodal，可以轻松地实现各种弹窗需求。

安装

安装 Ember-remodal 很简单，只需要使用 npm 安装包即可。

npm install ember-remodal --save

安装完成后，需要在 ember-cli-build.js 文件中引入 Remodal 的 CSS 样式表。

// ember-cli-build.js
app.import('node_modules/ember-remodal/dist/remodal.css');

使用

使用 Ember-remodal 需要用到两个组件：{{remodal-container}} 和 {{remodal}}。

首先，在需要弹窗的页面中添加 {{remodal-container}} 代码。

<!-- app/templates/application.hbs -->
{{remodal-container}}

然后，在需要触发弹窗的地方添加自定义属性 data-remodal-target 和值为 modalId。其中，modalId 是一个唯一的、命名良好的字符串，用于唯一标识一个弹窗。

<button data-remodal-target="myModal">Click me</button>

最后，在页面中添加 {{remodal}} 代码，并设置 name 属性为 modalId。此时，myModal 弹窗就会因为按钮的点击事件而弹出。

<!-- app/templates/application.hbs -->
{{remodal name="myModal" closeOnOutsideClick=true}}

为了让弹窗更加丰富，可以给 {{remodal}} 组件添加以下属性：

• hashOptions：用于设置弹窗的样式和动画效果。
• onOpen：一个回调函数，在弹窗打开时触发。
• onClose：一个回调函数，在弹窗关闭时触发。
• closeOnOutsideClick：一个布尔值，指示是否允许在弹窗外面点击关闭弹窗。默认为 true。

例如，以下代码将弹窗的样式设置为 card，并在弹窗打开时调用 openCallback 函数，在弹窗关闭时调用 closeCallback 函数。

<!-- app/templates/application.hbs -->
{{remodal name="myModal"
          hashOptions=(hash modifier='card' animationSpeed='600ms')
          onOpen=(action openCallback)
          onClose=(action closeCallback)
          closeOnOutsideClick=true}}

示例代码

下面是一个完整的示例代码，展示了如何在 Ember.js 中使用 Ember-remodal。

<!-- app/templates/application.hbs -->
{{#remodal name="myModal" hashOptions=(hash modifier='card' animationSpeed='600ms') onOpen=(action openCallback) onClose=(action closeCallback) closeOnOutsideClick=true}}
  <h1>Hello, world!</h1>
  <button {{action "close"}}>Close</button>
{{/remodal}}

<button data-remodal-target="myModal">Click me</button>

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

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

总结

Ember-remodal 是一个非常实用的弹窗组件库，它可以帮助开发者轻松地实现各种弹窗需求。在使用时，需要注意添加 {{remodal-container}} 组件和 data-remodal-target 属性，并给 {{remodal}} 组件添加各种属性设置。希望这篇教程对大家有所帮助。

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