Vue点击复制到剪切板

最新推荐文章于 2024-03-20 17:36:57 发布

不知道起啥名啊啊

最新推荐文章于 2024-03-20 17:36:57 发布

阅读量342

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_57660141/article/details/136404740

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、Vue2写法

安装（官网地址）

npm install --save vue-clipboard2

使用

//main.js
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)


//页面使用
<button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">Copy!</button>

二、Vue3写法

安装（官网地址）

npm install --save vue-clipboard3

or

yarn add vue-clipboard3

使用


//引入
import useClipboard from 'vue-clipboard3'
const { toClipboard } = useClipboard()

//使用
const copy = async () => {
  try {
    await toClipboard(location.href)
    console.log('Copied to clipboard')
  } catch (e) {
    console.error(e)
  }
}