xiaojincai
/
yrxzy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>qrcode.vue - A Vue.js component for QRCode</title>
    <meta name="author" content="@scopewu" />
    <meta name="Keywords" content="qrcode.vue,qrcode,component" />
    <meta
      name="description"
      content="qrcode.vue - A Vue.js component for QRCode."
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
      integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE="
      crossorigin="anonymous"
    />
    <style>
      body {
        font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
          'Microsoft YaHei', SimSun, sans-serif;
        color: #333;
      }

      .fork {
        width: 150px;
        height: 150px;
        position: absolute;
        top: 0;
        right: 0;
      }
      .fork img {
        max-width: 100%;
      }

      @media screen and (min-width: 768px) {
        .container-fluid {
          max-width: 798px;
        }
      }

      @media screen and (max-width: 470px) {
        h1 {
          font-size: 26px;
        }

        .fork {
          width: 120px;
          height: 120px;
        }
      }
    </style>
    <script
      src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"
      integrity="sha256-chlNFSVx3TdcQ2Xlw7SvnbLAavAQLO0Y/LBiWX04viY="
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/qrcode.vue@1.7.0/dist/qrcode.vue.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="page-header">
        <h1>qrcode.vue</h1>
        <div>
          <!-- Place this tag where you want the button to render. -->
          <a
            class="github-button"
            href="https://github.com/scopewu/qrcode.vue"
            data-show-count="true"
            aria-label="Star qrcode.vue on GitHub"
            >Star</a
          >
        </div>
      </div>
      <div id="root"></div>
    </div>
    <div class="fork">
      <a href="https://github.com/scopewu/qrcode.vue">
        <img src="./assets/img/fork-me-on-github.svg" alt="fork me on github" />
      </a>
    </div>
    <script>
      new Vue({
        el: '#root',
        data: {
          value: 'https://example.com',
          size: 100,
          level: 'L',
          background: '#ffffff',
          foreground: '#000000',
          renderAs: 'svg',
        },
        template:
          '<form class="form-horizontal"><div class="form-group"><label class="col-sm-2 control-label">Value:</label><div class="col-sm-10"><textarea v-model="value" class="form-control" rows="3"></textarea></div></div><div class="form-group"><label class="col-sm-2 control-label">Size:</label><div class="col-sm-10"><div class="form-control-static"><input type="range" v-model="size" min="100" max="800" step="20"></div></div></div><div class="form-group"><label class="col-sm-2 control-label">Level:</label><div class="col-sm-10"><select v-model="renderAs" class="form-control"><option value="svg">svg</option><option value="canvas">canvas</option></select></div></div><div class="form-group"><label class="col-sm-2 control-label">Level:</label><div class="col-sm-10"><select v-model="level" class="form-control"><option value="L">L</option><option value="Q">Q</option><option value="M">M</option><option value="H">H</option></select></div></div><div class="form-group"><label class="col-sm-2 control-label">Background:</label><div class="col-sm-10"><div class="form-control-static"><input type="color" v-model="background"></div></div></div><div class="form-group"><label class="col-sm-2 control-label">Foreground:</label><div class="col-sm-10"><div class="form-control-static"><input type="color" v-model="foreground"></div></div></div><div class="form-group"><label class="col-sm-2 control-label">QR_CODE:</label><div class="col-sm-10"><div class="form-control-static"><qrcode-vue class="qrcode" :value="value" :renderAs="renderAs" :size="size" :level="level" :background="background" :foreground="foreground"></div></div></div></form>',
        components: {
          QrcodeVue,
        },
      })
    </script>
  </body>
  <script async defer src="https://buttons.github.io/buttons.js"></script>
</html>