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>
相关推荐
B站计算机毕业设计超人5 分钟前
计算机毕业设计SpringBoot+Vue.jst0甘肃非物质文化网站(源码+LW文档+PPT+讲解)
java·vue.js·spring boot·后端·spring·intellij-idea·课程设计
Ranye1239 分钟前
从 JS 到 Dart:语法基础
javascript·flutter·dart
烂蜻蜓40 分钟前
深入理解 Uniapp 中的 px 与 rpx
前端·css·vue.js·uni-app·html
Ama_tor42 分钟前
网页制作06-html,css,javascript初认识のhtml如何建立超链接
javascript·css·html
木亦Sam1 小时前
响应式网页设计中媒体查询的进阶运用
前端·响应式设计
diemeng11191 小时前
2024系统编程语言风云变幻:Rust持续领跑,Zig与Ada异军突起
开发语言·前端·后端·rust
烂蜻蜓1 小时前
Uniapp 中布局魔法:display 属性
前端·javascript·css·vue.js·uni-app·html
视觉CG1 小时前
【Viewer.js】vue3封装图片查看器
开发语言·javascript·vue.js
java1234_小锋2 小时前
一周学会Flask3 Python Web开发-redirect重定向
前端·python·flask·flask3
GDAL2 小时前
UniApp SelectorQuery 讲解
vue.js