h5在手机端实现简单复制

最新推荐文章于 2022-09-27 16:26:36 发布

weixin_30652491

最新推荐文章于 2022-09-27 16:26:36 发布

阅读量858

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sklhtml/p/9361197.html

版权

<a href="https://blog-static.cnblogs.com/files/ruanqin/clipboard.min.js">下载clipborrdjs</a>　

下载地址：https://blog-static.cnblogs.com/files/ruanqin/clipboard.min.js

html中：

　　<a href="javascript:;" @click="copyClick" class="copy" data-clipboard-text="要让复制的内容" data-clipboard-action="copy" >点击复制ID</a>

</div>

在js中:

new Vue({
　　el: '#app',
　　data: function () {
　　　　return {
　　　　}
　　},
　　methods: {
　　　　copyClick: function(){
　　　　　　var clipboard = new Clipboard("#copyBtn");
　　　　　　clipboard.on('success', function(e) {
　　　　　　　　MINT.Toast("复制成功:"+e.text);
　　　　　　});
　　　　　　clipboard.on('error', function(e) {
　　　　　　　　MINT.Toast("请重试");
　　　　　　});
　　　　}
　　},
　　created: function(){
　　　　var that = this;
　　})

如此简单的就实现复制了

在vue中使用

1. 引入clipboard.js

　　npm install clipboard --save

2. 在需要使用的组件中import

　　 import Clipboard from 'clipboard';

3. 添加需要复制的内容　　

4. methods中写入copy方法

　　copy() { 　　

　　　　let that = this;
　　　　let clipboard = new Clipboard('#copyBtn')
　　　　clipboard.on('success', e => {
　　　　　　that.$toast("复制成功:"+e.text)
　　　　　　clipboard.destroy()
　　　　})
　　　　clipboard.on('error', e => {
　　　　　　console.log('该浏览器不支持自动复制')
　　　　　　clipboard.destroy()
　　　　})

}

转载于:https://www.cnblogs.com/sklhtml/p/9361197.html