114 lines
2.2 KiB
Vue
114 lines
2.2 KiB
Vue
<template>
|
|
<main class="qrcode">
|
|
<div class="form">
|
|
<input
|
|
type="text"
|
|
v-model="data.value"
|
|
placeholder="请在这里输入要生成的内容！"
|
|
@change="changeValue"
|
|
/>
|
|
<JImageUpload
|
|
text="上传LOGO"
|
|
ref="uploadRef"
|
|
v-model:value="data.logoImage"
|
|
@change="upFile"
|
|
/>
|
|
</div>
|
|
|
|
<div class="code" ref="code">
|
|
<QRCodeVue3
|
|
margin="5"
|
|
width="400"
|
|
height="400"
|
|
:key="qrCodeKey"
|
|
:value="data.value"
|
|
:logo="data.logoImage"
|
|
/>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script lang="ts" name="qrcode" setup>
|
|
import {computed, nextTick, reactive, ref} from "vue";
|
|
import { QRCodeVue3 } from '/@/components/QrcodeVue3';
|
|
import { JImageUpload } from '/@/components/Form/index';
|
|
import image from "@/assets/images/logo.png";
|
|
|
|
const uploadUrl = ref('');
|
|
const data = reactive({
|
|
value: 'www.baidu.com',
|
|
logoImage: image,
|
|
})
|
|
|
|
// const qrCodeKey = ref(0);
|
|
|
|
const qrCodeKey = computed(()=>data.value.length + data.logoImage.length);
|
|
// console.log(qrCodeKey.value);
|
|
|
|
function upFile(){
|
|
// console.log(data.logoImage);
|
|
// qrCodeKey.value = qrCodeKey.value + 1;
|
|
// console.log(qrCodeKey.value);
|
|
}
|
|
|
|
function changeValue(){
|
|
// qrCodeKey.value = qrCodeKey.value + 1;
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
.qrcode {
|
|
.form {
|
|
margin: 30px auto;
|
|
width: 86%;
|
|
|
|
input {
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
width: 80%;
|
|
height: 50px;
|
|
font-size: 18px;
|
|
border: 1px solid #767676;
|
|
border-radius: 6px 0 0 6px;
|
|
}
|
|
|
|
button {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
width: 20%;
|
|
height: 50px;
|
|
font-size: 18px;
|
|
vertical-align: top;
|
|
color: white;
|
|
background: #42b983;
|
|
border: 1px solid #767676;
|
|
border-radius: 0 6px 6px 0;
|
|
border-left: none;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
|
|
input {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.code {
|
|
margin: auto;
|
|
padding: 8px;
|
|
width: 360px;
|
|
height: 360px;
|
|
border-radius: 6px;
|
|
border: 1px solid gray;
|
|
}
|
|
}
|
|
</style>
|