extjs + qrcode 实现二维码功能

原创于 2019-08-02 14:54:54 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjsj #qrcode #二维码

javascript 同时被 2 个专栏收录

8 篇文章

订阅专栏

extjs

6 篇文章

订阅专栏

本文介绍如何在ExtJS框架中使用qrcode.js库生成二维码，并封装为组件。通过创建Ext.Component子类，实现了可配置的二维码生成组件，包括设置大小、颜色及二维码内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页生成二维码使用qrcode.js，不过qrcode.min.js貌似有bug，我直接用了qrcode.js。

Extjs需要封装一个component：

Ext.define('Arim.view.account.QRCode', {
    extend: 'Ext.Component',
    xtype: 'qrcode',

    imgsize:128,
    maximgsize:547,
    text:'空白',
    colorDark : "#000000",
    colorLight : "#ffffff",

    onRender: function (t, eOpts) {
        var me = this;
        me.callParent(arguments);
        if(!me.qrcode){
            var size = me.imgsize>me.maximgsize?me.maximgsize:me.imgsize;
            me.qrcode = new QRCode(me.getEl(),{
                width:size,
                height:size,
                text:me.text,
                colorDark:me.colorDark,
                colorLight:me.colorLight
            });
        }
    },

    onDestroy: function () {
        if (this.qrcode) {
            this.qrcode.clear();
        }
        this.callParent(arguments);
    }
})

然后就可以使用了。

Ext.create('Ext.window.Window',{
	title: '二维码',
	width: 340,
	height: 360,
	items: [{
		xtype:'qrcode',
		margin:15,
		imgsize : 300,
		text:'二维码内容'
	}]
}).show();