| | |
| | | <template> |
| | | <view class="c-qr-code"> |
| | | <canvas ref="canvas"></canvas> |
| | | <button |
| | | <AtButton |
| | | v-if="downloadable" |
| | | @tap="evt => handleSaveToAlbum()" |
| | | >保存到手机</button> |
| | | type="primary" |
| | | full |
| | | :onClick="evt => handleSaveToAlbum()" |
| | | >保存到手机</AtButton> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import Taro from '@tarojs/taro'; |
| | | import { $ } from '@tarojs/extend'; |
| | | import { AtButton } from 'taro-ui-vue'; |
| | | import QRCode from 'qrcode'; |
| | | import './cQrCode.scss'; |
| | | |
| | | export default { |
| | | name: 'CQRCode', |
| | | components: {}, |
| | | components: { |
| | | AtButton, |
| | | }, |
| | | props: { |
| | | content: { |
| | | type: String, |
| | |
| | | canvasDom, |
| | | this.content, |
| | | { |
| | | width: this.size, |
| | | width: this.size * 2, |
| | | margin: this.margin, |
| | | }, |
| | | err => { |
| | |
| | | console.error(err); |
| | | return; |
| | | } |
| | | } |
| | | }, |
| | | ); |
| | | }, |
| | | }, |
| | | mounted() { |
| | | if (process.env.TARO_ENV === 'h5') { |
| | | const canvasBox = $(this.$refs.canvas.$el); |
| | | const finderTimer = setInterval(() => { |
| | | this.finderTimer = setInterval(() => { |
| | | const canvasDom = canvasBox.find('canvas'); |
| | | if (canvasDom.length === 0) { |
| | | return; |
| | |
| | | } |
| | | this._renderQRCodeH5(canvasDom[0]); |
| | | this.lastContent = this.content; |
| | | }, 10); |
| | | }, 100); |
| | | } else { |
| | | // TODO: 小程序中获取canvas |
| | | } |
| | | }, |
| | | beforeDestroy() { |
| | | clearInterval(this.finderTimer); |
| | | }, |
| | | }; |
| | | </script> |