首页 > 其他分享 >vue3 + vue-clipboard3 复制文本到剪切板

vue3 + vue-clipboard3 复制文本到剪切板

时间:2023-03-17 11:45:50浏览次数:37  
标签:vue text vue3 复制 剪切板 文本 clipboard3

1.安装

yarn add vue-clipboard3

2.引入

import useClipboard from 'vue-clipboard3';

3.html部分

<n-button tertiary type="primary" ref="copyBtn" @click="copyPath()">
                复制地址
              </n-button>

4.js部分

复制代码
<script setup lang="ts">
//一键复制
const { toClipboard } = useClipboard();
const copyPreviewPath = async (text?: string) => {
  try {
    await toClipboard('这里传入要复制的文本内容');
    window["$message"].success(text || "复制成功!");
  } catch (e) {
    console.error(e);
    window["$message"].error("复制失败!您的浏览器不支持复制功能!");
  }
};
</script>

标签:vue,text,vue3,复制,剪切板,文本,clipboard3
From: https://www.cnblogs.com/wwappb678244233/p/17226122.html

相关文章

  • VUE父子组件生命周期执行顺序
    组件关系,HomeView与AboutView为同级,HelloWorld为HomeView的子组件刚进HomeView页面时更新HomeView页面更新HelloWorld页面切换到AboutView......
  • 关于Vue3+ts引入文件使用alias别名@时报错问题,process is not defined
    如题,解决办法:一、首先确保有两个文件:   tsconfig.json  vite.config.ts(注:如果是vue.config.js,则手动改为vite.config.js)二、在ts.config.json中修改{"comp......
  • 万字血书Vue—走近Vue
    Vue是什么?Vue是一套用于构建用户界面的渐进式JavaScript框架构建用户界面:用vue往html页面中填充数据渐进式:Vue可以自底向上逐层的应用,从轻量小巧核心库的简单应用,......
  • vue3 js 学习笔记
    Vue3-js学习笔记目录Vue3-js学习笔记目录前言reactive数据绑定事件绑定生命函数周期计算属性-computedpropsemit-自定义事件ref-获取元素及子组件watchvu......
  • vue转uniapp踩坑记录
    1、subpackage下的组件其他包不能import2、tarbar下的路由页面mounted方法只在小程序初始化的时候调用一次,下次再进入时调用onshow方法3、使用表单组件设置必填项时,必须......
  • electron-ant-design-vue 问题汇总
    问题一:Invalidattempttospreadnon-iterableinstance.Inordertobeiterable,non-arrayobjectsmusthavea[Symbol.iterator]()method.  解决办法:data-......
  • 下载vue-element-admin时的问题
    1、vue-element-admin官网地址介绍|vue-element-admin(gitee.io)2、转载于(安装vue-element-admin时npminstall报错:Pleasemakesureyouhavethecorrectaccessri......
  • Vue.js 收集表单数据
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>收集表单数据</title> <scripttype="text/javascript"src="../js/vue.js"></script> </h......
  • Vue.js 总结Vue监视数据
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>总结数据监视</title> <style> button{ margin-top:10px; } </style> <!--......
  • Vue.js 更新时的一个问题&Vue监测数据改变的原理(p33~p34)
    视频33视频34更新时的一个问题<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>更新时的一个问题</title> <scripttype="text/javascript"src......