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

看了几篇文章,但是只感觉这个比较言简意赅。具体的可以去博客看一下www.nut666.com?from=bky

1。

先安装

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

2。

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

3。

npm run dev  启动一下。

4。

main.js添加

import Vue

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

5。

<template id="t">
  <div class="container">
    <input type="textv-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',
  datafunction ({
    return {
      message'Copy These Text'
    }
  },
  methods{
    onCopyfunction (e{
      alert('You just copied: e.text)
    },
    onErrorfunction (e{
      alert('Failed to copy texts')
    }
  }
})
</script>
 
 
也可以放问我的博客https://www.nut666.com
posted @ 2018-03-23 16:57  Mr.Nut  阅读(6918)  评论(0编辑  收藏  举报