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>
相关推荐
zhanghaha131417 分钟前
HTML系列教程:15_标签 全称 + 简写 超详细讲解(新手专用)
前端·html
zhanghaha131430 分钟前
HTML系列教程:14_HTML 表单与输入框 <form>、<input> 零基础详解
java·前端·javascript
IMPYLH31 分钟前
HTML 的 <samp> 元素
前端·网络·html
IMPYLH33 分钟前
HTML 的 <script> 元素
前端·html
weixin_493503675 小时前
Vue3 前端生成 PDF:会员证书与活动签到表的三种打印方案与踩坑记录
前端·pdf·状态模式
李少兄6 小时前
JavaScript 数据类型完全指南
开发语言·javascript·ecmascript
尾善爱看海8 小时前
前端算法与手写题集
前端·算法
徐小夕9 小时前
JitWord 4.0 万字分享:从协同工具到AI Word操作系统,聊聊3年产品创业史
前端·vue.js·后端
shmily麻瓜小菜鸡10 小时前
JS/TS 易踩坑知识点 — 模块化与工程化类
开发语言·javascript·ecmascript
萧鼎10 小时前
Python 高性能Web框架神器 FastAPI:自动生成API文、基于Pydant、异步请求处理全搞定
前端·python·fastapi