mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-15 16:02:19 +08:00
Merge pull request #63 from JeremyYu-cn/feat-upgrade-vue3
Feat: upgrade vite and vue to the latest version
This commit is contained in:
Jeremy Yu
GitHub
commit
babc2af680
23
package.json
23
package.json
@ -31,7 +31,8 @@
|
||||
"qr-code-styling": "^1.6.0-rc.1",
|
||||
"selecto": "^1.13.0",
|
||||
"throttle-debounce": "^3.0.1",
|
||||
"vue": "3.2.22",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vue": "3.4.19",
|
||||
"vue-router": "^4.0.0-0",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"vuex": "^4.0.0-0"
|
||||
@ -41,29 +42,17 @@
|
||||
"@types/throttle-debounce": "^2.1.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
||||
"@typescript-eslint/parser": "^7.1.0",
|
||||
"@vitejs/plugin-vue": "1.9.3",
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-router": "~4.5.0",
|
||||
"@vue/cli-plugin-typescript": "~4.5.0",
|
||||
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.1.4",
|
||||
"@vue/eslint-config-typescript": "^7.0.0",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"autoprefixer": "^10.3.1",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"esbuild-loader": "^2.13.1",
|
||||
"eslint": "^7.29.0",
|
||||
"eslint-config-alloy": "~4.1.0",
|
||||
"eslint-plugin-vue": "^7.12.1",
|
||||
"less": "^4.1.1",
|
||||
"typescript": "^5.3.3",
|
||||
"typescript": "^5.2.2",
|
||||
"unplugin-element-plus": "^0.7.1",
|
||||
"vite": "2.6.4",
|
||||
"vite-plugin-compression": "^0.3.0",
|
||||
"vue-cli-plugin-norm": "~1.2.2",
|
||||
"vue-eslint-parser": "^7.6.0",
|
||||
"vue-tsc": "0.3.0"
|
||||
"vite": "^5.1.4",
|
||||
"vue-tsc": "^1.8.27"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
||||
@ -2,108 +2,107 @@
|
||||
* @Author: ShawnPhang
|
||||
* @Date: 2022-03-16 09:15:52
|
||||
* @Description:
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
||||
* @LastEditTime: 2024-01-31 15:43:10
|
||||
* @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
|
||||
* @Date: 2024-03-04 09:50:00
|
||||
-->
|
||||
<template>
|
||||
<div ref="qrCodeDom" class="qrcode__wrap"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref, watch, nextTick } from 'vue'
|
||||
import QRCodeStyling, { DrawType, TypeNumber, Mode, ErrorCorrectionLevel, DotType, CornerSquareType, CornerDotType, Extension } from 'qr-code-styling'
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch, nextTick, defineProps } from 'vue'
|
||||
import QRCodeStyling, { DrawType, TypeNumber, Mode, ErrorCorrectionLevel, DotType, CornerSquareType, CornerDotType, } from 'qr-code-styling'
|
||||
import { debounce } from 'throttle-debounce'
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
width: {
|
||||
default: 300,
|
||||
},
|
||||
height: {
|
||||
default: 300,
|
||||
},
|
||||
image: {},
|
||||
value: {},
|
||||
dotsOptions: {
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
let options = {}
|
||||
watch(
|
||||
() => [props.width, props.height, props.dotsOptions],
|
||||
() => {
|
||||
render()
|
||||
},
|
||||
)
|
||||
type TProps = {
|
||||
width?: number
|
||||
height?: number
|
||||
image?: string
|
||||
value?: string
|
||||
dotsOptions: {
|
||||
color: string,
|
||||
type: DotType,
|
||||
}
|
||||
}
|
||||
|
||||
const render = debounce(300, false, async () => {
|
||||
options = {
|
||||
width: props.width,
|
||||
height: props.height,
|
||||
type: 'canvas' as DrawType, // canvas svg
|
||||
data: props.value,
|
||||
image: props.image, // /favicon.svg
|
||||
margin: 0,
|
||||
qrOptions: {
|
||||
typeNumber: 3 as TypeNumber,
|
||||
mode: 'Byte' as Mode,
|
||||
errorCorrectionLevel: 'M' as ErrorCorrectionLevel,
|
||||
},
|
||||
imageOptions: {
|
||||
hideBackgroundDots: true,
|
||||
imageSize: 0.4,
|
||||
margin: 6,
|
||||
crossOrigin: 'anonymous',
|
||||
},
|
||||
backgroundOptions: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
dotsOptions: {
|
||||
color: '#41b583',
|
||||
type: 'rounded' as DotType,
|
||||
...props.dotsOptions,
|
||||
},
|
||||
cornersSquareOptions: {
|
||||
color: props.dotsOptions.color,
|
||||
type: '',
|
||||
// type: 'extra-rounded' as CornerSquareType,
|
||||
// gradient: {
|
||||
// type: 'linear', // 'radial'
|
||||
// rotation: 180,
|
||||
// colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
|
||||
// },
|
||||
},
|
||||
cornersDotOptions: {
|
||||
color: props.dotsOptions.color,
|
||||
type: 'square' as CornerDotType,
|
||||
// gradient: {
|
||||
// type: 'linear', // 'radial'
|
||||
// rotation: 180,
|
||||
// colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
|
||||
// },
|
||||
},
|
||||
}
|
||||
if (props.value) {
|
||||
qrCode.update(options)
|
||||
await nextTick()
|
||||
qrCodeDom.value.firstChild.style = 'width: 100%;' // 强制其适应缩放
|
||||
}
|
||||
})
|
||||
|
||||
const qrCode = new QRCodeStyling(options)
|
||||
const qrCodeDom = ref<HTMLElement>()
|
||||
|
||||
onMounted(() => {
|
||||
render()
|
||||
qrCode.append(qrCodeDom.value)
|
||||
})
|
||||
|
||||
return {
|
||||
qrCodeDom,
|
||||
}
|
||||
},
|
||||
const props = withDefaults(defineProps<TProps>(), {
|
||||
width: 300,
|
||||
height: 300,
|
||||
dotsOptions: () => ({
|
||||
color: '#41b583',
|
||||
type: 'rounded',
|
||||
})
|
||||
})
|
||||
|
||||
let options = {}
|
||||
watch(
|
||||
() => [props.width, props.height, props.dotsOptions],
|
||||
() => {
|
||||
render()
|
||||
},
|
||||
)
|
||||
|
||||
const render = debounce(300, false, async () => {
|
||||
options = {
|
||||
width: props.width,
|
||||
height: props.height,
|
||||
type: 'canvas' as DrawType, // canvas svg
|
||||
data: props.value,
|
||||
image: props.image, // /favicon.svg
|
||||
margin: 0,
|
||||
qrOptions: {
|
||||
typeNumber: 3 as TypeNumber,
|
||||
mode: 'Byte' as Mode,
|
||||
errorCorrectionLevel: 'M' as ErrorCorrectionLevel,
|
||||
},
|
||||
imageOptions: {
|
||||
hideBackgroundDots: true,
|
||||
imageSize: 0.4,
|
||||
margin: 6,
|
||||
crossOrigin: 'anonymous',
|
||||
},
|
||||
backgroundOptions: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
dotsOptions: {
|
||||
// color: '#41b583',
|
||||
// type: 'rounded' as DotType,
|
||||
...props.dotsOptions,
|
||||
},
|
||||
cornersSquareOptions: {
|
||||
color: props.dotsOptions.color,
|
||||
type: '',
|
||||
// type: 'extra-rounded' as CornerSquareType,
|
||||
// gradient: {
|
||||
// type: 'linear', // 'radial'
|
||||
// rotation: 180,
|
||||
// colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
|
||||
// },
|
||||
},
|
||||
cornersDotOptions: {
|
||||
color: props.dotsOptions.color,
|
||||
type: 'square' as CornerDotType,
|
||||
// gradient: {
|
||||
// type: 'linear', // 'radial'
|
||||
// rotation: 180,
|
||||
// colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
|
||||
// },
|
||||
},
|
||||
}
|
||||
if (props.value) {
|
||||
qrCode.update(options)
|
||||
await nextTick()
|
||||
if (!qrCodeDom.value || !qrCodeDom.value.firstChild) return
|
||||
(qrCodeDom.value.firstChild as HTMLElement).setAttribute('style', "width: 100%;") // 强制其适应缩放
|
||||
}
|
||||
})
|
||||
|
||||
const qrCode = new QRCodeStyling(options)
|
||||
const qrCodeDom = ref<HTMLElement>()
|
||||
|
||||
onMounted(() => {
|
||||
render()
|
||||
qrCode.append(qrCodeDom.value)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@ -15,7 +15,8 @@ const exclude = ['settings', 'layout']
|
||||
const regex = RegExp('.*^(?!.*?(' + exclude.join('|') + ')).*\\.vue$')
|
||||
|
||||
// const requireComponent = require.context('.', true, /\.vue$/) // 找到components文件夹下以.vue命名的文件
|
||||
const requireComponent = import.meta.globEager('./**/*.vue')
|
||||
|
||||
const requireComponent = import.meta.glob('./**/*.vue', { eager: true })
|
||||
|
||||
function guide(Vue: Type.Object) {
|
||||
for (const fileName in requireComponent) {
|
||||
|
||||
6
src/types/env.d.ts
vendored
6
src/types/env.d.ts
vendored
@ -26,11 +26,11 @@ interface ImportMeta {
|
||||
// readonly env: ImportMetaEnv
|
||||
|
||||
|
||||
glob(pattern: string): Record<
|
||||
glob(pattern: string, { eager: boolean }): Record<
|
||||
string,
|
||||
() => Promise<{
|
||||
{
|
||||
[key: string]: any
|
||||
}>
|
||||
}
|
||||
>
|
||||
|
||||
globEager(pattern: string): Record<
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user