vue利用vue-clipboard2实现剪切板的功能_坚果的个人博客-Nut

坚果的个人博客

vue利用vue-clipboard2实现剪切板的功能 / Bug

1年前 阅读 / 142 来源 / 原创 文 / 管理员

之前写过这个小功能看了网上一些文档,都写的比较繁琐,所以今天整理出一些简单的代码,摆出来,留以后使用。

直接简洁上代码


一、安装

npm install --save vue-clipboard2 or use dist/vue-clipboard.min.js 


二、检查

如果是npm,检查package.json是否安装成功。


三、启动

npm run dev


四、引入

main.js添加

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


五、执行

<template id="t">
  <div class="container">
    <input type="text" v-model="message">
    <button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">Copy!</button>
  </div>
</template>
<script>
new Vue({
  el: '#app',
  template: '#t',
  data: function () {
    return {
      message: 'Copy These Text'
    }
  },
  methods: {
    onCopy: function (e) {
      alert('You just copied: ' + e.text)
    },
    onError: function (e) {
      alert('Failed to copy texts')
    }
  }
})
</script>



1

评论列表
共1条评论