npm 包 ember-zeroclipboard 使用教程

什么是 ember-zeroclipboard？

ember-zeroclipboard 是一款基于 Ember.js 的粘贴板工具，主要是为了让你在你的应用程序中轻松实现在一个 web 页 或应用程序中通过复制/粘贴文字，图片或URL 链接来共享数据。

它使用 zeroclipboard.js 这个底层库来实现其工作。

安装 ember-zeroclipboard

使用 npm 可以很容易地安装 ember-zeroclipboard。

npm install --save ember-zeroclipboard

使用 ember-zeroclipboard

首先，你需要使用 ember install 启动一个新的 ember 安装程序。

ember install ember-zeroclipboard

之后，在你的 Ember 组件中就可以使用 zeroclipboard 这个 mixin 了。

import Ember from 'ember';
import Zeroclipboard from 'ember-zeroclipboard/mixins/zeroclipboard';

export default Ember.Component.extend(Zeroclipboard, {
    // ...
});

在模板中，在你想要包含复制功能的元素中添加一个 data-clipboard-text 属性。

<button data-clipboard-text="copy me">Copy Me!</button>

最后，你还需要在你的组件中设置 afterCopy 回调，该回调在成功复制到剪贴板时触发。

import Ember from 'ember';
import Zeroclipboard from 'ember-zeroclipboard/mixins/zeroclipboard';

export default Ember.Component.extend(Zeroclipboard, {
    afterCopy() {
        alert('Copied!');
    }
});

使用示例

下面是一个完整的示例代码，其中包含了所有必要的组件和属性。

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

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

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

<button data-clipboard-text="{{clipboardText}}">Copy Me!</button>

小结

这是一个简单而又强大的工具，可以让你的用户更方便地复制/粘贴数据。它用于将某些元素和属性的值生成到剪贴板中，并向应用程序提供了另一种处理数据的机制，而不是以前的文本框和按钮。

如果您正在寻找一个更好的方式来实现粘贴板功能，那么 ember-zeroclipboard 是值得一试的。

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