二维码
This commit is contained in:
parent
b9a516c469
commit
7cdfb9c7b6
|
|
@ -77,7 +77,8 @@
|
||||||
"vxe-table": "4.6.17",
|
"vxe-table": "4.6.17",
|
||||||
"vxe-table-plugin-antd": "4.0.7",
|
"vxe-table-plugin-antd": "4.0.7",
|
||||||
"xe-utils": "3.5.26",
|
"xe-utils": "3.5.26",
|
||||||
"xss": "^1.0.15"
|
"xss": "^1.0.15",
|
||||||
|
"qrcode-vue3": "^1.4.17"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^18.6.1",
|
"@commitlint/cli": "^18.6.1",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as QRCodeVue3 } from './src/QRCodeVue3.vue';
|
||||||
|
|
@ -0,0 +1,215 @@
|
||||||
|
<template>
|
||||||
|
<div ref="qrcodeRef">
|
||||||
|
<QRCodeVue3
|
||||||
|
:margin="margin"
|
||||||
|
:width="width"
|
||||||
|
:height="height"
|
||||||
|
:value="value"
|
||||||
|
:qrOptions="qrOptions"
|
||||||
|
:image="image"
|
||||||
|
:imageOptions="imageOptions"
|
||||||
|
:dotsOptions="dotsOptions"
|
||||||
|
:backgroundOptions="backgroundOptions"
|
||||||
|
:cornersSquareOptions="cornersSquareOptions"
|
||||||
|
:cornersDotOptions="cornersDotOptions"
|
||||||
|
:key="key"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent, reactive, toRefs, PropType, ref} from "vue";
|
||||||
|
import QRCodeVue3 from "qrcode-vue3";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "Qrcode",
|
||||||
|
components: {
|
||||||
|
QRCodeVue3,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 二维码宽度
|
||||||
|
key: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
// 二维码宽度
|
||||||
|
width: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: 600,
|
||||||
|
},
|
||||||
|
// 二维码高度
|
||||||
|
height: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: 600,
|
||||||
|
},
|
||||||
|
// 二维码内容，网址
|
||||||
|
value: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: "https://www.focusnu.com/devops",
|
||||||
|
},
|
||||||
|
// 二维码图像的外边距
|
||||||
|
margin: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default:6,
|
||||||
|
},
|
||||||
|
//二维码背景色
|
||||||
|
backgroundColor: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: "white",
|
||||||
|
},
|
||||||
|
//二维码中间的logo图片
|
||||||
|
logo: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
// 隐藏图片背后有点
|
||||||
|
hideLogoDots: {
|
||||||
|
type: Boolean as PropType<boolean>,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
//二维码中间的logo大小
|
||||||
|
logoSize: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: 0.5,
|
||||||
|
},
|
||||||
|
//二维码中间的logo外边距
|
||||||
|
logoMargin: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: 5,
|
||||||
|
},
|
||||||
|
//二维码点配置
|
||||||
|
dotsOptions: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
type: "rounded", // 二维码样式 square | dots | rounded | extra-rounded | classy | classy-rounded
|
||||||
|
color: "#0d2a56", //不设置渐变色时显示的颜色
|
||||||
|
// 渐变色，优先级高于默认color颜色
|
||||||
|
gradient: {
|
||||||
|
type: "radial", // linear线性渐变 | radial径向渐变
|
||||||
|
rotation: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#21a3fa",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#0d2a56",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 角落广场配置
|
||||||
|
*/
|
||||||
|
cornersSquareOptions: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
type: "extra-rounded", // none | square | dot | extra-rounded
|
||||||
|
color: "#0d2a56",//不设置渐变色时显示的颜色
|
||||||
|
// 渐变色
|
||||||
|
gradient: {
|
||||||
|
type: "linear",
|
||||||
|
rotation: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#0d2a56",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#21a3fa",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 角落点配置
|
||||||
|
*/
|
||||||
|
cornersDotOptions: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
type: "dot", // none | square | dot
|
||||||
|
color: "#0d2a56",//不设置渐变色时显示的颜色
|
||||||
|
// 渐变色
|
||||||
|
gradient: {
|
||||||
|
type: "linear",
|
||||||
|
rotation: 0,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#0d2a56",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#21a3fa",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
console.log(props);
|
||||||
|
const qrcodeRef = ref(null);
|
||||||
|
const data = reactive({
|
||||||
|
key: props.key,//key值变化时自动刷新
|
||||||
|
/**
|
||||||
|
* 基础配置
|
||||||
|
* https://qr-code-styling.com
|
||||||
|
*/
|
||||||
|
width: props.width, // 二维码宽度
|
||||||
|
height: props.height, // 二维码高度
|
||||||
|
value: props.value, // 二维码内容
|
||||||
|
margin: props.margin, // 二维码图像的外边距
|
||||||
|
/**
|
||||||
|
* 背景配置
|
||||||
|
*/
|
||||||
|
backgroundOptions: {
|
||||||
|
//二维码背景色
|
||||||
|
color: props.backgroundColor,
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 二维码配置
|
||||||
|
*/
|
||||||
|
qrOptions: {
|
||||||
|
typeNumber: "0", // 类型编号 0 - 40
|
||||||
|
mode: "Byte", // 模式 Numeric | Alphanumeric | Byte | Kanji
|
||||||
|
errorCorrectionLevel: "Q", // 纠错等级 L | M | Q | H 'L'（低）、'M'（中）、'Q'（高）、'H'（非常高）
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 图像配置（中心图片）
|
||||||
|
*/
|
||||||
|
image: props.logo, // 二维码中心的图片
|
||||||
|
imageOptions: {
|
||||||
|
hideBackgroundDots: props.hideLogoDots, // 隐藏图片背后有点
|
||||||
|
imageSize: props.logoSize,
|
||||||
|
margin: props.logoMargin,
|
||||||
|
crossOrigin: "anonymous", // anonymous | use-credentials
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 二维码点配置
|
||||||
|
*/
|
||||||
|
dotsOptions: props.dotsOptions,
|
||||||
|
/**
|
||||||
|
* 角落广场配置
|
||||||
|
*/
|
||||||
|
cornersSquareOptions: props.cornersSquareOptions,
|
||||||
|
/**
|
||||||
|
* 角落点配置
|
||||||
|
*/
|
||||||
|
cornersDotOptions: props.cornersDotOptions,
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(data),
|
||||||
|
qrcodeRef
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
<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>
|
||||||
Loading…
Reference in New Issue