首页 > 其他分享 >vue3 点击复制

vue3 点击复制

时间:2024-04-02 18:33:20浏览次数:28  
标签:复制到 clipboard href text 点击 复制 vue3

npm install clipboard --save  //下载
import Clipboard from 'clipboard'//使用页面引入
js:
const copyText = async () => { const text = window.location.href // 设置要复制的文本 let clipboard = new Clipboard('.buttoncopy', { text: () => text }) clipboard.on('success', (e) => { alert('已成功复制到剪贴板,请打开浏览器,在地址栏粘贴访问') e.clearSelection() // 清除选中状态 }) clipboard.on('error', function (e) { text1.value = window.location.href alert('无法复制到剪贴板,请长按下边链接手动复制') }) }
html:
<p class="buttoncopy" @click="copyText">点此复制链接</p>

 

标签:复制到,clipboard,href,text,点击,复制,vue3
From: https://www.cnblogs.com/wulicute-TS/p/18111266

相关文章

  • Vue3集成wangeditor5
    参考连接https://www.wangeditor.com/v5/for-frame.html#使用-1效果图相关依赖<template> <div> <divstyle="border:1pxsolid#ccc;margin-top:10px"> <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig......
  • vue3+ts项目配置别名
    说明在项目开发中,需要通过配置别名来方便开发读取文件目录。配置文件vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}from"path";constpathSrc=resolve(__dirname,"src");exportdefault......
  • 复制浏览器请求到Postman
    1.复制链接F12打开开发者模式 2.导入到Postman   如上图所示,参数及cookie等信息都被导入进来。......
  • Vue3连接mqtt订阅消息
    Vue3中使用以及订阅没有安装可使用npminstallmqtt--save(暂时使用了npminstallmqtt@3.0.0)页面引入引用mqtt库不要直接引用mqtt会报错importmqttfrom'mqtt/dist/mqtt'代码:1.获取动态配置(关于mqtt的动态配置)<script>////引入mqttimportmqttfrom"mqt......
  • autohotkey的使用心得, 和最近写的点击屏幕三次自动算夹角的工具.
    https://github.com/zhangbo2008/arc_tools_by_click_mouse_three_times autohotkey如何debug: vscode里面安装上,autohotkeypuls即可. 然后直接运行我们写的1.ahk,他就会自动找autohotkey.exe的程序来debug了. autohotkey的赋值写法: 传统方法 使用百分号括住变量名......
  • bottom tap新增一个自定义icon,点击弹出Modal
    我想实现的效果是这样的:    注意:Modal的背景还是其他的tab,并没有变化,等Modal消失后Screen还是原来的screen。Solution:   因为中间的自定义图标按钮需要有一部分在Tab中,所以还是把icon作为tab中的一个screen的,于是就借用:tabBarButton来实现,参考了一些文章,都是把M......
  • 微信小程序点击选择拨打多个电话
     wxml内<viewclass='product-contact'wx:if="{{contact!=''}}"data-contact1="{{contact1}}"data-contact2="{{contact2}}"catchtap='makeCall'>立即联系</view>js内data:{contact:&......
  • Vue2 和 Vue3 中的 v-model 的区别#记录
    vue3对v-model的语法进行了改动。vue2中有两种方式实现数据的双向绑定(组件与外部数据的双向绑定),一种是使用v-model,另一种是使用v-bind.sync修饰符。vue2中的v-model,主要是进行value属性的绑定和input事件的派发。<ChildComponentv-model="pageTitle"/>//等价于<Child......
  • vue3从精通到入门9:计算属性computed
    在Vue3中,computed 是一个用于创建计算属性的工具,它基于组件的响应式依赖进行复杂的计算,并返回一个新的响应式引用。计算属性是Vue的一个核心概念,它提供了一种声明式的方式来执行基于其依赖的响应式数据的计算。computed使用:计算属性与常规属性类似,但是它们是基于它们......
  • vue3 设置el-dialog height超过滚动条
     方法一:<stylescoped>::v-deep.el-dialog.el-dialog-body{height:500px;overflow-y:auto;}</style> 如果要设置动态的高度话,则要在setup里面设置 <script>exportdefaultdefineComponent({setup:{constcssContent=ref({heigh......