功能说明

很多时候，对于一些字段，需要提供方便快捷的复制功能，如 url地址等，可以把这个功能封装为一个vue组件。

代码

<template>
  <div class="flex items-center space-x-1" title="点击文本进行复制">
    <span ref="textRef" @click="handleClick" class="cursor-copy">{{ modelValue }}</span>
    <el-icon @click="handleClick" class="cursor-pointer"><CopyDocument /></el-icon>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { CopyDocument } from "@element-plus/icons-vue";
const props = defineProps<{
  modelValue: string;
}>();
const textRef = ref<HTMLElement>();

const handleClick = () => {
  if (textRef) {
    selectAllText();

    // 执行复制命令
    navigator.clipboard.writeText(props.modelValue).then(() => {
      ElMessage.success("复制成功");
    });
  }
};

const selectAllText = () => {
  // 全选文字
  let selection = window.getSelection();
  let range = document.createRange();
  range.selectNodeContents(textRef.value!);
  selection?.removeAllRanges();
  selection?.addRange(range);
};
</script>

依赖

1. element-plus
2. @element-plus/icons-vue
3. vue3