Vue前端复制文本功能vue-clipboard2

最新推荐文章于 2025-02-27 11:10:07 发布

孔彬的技术专栏

最新推荐文章于 2025-02-27 11:10:07 发布

阅读量2.4k

点赞数

分类专栏： # Vue 文章标签： vue-clipboard2 vue复制文本前端复制到剪贴板 vue复制

本文链接：https://blog.youkuaiyun.com/a787373009/article/details/102614291

版权

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用vue-clipboard2插件在Vue.js项目中实现文本复制功能。通过简单的步骤导入并使用该插件，可以轻松地将文本复制到用户的剪贴板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

复制文本控件使用的是vue-clipboard2,可方便的实现复制需求。

源码工程地址：Clipboard

效果图

在这里插入图片描述

安装

npm install vue-clipboard2

使用方式

步骤一：

import ClipBoard from 'vue-clipboard2'

export default ({Vue}) => {
  Vue.use(ClipBoard)
}

步骤二：

export default {
  name: 'clipboard_index',
  data: () => ({
    value: '复制文本控件使用的是vue-clipboard2,可方便的实现复制需求。'
  }),
  methods: {
    copy_value() {
      this.$copyText(this.value).then(() => {
        this.$q.ok('已经复制到粘贴板！')
      }, () => {
        this.$q.err('复制失败！')
      })
    },
  },
  render(h) {
    return h('div', {
      staticClass: 'row no-wrap q-pa-sm'
    }, [
      h('div', {
        staticClass: 'pp-border-4 q-pa-sm text-tertiary test-weight-medium'
      }, [
        this.value
      ]),
      h('q-btn', {
        props: {
          label: '点击复制',
          flat: true,
          color: 'primary'
        },
        on: {
          click: () => {
            this.copy_value()
          }
        }
      })
    ])
  }
}

插件地址：vue-clipboard2