perry-mall/components/yz-qr/changelog.md

86 lines
2.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

## 功能描述
根据内容生成二维码,并返回图片地址
## 平台兼容性
兼容APP、H5及微信小程序。其他平台未测试
## 安装方式
安装到components文件夹支持[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)组件模式。
## 使用方式
**<font color=#FF0000 >可根据属性自定义二维码</font>**
``` javascript
<yz-qr></yz-qr>
```
## 属性说明
|属性名 |类型 |默认值 |说明 |
|-- |-- |-- |-- |
|text |String |'hello' |二维码内容 |
|size |Number |340 |单位是px |
|colorDark |String |'#000000' |黑色二维码 |
|colorLight |String |'#ffffff' |白色背景 |
## 示例代码
``` javascript
<template>
<view class="content">
<!-- 通过 ref 为子组件赋予一个 ID 引用,访问子组件实例 -->
<yz-qr ref="qrPath" :text="text" :size="size" :colorDark="colorDark" :colorLight="colorLight"></yz-qr>
<view class="text">
二维码内容:<text>{{text}}</text>
</view>
<view class="text">
图片地址:<text>{{canvasQrPath}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
canvasQrPath: '',
text: 'hello',
size: 200,
colorDark: '#ff0000',
colorLight: '#ffffff'
}
},
onLoad() {
this.getQrPath()
},
methods: {
getQrPath() {
var that = this;
setTimeout(function() {
that.canvasQrPath = that.$refs.qrPath.canvasQrPath;
console.log('获取二维码地址:', that.canvasQrPath)
}, 1000)
}
}
}
</script>
<style>
.text {
background-color: #f3f3f3;
margin: 24rpx;
padding: 24rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text text {
font-weight: 700;
margin-left: 16rpx;
}
</style>
```
## <font color=#FF0000 >canvas踩坑</font>
1. uni-app中的canvas的width、height的值依赖于父元素的宽高。canvas的父级如果被隐藏。canvas的width、height则都为0。
2. 当父元素出现canvas的高度也就有了。但是canvas并不会绘制显示。解决方法可以将绘制方法写在异步方法中同时要注意组件的生命周期确保实例挂载成功之后再执行。