de-net-official/components/qrcode.vue

<template>
    <div class="border">
        <div class="ercode">
            <canvas id="canvas"></canvas>
        </div>
        <div class="info">
            <div class="font">{{tokenRechargeAddress}}</div>
            <div class="copy copy-btn" :data-clipboard-text="tokenRechargeAddress">Copy</div>
        </div>
    </div>
</template>

<script>
let QRCode = require('qrcode')
let ClipboardJS = require('clipboard')
import Api from '../http/api';
import { postRequest } from '../http/index';
import { Toast } from 'vant';

export default {
    name: 'qrCode',
    props: ['tokenChain', 'rechargeAddress'],
    data() {
        return {
            tokenRechargeAddress: ''
        }
    },
    mounted() {
        this.getTokenAddress()
    },
    methods: {
        getTokenAddress() {
            if (this.rechargeAddress !== '') {
                // 有过查询
                this.tokenRechargeAddress = this.rechargeAddress;
                this.createQRCode(this.rechargeAddress)
                this.copyToken()
            } else {
                // 没查询过
                postRequest(Api.getTokenRechargeAddress, {
                    params: {
                        tokenChain: this.tokenChain
                    }
                }).then(res => {
                    let { code, data } = res;
                    if (code === 0) {
                        this.tokenRechargeAddress = data.rechargeAddress;
                        this.createQRCode(data.rechargeAddress)
                        this.copyToken()
                    }
                })
            }
        },
        createQRCode(str) {
            var canvas = document.getElementById('canvas')
            QRCode.toCanvas(canvas, str, {
                width: 110,
                height: 110,
                scale: 1,
                color: {
                    dark: '#000', // 二维码前景颜色
                    light: '#fff' // 二维码背景颜色
                }
            }, function (error) {
                if (error) console.error(error)
                console.log('success!');
            })
        },
        copyToken() {
            var clipboard = new ClipboardJS('.copy-btn');
            clipboard.on('success', function (e) {
                Toast(`copy success`)
                e.clearSelection();
            });

            clipboard.on('error', function (e) {
                Toast(`copy error`)
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.border {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ECECEC;
    .ercode {
        overflow: hidden;
        width: 110px;
        height: 110px;
        canvas {
            width: 100%;
            height: 100%;
            transform: scale(1.24);
        }
    }
    .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        margin-left: 15px;
        word-break: break-all;
        .font {
            font-size: 14px;
            line-height: 22px;
            font-weight: 400;
        }
        .copy {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1D9BF0;
            font-size: 16px;
            font-weight: 600;
            width: 100%;
            height: 35px;
            margin-top: 13px;
            border-radius: 35px;
            border: 1px solid #1D9BF0;
        }
    }
}
</style>