v-clipboard vue的复制小组件

安装插件并引入

shell 复制代码
npm i --save vue-clipboard2

在 main.js 文件中挂载插件

js 复制代码
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

在页面应用:

html 复制代码
<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>
相关推荐
enoughisenough1 分钟前
浏览器判断控制台是否开启
前端
Moment9 分钟前
当前端开始做 Agent 后,我才知道 LangGraph 有多重要❗❗❗
前端·后端·面试
竹林81813 分钟前
RainbowKit 快速集成多链钱包连接:从“连不上”到丝滑切换的踩坑实录
前端·javascript
小蜜蜂dry20 分钟前
nestjs实战-登录、鉴权(一)
前端·后端·nestjs
农夫山泉不太甜21 分钟前
WebSocket与SSE技术方案选型对比分析
前端
重阳微噪1 小时前
受够了空格翻页?我写了一个 Chrome 自动滚动插件,让你真正沉浸式阅读
前端
Ruihong1 小时前
你的 Vue 3 reactive(),VuReact 会编译成什么样的 React?
vue.js·面试
Awu12271 小时前
🍎用 pretext 搞定输入框动态宽度:一个困扰了我三天的 CSS 问题
前端
Ruihong1 小时前
你的 Vue 3 ref(),VuReact 会编译成什么样的 React?
vue.js·面试
一 乐1 小时前
酒店预订|基于springboot + vue酒店预订系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·酒店预订系统