vue 一键复制文本内容 clipboard
2021/6/4 18:23:22
本文主要是介绍vue 一键复制文本内容 clipboard,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、安装clipboard
npm install clipboard --save
二、引入
1、全局引入
import Clipboard from 'clipboard'; Vue.prototype.Clipboard=Clipboard;
2、单页面引入
import Clipboard from "clipboard";
3、:data-clipboard-text 中即为要复制的内容
4、完整代码
<template> <div class="clipboard-wrap"> <!-- copyText是要复制的内容 --> <p class="copy-btn" @click="copyUrl" :data-clipboard-text="copyText">【复制链接】</p> <p>{{copyText}}</p> </div> </template> <script> import Clipboard from 'clipboard'; // 点击复制文本 export default { data() { return { copyText: '骑上我的小摩托' } }, methods: { // 复制链接 copyUrl() { // 填写点击事件绑定的class名 let clipboard = new Clipboard(".copy-btn"); clipboard.on("success", e => { this.$toast('复制成功!'); // 释放内存 clipboard.destroy(); }); }, } } </script>
这篇关于vue 一键复制文本内容 clipboard的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 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
- 2024-03-13vuex-persist