<template>
  <div class="home">
    home page
    <p>{{ str }}</p>
    <a-button
      type="primary"
      @click="copyHandle"
    >
      复制
    </a-button>
  </div>
</template>
<script lang="ts" setup>
const str = ref('这是一段可以点击按钮复制的文字')
const { text, copy, copied, isSupported } = useClipboard({ source: str })
const copyHandle = () => {
  if (!isSupported) {
    alert('不支持复制')
    return
  }
  copy()
}
watch(copied, (v) => {
  if (v) {
    alert(`复制成功，内容为：${text.value}`)
  }
})

</script>
<style scoped>
.home {
  font-size: 46px;
}
</style>
