筛选

简介

简介

clipboard.js是一款使用简单的粘贴复制插件,它不依赖于Flash或其他框架。
通过 html5 data标签属性实现粘贴复制,优点是简单无需写过多的代码。

在github拥有3万多颗星可见其优秀程度，我们将介绍在umd和vue环境下如何使用它。

github官方网站

https://github.com/zenorocha/clipboard.js
推荐内容

简介

clipboard.js是一款使用简单的粘贴复制插件,它不依赖于Flash或其他框架。
通过 html5 data标签属性实现粘贴复制,优点是简单无需写过多的代码。

在github拥有3万多颗星可见其优秀程度，我们将介绍在umd和vue环境下如何使用它。

github官方网站

https://github.com/zenorocha/clipboard.js

使用案例

在html页面中的使用案例

在线案例源码页面：可以查看、编辑、执行、下载、复制 在线案例源码页 >> 在线案例源码页 >> 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>clipboard例子</title> 
    <script src="https://php.bian-jie.cn/interface/staticDownload/clipboard/clipboard.min.js"></script>
</head>
<body style="padding:10px;">
    <input id="foo" value="https://www.bian-jie.cn"/>
    <!-- Trigger -->
    <input class="btn" id="btn" data-clipboard-target="#foo" type="button"  value="复制">
    <script>
        //初始化对象
        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();
            document.getElementById("btn").value="复制成功";
        });

        clipboard.on('error', function (e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
            document.getElementById("btn").value="复制失败";
        });
    </script> 
</body>
</html>

安装

安装方式

npm install clipboard --save

使用案例

text 自定义函数复制

clipboard.js方法高级使用方法,如果你不喜欢像之前一样设置html的属性来实现复制，clipboard.js通过了api方式实现更佳自由的方式来实现复制功能。
在线案例源码页面：可以查看、编辑、执行、下载、复制 在线案例源码页 >> 在线案例源码页 >> 
<!-- Trigger -->
<input id="btn1" type="button" onclick="copy('#btn1','复制内容1')" value="点击复制">
<input class="btn2" type="button" onclick="copy('.btn2','复制内容2')" value="点击复制">
<script>
   /* 自定义复制函数
    * obj 触发器元素对象或id、class
    * text 需要复制的内容
    */
  function copy(obj, text) {
    var clipboard = new ClipboardJS(obj, {
        text: function (trigger) {
            return text;
        }
    });

    clipboard.on('success', function (e) {
        e.clearSelection();
        //document.getElementById("msg").innerHTML = "复制成功";
    });

    clipboard.on('error', function (e) {
        //document.getElementById("msg").innerHTML = "复制失败";
    });
}
</script>

安装

引用方式 

<script src="https://www.itxst.com/package/clipboardjs/clipboard.min.js"></script>


<script src="//php.bian-jie.cn/interface/staticDownload/clipboard/clipboard.min.js"></script>
<script src="//php.bian-jie.cn/interface/staticDownload/clipboard/clipboard.js"></script>
import Clipboard from "clipboard"

使用案例

复制图片

clipboard.js 也可以复制图片到微信和word，复制到微信不能是https和base64格式，但是word、excel支持。
在线案例源码页面：可以查看、编辑、执行、下载、复制 在线案例源码页 >> 在线案例源码页 >> 
<div id="html">
    <!--复制到微信图片地址不能是https、也不能是base64格式 !-->
    <img src='http://www.baidu.com/img/bd_logo1.png' style='width:60px;'><br />
    <img src='http://www.baidu.com/img/bd_logo1.png' style='width:60px;'><br />
    【网站】www.itxst.com
</div>
<!-- Trigger -->
<input id="btn1" type="button" onclick="copy('#btn1')" value="点击复制">
<script>
    /* 自定义复制函数
        * obj 触发器元素对象或id、class
        * text 需要复制的内容
        */
    function copy(obj) {
        var clipboard = new ClipboardJS(obj, {
            target: function (trigger) {
                return document.getElementById("html");
            }
        });
        clipboard.on('success', function (e) {
            e.clearSelection();
            document.getElementById("msg").innerHTML = "复制成功";
        });

        clipboard.on('error', function (e) {
            document.getElementById("msg").innerHTML = "复制失败";
        });
    }
</script>

复制Base64图片

在线案例源码页面：可以查看、编辑、执行、下载、复制 在线案例源码页 >> 在线案例源码页 >> 
<div id="html">
    <!-- word、excel支持 !-->
    <img src='base64格式数据' style='width:50px;'><br /> 
    【搜索】复制图片
</div>
<!-- Trigger -->
<input id="btn1" type="button" onclick="copy('#btn1')" value="点击复制">
<script>
    /* 自定义复制函数
        * obj 触发器元素对象或id、class
        * text 需要复制的内容
        */
    function copy(obj, text) {
        var clipboard = new ClipboardJS(obj, {
            target: function (trigger) {
                return document.getElementById("html");
            }
        });
        clipboard.on('success', function (e) {
            e.clearSelection();
            document.getElementById("msg").innerHTML = "复制成功";
        });

        clipboard.on('error', function (e) {
            document.getElementById("msg").innerHTML = "复制失败";
        });
    }
</script>

在vue2 中使用 clipboard.js 复制功能

在手机中或web端复制粘贴是一个常用的功能，可以帮助用户方便的复制需要的内容，比如字符串或图片，本文将介绍在vue2中使用clipboard.js复制功能，在vue中使用其实和在普通的js中使用差别并不大，使用起来也是相当的方便。
安装方式
npm install clipboard --save

导入clipboard
import Clipboard from "clipboard"
在线案例源码页面：可以查看、编辑、执行、下载、复制 在线案例源码页 >> 在线案例源码页 >> 
<template>
  <div id="btn" @click="copy">复制</div>
</template>
<script>
//导入类库
import Clipboard from "clipboard";
export default {
  name: "copy",
  data() {
    return {
      msg: "https://www.bian-jie.cn",
    };
  },
  methods: {
    //复制方法
    copy: function () {
      let that = this;
      let clipboard = new Clipboard("#btn", {
        text: function (trigger) {
          //返回字符串
          return that.msg;
        },
      });
      clipboard.on("success", (e) => {
        //复制成功
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        //复制失败
        clipboard.destroy();
      });
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#btn {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 6px;
  background-color: #eee;
  color: #333;
  cursor: pointer;
}
#btn:active {
  background-color: #ddd;
  color: #666;
}
</style>

vue3中的使用案例

在线案例源码页面：可以查看、编辑、执行、下载、复制 在线案例源码页 >> 在线案例源码页 >> 
<template>
  <div class="itxst">
    <div>
      <input v-model="state.message" />
      <input class="btn" @click="copy" type="button" value="复制" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import Clipboard from "clipboard";

const state = reactive({
  message: "https://www.bian-jie.cn",
});
//复制方法，本例子是vue3环境下，同样在vue2中也可以使用
const copy = () => {
  let clipboard = new Clipboard(".itxst", {
    text: () => {
      //返回需要复制的字符串
      return state.message;
    },
  });
  clipboard.on("success", () => {
    clipboard.destroy();
  });
  clipboard.on("error", () => {
    clipboard.destroy();
  });
};
</script>
<style scoped>
</style>