复制粘贴组件

复制粘贴注意不同手机类型的兼容性；目前下面的方法兼容性比较好
index.vue

<template>
  <van-image
    :src="copyImg"
    width="18"
    height="18"
    @click.stop="onCopy(value)"
  />
</template>
<script lang="ts" setup>
import copyImg from "@/assets/image/copy.png"
import {useCopy} from "@/use";
defineProps({
  value:{
    type:String,
    default:""
  }
})
const {t} = useI18n();
const onCopy = (value)=>useCopy(value,t("复制成功"));
</script>

useCopy.ts

import {showToast} from "vant"

// 复制
export const useCopy = async(text: string, toast?: string) => {

    const fallbackCopyTextToClipboard = (text: string, toast?: string) => {
    // 1.创建textarea文本
      const textArea = document.createElement("textarea");
      textArea.value = text;

      // Avoid scrolling to bottom
      textArea.style.top = "-200";
      textArea.style.left = "0";
      textArea.style.position = "fixed";
      textArea.style.opacity = "0"

      document.body.appendChild(textArea);
      // textArea.focus();
      textArea.select();
      let msg;
      try {
        const successful = document.execCommand("copy");
        msg = successful ? toast ? toast : "复制成功" : "复制失败";
      } catch (err) {
        msg = "复制失败";
      }
      showToast(msg)
      document.body.removeChild(textArea);
    };

    const copyTextToClipboard = (text: string, toast?: string) => {
      if (!navigator.clipboard || !window.isSecureContext) {
        console.log("该浏览器支持剪贴板操作");
        fallbackCopyTextToClipboard(text, toast); // 个别浏览器不走该方法,比如ios手机；安卓走该方法
        return;
      }
      navigator.clipboard
        .writeText(text)
        .then(() => {
          console.log("ios手机支持navigator.clipboard");
          showToast(toast)
        })
        .catch(() => {
          fallbackCopyTextToClipboard(text, toast)
        });
    };
    copyTextToClipboard(text, toast);
      };

苹果复制

苹果手机上长按弹出复制等选项的功能通常与文本或者其他可操作元素的性质有关。如果你在某个应用或者网页上长按文本，通常会触发文字的选择操作，然后弹出复制、剪切、粘贴等选项。
然而，并非所有的文本或元素都支持这些操作。以下是一些可能导致长按无法弹出复制等选项的情况：
1.不可编辑文本：
如果文本或元素是只读的，即不可编辑的状态，可能就无法进行复制等操作。
2.图像或非文本元素：
长按通常只对文本内容有效，如果你长按的是图像、按钮或其他非文本元素，可能不会触发文字选择和相关的操作。
3.应用的限制：
有些应用可能选择禁用或限制特定操作，例如禁用复制粘贴功能，以保护内容的安全性或防止滥用。
4.网页设计：
在浏览器中，网页设计也可能影响长按操作的行为。一些网页可能使用自定义的触摸事件来替代浏览器默认的长按行为。
如果你在特定的应用或网页中遇到了长按无法弹出复制等选项的问题，建议检查文本是否可编辑，尝试在不同的上下文中进行长按操作，或者查看应用或网页的设置和帮助文档，了解是否存在相关的限制或配置。

总结：手机能够长按弹出复制的，只是针对input属性的标签；对于普通标签并不生效