vue3中的使用案例

<template>
  <div class="itxst">
    <div>
      <input v-model="state.message" />
      <input class="btn" @click="copy" type="button" value="复制" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import Clipboard from "clipboard";

const state = reactive({
  message: "https://www.bian-jie.cn",
});
//复制方法，本例子是vue3环境下，同样在vue2中也可以使用
const copy = () => {
  let clipboard = new Clipboard(".itxst", {
    text: () => {
      //返回需要复制的字符串
      return state.message;
    },
  });
  clipboard.on("success", () => {
    clipboard.destroy();
  });
  clipboard.on("error", () => {
    clipboard.destroy();
  });
};
</script>
<style scoped>
</style>