vue 复制到粘贴板组件 vue-clipboard2
2021/9/2 13:06:12
本文主要是介绍vue 复制到粘贴板组件 vue-clipboard2,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
官网(推荐):
https://www.npmjs.com/package/vue-clipboard2
安装
npm install --save vue-clipboard2
引入
import Vue from 'vue' import Clipboard from 'vue-clipboard2' Vue.use(Clipboard)
vue文件中使用
<template> <div> <button type="dashed" v-clipboard:copy="code" v-clipboard:success="copyAddress" v-clipboard:error="copyAddressError" >复制内容</button> </div> </template> <script> export default { name: "Home", data() { return { code : '20200829-20210324-20210329' }; }, methods:{ // 复制 copyAddress(e){ console.log(e,"copyAddress"); }, copyAddressError(e){ console.log(e,'copyAddressError'); } } }; </script>
vue文件方法中直接调用
<div id="app"></div> <template id="t"> <div class="container"> <input type="text" v-model="message"> <button type="button" @click="doCopy">Copy!</button> </div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy These Text' } }, methods: { doCopy: function () { this.$copyText(this.message).then(function (e) { alert('Copied') console.log(e) }, function (e) { alert('Can not copy') console.log(e) }) } } }) </script>
这篇关于vue 复制到粘贴板组件 vue-clipboard2的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-06vue 新建功能多条数据(还没和后端交互)还能看详情 数据是前端缓存到本地吗?-icode9专业技术文章分享
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode