Vue实现获取剪切板内容的两种方法

// 异步函数获取剪切板内容
async function getClipboardContent(ev: any) {
  try {
    ev.preventDefault()
    const clipboardText = await navigator.clipboard.readText();
    const str = clipboardText.split(' ')
    str.forEach(item => {
      if (item) {
        data.value.push({name: item})
      }
    })
    // 处理剪切板内容
    console.log(str);
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
    return null;
  }
}

      <a-row :gutter="3" style="height: 30px">
        <a-col :span="22">
          <a-input v-model="pasteValue" placeholder="请粘贴要生成的内容"/>
        </a-col>
        <a-col :span="1">
          <a-button @click="setData">
            <template #icon>
              <icon-copy/>
            </template>
          </a-button>
        </a-col>
      </a-row>
const setData = () => {
  const str = pasteValue.value.split(' ')
  str.forEach(item => {
    if (item) {
      data.value.push({name: item})
    }
  })
  pasteValue.value = ""
}

navigator.clipboard.writeText('Hello, World!')
  .then(() => {
    console.log('文本已复制到剪贴板！');
  })
  .catch(err => {
    console.error('复制失败: ', err);
  });

navigator.clipboard.readText()
  .then(text => {
    console.log('剪贴板中的文本: ', text);
  })
  .catch(err => {
    console.error('读取失败: ', err);
  });

<button id="copyButton">复制文本</button>
<button id="pasteButton">粘贴文本</button>
<p id="output"></p>
 
<script>
  document.getElementById('copyButton').addEventListener('click', () => {
    navigator.clipboard.writeText('Hello, Clipboard!')
      .then(() => {
        console.log('文本已复制！');
      });
  });
 
  document.getElementById('pasteButton').addEventListener('click', () => {
    navigator.clipboard.readText()
      .then(text => {
        document.getElementById('output').textContent = text;
      });
  });
</script>