|
|
@@ -1,19 +1,32 @@
|
|
|
<template>
|
|
|
<div class="login-qrcode-container">
|
|
|
- <div ref="qrcodeRef"></div>
|
|
|
+ <div ref="qrcodeRef" @click="handlePreview"></div>
|
|
|
<div class="font12 mt20 login-msg">
|
|
|
<i class="iconfont icon-saoyisao mr5"></i>
|
|
|
<span>{{ text }}</span>
|
|
|
</div>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="停车二维码"
|
|
|
+ align-center
|
|
|
+ center
|
|
|
+ append-to-body
|
|
|
+ width="500px"
|
|
|
+ draggable
|
|
|
+ v-model="state.visible"
|
|
|
+ destroy-on-close :show-close="true">
|
|
|
+ <div ref="dialog_qrcode_ref"></div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="Qrcode">
|
|
|
-import {ref, onMounted, nextTick} from 'vue';
|
|
|
+import {ref, onMounted, nextTick,reactive,onUnmounted} from 'vue';
|
|
|
import QRCode from 'qrcodejs2-fixes';
|
|
|
|
|
|
// 定义变量内容
|
|
|
const qrcodeRef = ref<HTMLElement | null>(null);
|
|
|
+const dialog_qrcode_ref = ref<HTMLElement | null>(null);
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
@@ -26,6 +39,10 @@ const props = defineProps({
|
|
|
|
|
|
})
|
|
|
|
|
|
+const state = reactive({
|
|
|
+ visible:false
|
|
|
+})
|
|
|
+
|
|
|
// 初始化生成二维码
|
|
|
const initQrcode = () => {
|
|
|
nextTick(() => {
|
|
|
@@ -37,12 +54,32 @@ const initQrcode = () => {
|
|
|
colorDark: '#000000',
|
|
|
colorLight: '#ffffff',
|
|
|
});
|
|
|
+
|
|
|
+
|
|
|
});
|
|
|
};
|
|
|
+
|
|
|
+const handlePreview = () => {
|
|
|
+ state.visible =true;
|
|
|
+ nextTick(()=>{
|
|
|
+ (<HTMLElement>dialog_qrcode_ref.value).innerHTML = '';
|
|
|
+ new QRCode(dialog_qrcode_ref.value, {
|
|
|
+ text: `${props.link}`,
|
|
|
+ width: 400,
|
|
|
+ height: 400,
|
|
|
+ colorDark: '#000000',
|
|
|
+ colorLight: '#ffffff',
|
|
|
+ });
|
|
|
+ })
|
|
|
+}
|
|
|
// 页面加载时
|
|
|
onMounted(() => {
|
|
|
initQrcode();
|
|
|
});
|
|
|
+
|
|
|
+onUnmounted(()=>{
|
|
|
+ state.visible =false;
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|