更新记录

1.0.0（2024-01-15） 下载此版本

1.0.0 feat 完成小程序和H5测试

平台兼容性

w-qr-code 二维码生成主键

简单实用

<w-qr-code text="文本内容" />

组件属性

CSS变量

组件事件

1. end

• 说明: 绘制完成事件

• 参数: imageUrl

<w-qr-code text="文本内容" @end="endHandler"/>

const endHandler = (imageUrl)=>{

}

组件方法

1. repaint()

• 说明: 重新绘制二维码

<template>
    <view style="display: flex; align-items: center; flex-direction: column; padding:1rem">
      <w-qr-code ref="qrCodeRef" 
                 style="--font-size: 20px;--color:#00F" 
                 size="512" 
                 level="H" 
                 color="#060" 
                 bg-color="#CFC" 
                 :text="text" 
                 :logo="logo"  
                 @end="endHandler"/>
      <view>{{ text }}</view>
      <button @click="handleRepaint">重新生成二维码</button>
    </view>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance();

const text = ref(`${Math.round(Math.random()*100000000)}`);
const handleRepaint = ()=>{
  text.value=`${Math.round(Math.random()*100000000)}`
  proxy.$refs.qrCodeRef.repaint();
}
const endHandler = (imageUrl)=>{
  console.debug(imageUrl);
}
</script>