Vue使用vue-clipboard2實現複製貼上功能

花鐺發表於2020-09-29

IE10以下不相容。

  1. 安裝:npm install --save vue-clipboard2
  2. 引入:
    import Vue from 'vue'
    import VueClipboard from 'vue-clipboard2'
    Vue.use(VueClipboard)
    
  3. 使用方法有兩種:
    // 方法一:
    <button v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError">複製</button>
    
    data(){
    	return {
    		message: '我是要複製的內容!'
    	}
    },
    methods: {
    	onCopy () {},
    	onError () {}
    }
    
    // 方法二
    <button  @click="onCopy">複製</button>
    data(){
    	return {
    		message: '我是要複製的內容!'
    	}
    },
    methods: {
    	onCopy () {
    		this.$copyText(this.message)
    			.then(()=>{})
                .catch(()=>{})
    	}
    }
    

相關文章