android-cloud-H5/pages/test/clipboard.vue

<template>
  <div class="">
    <div v-if="hasClipboard" class="">
      <div class="">window.navigator.clipboard</div>
      <v-btn @click="writeText()">写入剪贴板</v-btn>
      <v-btn @click="readText()">读取剪贴板</v-btn>
    </div>
    <div v-else class="">
      <span>当前环境不支持 window.navigator.clipboard</span>
    </div>
  </div>
</template>

<script>
export default {
  auth: false,
  data() {
    return {
      hasClipboard: false,
    };
  },
  mounted() {
    this.hasClipboard = !!window.navigator.clipboard;
  },
  methods: {
    async writeText() {
      try {
        const now = Date.now();
        await navigator.clipboard.writeText(now);
        this.$toast.success(`写入成功 ${now}`);
      } catch (error) {
        this.$toast.error(`写入失败 ${error.message}`);
      }
    },
    async readText() {
      try {
        const clipText = await navigator.clipboard.readText();
        this.$toast.success(`读取成功 ${clipText}`);
      } catch (error) {
        this.$toast.error(`读取失败 ${error.message}`);
      }
    },
  },
};
</script>