You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
1.9 KiB
85 lines
1.9 KiB
<template>
|
|
<view>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<canvas :canvas-id="item.id" :id="item.id" :style="{width:size,height: size}" v-for="(item,index) in listCode" :key="item.id" />
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifndef MP-WEIXIN -->
|
|
<canvas :canvas-id="id" :id="id" :style="{width:size,height: size}" />
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import QRCODE from './index.js';
|
|
import { getUUid, deepClone } from './helper.js'
|
|
export default {
|
|
name: 'WQrcode',
|
|
props:{
|
|
options:{
|
|
type: Object,
|
|
required: true,
|
|
default: () =>{
|
|
return {
|
|
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
listCode:[],
|
|
id: getUUid(),
|
|
size: null,
|
|
}
|
|
},
|
|
created() {
|
|
// https://ext.dcloud.net.cn/plugin?id=4662
|
|
this.size = this.options.size + 'rpx';
|
|
this.SpecialTreatment(this.options)
|
|
this.$nextTick(()=>{
|
|
this.generateCode();
|
|
})
|
|
},
|
|
watch: {
|
|
options:{
|
|
deep: true,
|
|
handler (val) {
|
|
this.size = val.size +'rpx';
|
|
this.SpecialTreatment(val)
|
|
// #ifdef H5
|
|
setTimeout(()=>{// h5平台动态改变canvas大小
|
|
this.generateCode();
|
|
},50)
|
|
// #endif
|
|
|
|
// #ifdef APP-NVUE || APP-PLUS || MP || QUICKAPP-WEBVIEW || QUICKAPP-WEBVIEW-HUAWEI || QUICKAPP-WEBVIEW-UNION
|
|
this.generateCode();
|
|
// #endif
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
SpecialTreatment (val) {//微信小程序渲染多个canvas特殊处理
|
|
// #ifdef MP-WEIXIN
|
|
let obj = deepClone(val);
|
|
this.id = obj.id = getUUid();
|
|
this.listCode = [obj]
|
|
// #endif
|
|
},
|
|
generateCode () {
|
|
try{
|
|
const parameter = {...this.options,id: this.id,ctx: this};
|
|
QRCODE.QRCode(parameter,(res)=>{
|
|
this.$emit('generate',res)
|
|
})
|
|
}catch(err){}
|
|
},
|
|
async saveImg (){
|
|
try{
|
|
const res = await QRCODE.SaveImg({id: this.id,width: this.size,height: this.size,ctx: this});
|
|
return res
|
|
}catch(e){}
|
|
}
|
|
}
|
|
}
|
|
</script>
|