86 lines
2.2 KiB
Markdown
86 lines
2.2 KiB
Markdown
## 功能描述
|
||
根据内容生成二维码，并返回图片地址
|
||
|
||
## 平台兼容性
|
||
兼容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并不会绘制显示。解决方法：可以将绘制方法写在异步方法中，同时要注意组件的生命周期，确保实例挂载成功之后再执行。 |