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>
相关推荐
Code_Dragon1 分钟前
最近遇到的bug
linux·前端
言兴1 分钟前
从输入 URL 到页面显示:深入理解浏览器缓存机制
前端·javascript·面试
讨厌吃蛋黄酥2 分钟前
前端跨域难题终结者:从JSONP到CORS,一文搞定所有跨域问题!
前端·javascript·后端
阿星做前端3 分钟前
coze源码解读:项目启动
前端·javascript
言兴3 分钟前
面试题之解析“类组件”与“组件”的本质
前端·javascript·面试
Jessica07063 分钟前
【Vue3+Element Plus】修改el-table树形结构的默认箭头样式
前端
excel5 分钟前
前端布局避坑指南:Grid、Flex 与传统 CSS2 布局的优缺点全解析
前端
潘小安6 分钟前
『译』2025 年 MCP 工具终极指南:6 款颠覆性 AI 开发工具,让你的生产力提升 10 倍
前端·ai编程·mcp
小林的技术分享6 分钟前
关于排查 Flutter 3.27.0 版本Android端无法禁用Impeller引擎的过程记录
前端·flutter
南篱8 分钟前
React 受控 vs 非受控组件:核心概念解析
前端·面试