extjs + qrcode 实现二维码功能

2019-08-02 15:02:32 阅读：600 来源： 互联网

标签：me imgsize text Ext 二维码 qrcode extjs

网页生成二维码使用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();

标签：me,imgsize,text,Ext,二维码,qrcode,extjs
来源： https://blog.csdn.net/xhydongda/article/details/98204223

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

extjs + qrcode 实现二维码功能