vue實現複製功能(專案使用)
阿新 • • 發佈:2018-11-10
安裝依賴
npm install --save vue-clipboard2
用法:
import Vue
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
Demo:
<template id="demo"> <div class="container"> <input type="text" v-model="message"> <button type="button" v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError">複製</button> </div> </template> <script> new Vue({ el: '#app', template: '#demo', data: function () { return { message: '啦啦啦,這是複製的內容!' } }, methods: { onCopy:function (e) { console.log('你剛剛複製: ' + e.text) }, onError: function (e) { console.log('無法複製文字!') } } }) </script>
後記:vue簡直把懶惰發揮到了極致,為棒棒的自己點贊