记录:vue复制粘贴功能插件-Vue-clipboard

1,233 阅读1分钟

安装插件并引入

npm i --save vue-clipboard2
或
yarn add  vue-clipboard2

在main.js文件中挂载插件

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

在页面应用:

<template>
    <div >
      <van-button v-clipboard:copy="copyVal"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"  block type="info" @click="">复制</van-button>
    </div>
</template>
<script>
	export default {
	    components: {},
	    data() {
		    return {
		    	copyVal:''
		    }
	    },
	    mounted(){},
	    methods:{
			onCopy: function (e) {
	            console.log(e)
	            alert("复制成功") //在ipad上弹出框不起作用
	            //或者 this.$toast.success("复制成功") //左右设备均可弹出
	        },
	        onError: function (e) {
	            console.log(e)
	            alert('Failed to copy texts')
	        }
		}
    }
</script>

原文链接:blog.csdn.net/weixin_4239…