Vue组件-文本复制

码上有源

已于 2022-05-22 11:15:06 修改

阅读量314

点赞数

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

于 2022-05-22 11:13:44 首次发布

本文链接：https://blog.csdn.net/zhweixi/article/details/124908279

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

功能说明

单击可以自动复制的span标签

用法

<template>
	<text-copy>点击我自动复制</text-copy>
</template>

代码

<template>
  <div>
    <span :id="id" @click="copy">
      <slot />
    </span>
  </div>
</template>

<script>
export default {
  name: 'TextCopy',
  data() {
    return {
      id: ''
    }
  },
  created() {
    this.id = 'text' + Math.random()
  },
  methods: {
    copy() {
      const input = document.createElement('input')
      document.body.appendChild(input)
      input.setAttribute('value', document.getElementById(this.id).innerText)
      input.select()
      if (document.execCommand('copy')) {
        this.$message.success('已复制')
      }
      document.body.removeChild(input)
    }
  }
}
</script>