用vue实现复制到剪切板 clipboard.js

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39527734/article/details/79782847

用vue实现复制到剪切板

通过在网上查看比较,发现使用clipboard.js是比较理想的手段:1,不用flash,2,插件很小,压缩后只有3kb。

关于clipboard.js,官方文档请戳:https://clipboardjs.com。由于文档是英文的,下面我会简单解释一下具体使用方法。其实目前已经有根据该插件封装好的vue插件了,由于项目中只有一个地方用到该功能,我就没有去考虑封装插件的情况。不过,就算不用封装插件,在vue中使用起来也是很简单,基本上只要按照官网文档的使用方法来就ok。如果有踩到坑的欢迎留言补充。

一、下载:

二、引入:

*戳:https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers选择一个CDN资源或直接使用下载好的文件:

<script src="dist/clipboard.min.js" ></script>

三、使用:

  • 当需要复制的内容在另一个dom上,比如:
    <p>链接:<a>http://www.baidu.com </a><button>复制</button></p>
    通过点击button来复制前面的链接时,使用方法如下:

    html部分:

    <!-- Target -->
    <p>链接:<a id="targetId">http://www.baidu.com </a>
    <!-- Trigger -->
    <button class="btn" data->clipboard-target="#targetId">复制</button>
    </p>

    js部分:

    通过传递dom的选择器或html等来初始化一个实例

    var clipboard = new ClipboardJS('.btn');

  • 当需要剪切操作时,只需要为button指定data-clipboard-action属性为cut即可。该属性默认值是copy

    html部分修改为:

    <!-- Target -->
    <textarea id="bar">Mussum ipsum cacilds...</textarea>
    <!-- Trigger -->
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
     Cut to clipboard
    </button>

    注意:cut属性只能用于input textarea这类target元素上

  • 当然,如果复制的内容就是触发元素本身呢?可以使用data-clipboard-text属性。

    html部分修改为:

    <!-- Trigger -->
    <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
    </button>

四、事件

为提高用户友好性,你可能需要给用户一些操作反馈或错误提示,或者捕获触发事件的dom对象,clipboard.js提供了‘success’ ‘error’事件。

var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection(); //该方法用于清除文本选中后的默认样式(一般是文本区域出现背景色)
});
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

五、高阶用法

如果你不想像前面提到的一样修改现有的HTML,可以使用clipboard.js提供的API。只需要声明函数,处理逻辑然后返回需要的值。比如,

  • 如果你想动态的设置target html,你需要返回一个Node:

    new ClipboardJS('.btn', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
  • 如果你想动态设置被复制的内容,需要返回string:

    new ClipboardJS('.btn', {
        text: function(trigger) {
            return trigger.getAttribute('aria-label');
        }
    });
  • 如果你使用bootstrap 模态框,或者其他插件,当当前focus的元素改变时,需要手动指定当前container为focused的元素:

    new ClipboardJS('.btn', {
        container: document.getElementById('modal')
    });
  • 如果是在单页面应用里,为了更精确的处理dom在不同生命周期的逻辑,你需要销毁创造的事件和实例,使用下面方式:

    var clipboard = new ClipboardJS('.btn');
    clipboard.destroy();

六、浏览器支持

clipboard.js能被以下浏览器支持:
* chrome 42+
* IE edge 12+
* Firefox 41+
* IE 9+
* Opera 29+
* Safari 10+

为了有更好的用户体验,在使用时,可以在success回调里提示‘复制/剪切成功’,在error回调里提示:‘请按Ctrl + C进行复制’,因为此时的内容已经被选中了。

另外:你也可以通过执行ClipboardJS.isSupported()来判断浏览器是否支持clipboard.js,如果不支持,您可以将复制/剪切按钮从页面上隐藏。


以上是对clipboard.js的使用介绍。基本就是对官方文档的翻译。我在项目里只用到了基础的用法,还没有尝试高阶用法。所以解释的可能不是很到位。欢迎有用到的同学一块交流学习。

展开阅读全文

没有更多推荐了,返回首页