qrcode.html

<script src='../jquery.qrcode/dist/jquery.qrcode.js'></script>

<element name='qrcode'>

  <template>
    <div id='{{id}}' render='{{render}}' style='{{style}}' size='{{size}}'>
      <content></content>
    </div>
  </template>

  <script>
  registerElement('qrcode', {

    text: '',

    init: function() {
      var $ele = this.$ele;
      if ($ele.attr('size') != '{{size}}') {
        var size = $ele.attr('size');
        $ele.css({
          'width': size,
          'height': size
        });
      }
      this.render(this.$originEle.text());
    },

    render: function(txt) {
      var $ele = this.$ele;
      if (this.text !== txt) {
        this.text = txt;
        $ele.html('');
        $ele.qrcode({
          render: $ele.attr('render'),
          background: '#fff',
          size: parseInt($ele.attr('size'), 10),
          text: toUtf8(txt)
        });
      }
    }

  });

  function toUtf8(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for (i = 0; i < len; i++) {
      c = str.charCodeAt(i);
      if ((c >= 0x0001) && (c <= 0x007F)) {
        out += str.charAt(i);
      } else if (c > 0x07FF) {
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
        out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
      } else {
        out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
      }
    }
    return out;
  }
  </script>

</element>