feat:二维码组件和安装依赖

张含笑

2025-08-09 297415607f210f7a26365d58329303c8a87af9e1

feat:二维码组件和安装依赖

 package-lock.json

@@ -30,6 +30,7 @@
                "mitt": "^3.0.1",
                "nprogress": "^0.2.0",
                "postcss-pxtorem": "^6.1.0",
                "qrcodejs2-fix": "^0.0.1",
                "reconnecting-websocket": "^4.4.0",
                "sm-crypto": "^0.3.13",
                "uuid": "^11.1.0",
@@ -4638,6 +4639,11 @@
                "node": ">=12.0.0"
            }
        },
        "node_modules/qrcodejs2-fix": {
            "version": "0.0.1",
            "resolved": "https://registry.npmmirror.com/qrcodejs2-fix/-/qrcodejs2-fix-0.0.1.tgz",
            "integrity": "sha512-1R6jB87k1PUwjX65hh24FftDjrghPvryYfsajV3chCp//dQb8QUeL446DVLj2SIeotP8ro9rSYri0wOp7O+7Hg=="
        },
        "node_modules/queue-microtask": {
            "version": "1.2.3",
            "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -9026,6 +9032,11 @@
                "long": "^5.0.0"
            }
        },
        "qrcodejs2-fix": {
            "version": "0.0.1",
            "resolved": "https://registry.npmmirror.com/qrcodejs2-fix/-/qrcodejs2-fix-0.0.1.tgz",
            "integrity": "sha512-1R6jB87k1PUwjX65hh24FftDjrghPvryYfsajV3chCp//dQb8QUeL446DVLj2SIeotP8ro9rSYri0wOp7O+7Hg=="
        },
        "queue-microtask": {
            "version": "1.2.3",
            "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",

 package.json

@@ -17,7 +17,6 @@
        "@saber/nf-design-base-elp": "^1.2.0",
        "@smallwei/avue": "^3.4.4",
        "@turf/turf": "6.5.0",
        "postcss-pxtorem": "^6.1.0",
        "animate.css": "^4.1.1",
        "avue-plugin-ueditor": "^1.0.3",
        "axios": "^0.21.1",
@@ -33,13 +32,15 @@
        "lodash": "^4.17.21",
        "mitt": "^3.0.1",
        "nprogress": "^0.2.0",
        "postcss-pxtorem": "^6.1.0",
        "qrcodejs2-fix": "^0.0.1",
        "reconnecting-websocket": "^4.4.0",
        "sm-crypto": "^0.3.13",
        "uuid": "^11.1.0",
        "vue": "^3.4.27",
        "vue-i18n": "^9.1.9",
        "vue-router": "^4.3.2",
        "vuex": "^4.1.0",
        "uuid": "^11.1.0",
        "xlsx": "^0.18.5"
    },
    "devDependencies": {

 src/components/CreateQRcode/CreateQRcode.vue

New file
@@ -0,0 +1,46 @@
<template>
    <!--二维码位置-->
    <div class="myQrCode" id="myQrCode" ref="myQrCode"></div>
</template>

<script setup>
import QRCode from 'qrcodejs2-fix'
const props = defineProps(['latAndLon'])

const myQrCode = ref(null)
let qrCodeInstance = null

const createQRcode = content => {
console.log('this.currentDetail.content',content);

    if (!content) return
    if (qrCodeInstance) {
        myQrCode.value.innerHTML = ''
    }
    // 生成新二维码
    qrCodeInstance = new QRCode(myQrCode.value, {
        width: 92,
        height: 91,
        text: `https://uri.amap.com/marker?position=${content}&name=%E4%BA%8B%E4%BB%B6%E7%82%B9`,
    })
}
watch(
    () => props.latAndLon,
    newVal => {
        if (newVal) {
            nextTick(() => {
                createQRcode(newVal)
            })
        }
    },
    { immediate: true }
)
onMounted(async () => {})
</script>

<style lang="scss" scoped>
.myQrCode {
    padding: 2px;
    background: #fff;
}
</style>

 yarn.lock

Diff too large