当前位置：首页 > VUE

vue按钮实现复制

2026-02-17 08:10:56VUE

实现按钮复制功能的方法

在Vue中实现按钮复制功能，可以通过以下几种方式：

vue按钮实现复制

使用原生JavaScript的Clipboard API

<template>
  <button @click="copyText">复制文本</button>
</template>

<script>
export default {
  methods: {
    copyText() {
      const textToCopy = '要复制的文本内容';
      navigator.clipboard.writeText(textToCopy)
        .then(() => {
          console.log('文本已复制到剪贴板');
        })
        .catch(err => {
          console.error('复制失败:', err);
        });
    }
  }
}
</script>

使用document.execCommand方法（兼容旧浏览器）

<template>
  <button @click="copyText">复制文本</button>
</template>

<script>
export default {
  methods: {
    copyText() {
      const textToCopy = '要复制的文本内容';
      const textarea = document.createElement('textarea');
      textarea.value = textToCopy;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      console.log('文本已复制');
    }
  }
}
</script>

使用vue-clipboard2插件

安装插件：

vue按钮实现复制

npm install vue-clipboard2

使用示例：

<template>
  <button v-clipboard:copy="textToCopy">复制文本</button>
</template>

<script>
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

export default {
  data() {
    return {
      textToCopy: '要复制的文本内容'
    }
  }
}
</script>

使用Element UI的Message组件提供反馈

<template>
  <button @click="copyText">复制文本</button>
</template>

<script>
import { Message } from 'element-ui';

export default {
  methods: {
    copyText() {
      const textToCopy = '要复制的文本内容';
      navigator.clipboard.writeText(textToCopy)
        .then(() => {
          Message.success('复制成功');
        })
        .catch(err => {
          Message.error('复制失败');
          console.error(err);
        });
    }
  }
}
</script>

处理复制动态内容的情况

<template>
  <div>
    <input v-model="inputText" />
    <button @click="copyInputText">复制输入内容</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    }
  },
  methods: {
    copyInputText() {
      if (!this.inputText) {
        alert('请输入要复制的内容');
        return;
      }
      navigator.clipboard.writeText(this.inputText)
        .then(() => {
          console.log('复制成功');
        })
        .catch(err => {
          console.error('复制失败:', err);
        });
    }
  }
}
</script>