vue项目如何实现剪切板功能--vue-clipboard2

1、安装vue-clipboard2插件：npm install --save vue-clipboard22、main.js添加import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)3、copy组件：message绑定需要复制的文本/onCopy复制成功回调/onError复制失败回调，在需要复制的地方调用v-clipboa.

今天也在写bug

5809人浏览 · 2018-05-25 17:27:55

今天也在写bug · 2018-05-25 17:27:55 发布

1、安装vue-clipboard2插件：

npm install --save vue-clipboard2

2、main.js添加

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

3、copy组件：message绑定需要复制的文本/onCopy复制成功回调/onError复制失败回调，在需要复制的地方调用

v-clipboard:copy="message"

　　v-clipboard:success="onCopy"

　　v-clipboard:error="onError"

另外补充：

原生js实现点击按钮，复制文本框中的的内容

<body>
    <textarea cols="20" rows="10" id="test">用户定义的代码区域</textarea>
    <input type="button" onClick="copyUrl2()" value="点击复制代码" />
</body>
<script type="text/javascript">
function copyUrl2(){
    var Url2=document.getElementById("test");
    Url2.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    alert("已复制好，可贴粘。");
}
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^