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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM