# w-qr-code 二维码生成组件



## 简单实用

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

![](./1.png)



## 组件属性

|属性名		|类型			|默认值		|说明								|
|:-:		|:-:			|:-:		|:-:								|
|text		|String			|hello world			|二维码内容							|
|size		|Number			|512		|二维码大小(单位:px),注意:该大小为画布大小(保存的图片大小),而不是组件大小					|
|typeNumber		|Number			|0		|0:自动,1-40					|
|color		|String			|#000000	|前景颜色(任意有效果颜色格式,rgb、rgba)|
|bgColor	|String			|#FFFFFF	|背景颜色(任意有效果颜色格式,rgb、rgba)，透明背景设置为:transparent或rgba(0,0,0,0)|
|type	|String			|png		|图片输出格式							|
|level|String	|H			|纠错等级，包含 `L`、`M`、`Q`、`H` 四个级别，`L`: 最大 7% 的错误能够被纠正；`M`: 最大 15% 的错误能够被纠正；`Q`: 最大 25% 的错误能够被纠正；`H`: 最大 30% 的错误能够被纠正。			|
|logo		|String			|-			|中间logo图片（支持网络图片,小程序下需先配置download域名白名单才能生效。）|



## CSS变量

|属性名		|默认值		|说明								|
|:-:		|:-:		|:-:								|
|--font-size		| 1rem         | 组件基础大小, `组件的高宽` = `--font-size` * `10` 不支持upx,rpx |
|--color		|currentColor		|加载动画的颜色					|



## 组件事件

### 1. end

- 说明: 绘制完成事件

- 参数: imageUrl

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

const endHandler = (imageUrl)=>{

}
```



## 组件方法

### 1. repaint()

- 说明: 重新绘制二维码

```vue
<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>
```
![](./2.png)
![](./3.gif)
