Vue.js实现复制到粘帖板功能

黄良钵

分类: 程序开发 126 0

插件官网:https://www.npmjs.com/package/vue-clipboard2

使用vue-clipboard2插件,首先安装插件:

  1. npm install --save vue-clipboard2

对于vue-cli用户:

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

对于独立使用:

  1. <script src="vue.min.js"></script>
  2. <!-- 必须在vue.js之后放置这一行 -->
  3. <script src="dist/vue-clipboard.min.js"></script>

template

  1. <template id="demo">
  2.   <div class="container">
  3.     <input type="text" v-model="message">
  4.     <button type="button"
  5.      v-clipboard:copy="message"
  6.      v-clipboard:success="onCopy"
  7.      v-clipboard:error="onError">复制</button>
  8.   </div>
  9. </template>

script

  1. <script>
  2. new Vue({
  3.   el: '#app',
  4.   template: '#demo',
  5.   data: function () {
  6.     return {
  7.       message: '啦啦啦,这是复制的内容!'
  8.     }
  9.   },
  10.   methods: {
  11.     onCopy: function (e) {
  12.       console.log('你刚刚复制: ' + e.text)
  13.     },
  14.     onError: function (e) {
  15.       console.log('无法复制文本!')
  16.     }
  17.   }
  18. })
  19. </script>

 

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
Vue、复制

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “Vue.js实现复制到粘帖板功能”

Loading...