caseEditor/src/view/cameraVersionApp/download.vue

<template>
  <el-form
    :model="data"
    ref="form"
    label-width="120px"
    class="cameraVersion-from"
  >
    <el-form-item label="App下载地址">
      <div class="column">
        <el-input maxlength="30" v-model="data.url" disabled></el-input>
        <useClipboard v-slot="{ copy, copied }" :source="data.url">
          <el-button type="primary" style="margin-left: 20px" @click="copy()">
            {{ copied ? "已复制" : "复制" }}
          </el-button>
        </useClipboard>
    
      </div>
    </el-form-item>
    <div class="qrcode">
      <qrcode-vue :value="data.url" :size="300"></qrcode-vue>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { computed, ref, unref, watch, watchEffect } from "vue";
import { QuiskExpose } from "@/helper/mount";
import QrcodeVue from "qrcode.vue";
import { UseClipboard } from "@vueuse/components";

const props = withDefaults(
  defineProps<{
    url: string;
  }>(),
  {
    url: "",
  }
);
const data = ref<{
  url: string;
}>({
  url: "",
});

const form = ref();

watchEffect(() => {
  if (props.url) {
    data.value.url = props.url;
  }
});

defineExpose<QuiskExpose>({
  async submit() {},
});
</script>

<style scoped>
.icon-style {
  font-size: 20px;
  line-height: 50px;
}
.qrcode {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.column {
  display: flex;
  width: 100%;
}
</style>