src/popup/framework/components/trans/qrcode.vue

   1 <style scoped>
   2 .warp {
   3   width: 220px;
   4   height: 200px;
   5   margin: 128px auto;
   6   border-radius: 5px;
   7   text-align: center;
   8   padding: 30px;
   9 }
  10 #qrcode {
  11   display: inline-block;
  12 }
  13 p {
  14   word-wrap: break-word;
  15 }
  16 </style>
  17
  18 <template>
  19     <transition name="page-transfer"
  20         enter-active-class="animated zoomIn faster"
  21         leave-active-class="animated zoomOut faster">
  22         <div v-show="show" class="warp bg-gray">
  23             <i class="iconfont btn-close" @click="close">&#xe605;</i>
  24             <div id="qrcode"></div>
  25             <p>{{addr}}</p>
  26         </div>
  27     </transition>
  28 </template>
  29
  30 <script>
  31 import QRCode from "qrcodejs2";
  32 export default {
  33   name: "",
  34   props: {},
  35   data() {
  36     return {
  37       show: false,
  38       addr: "111",
  39       qrcode: Object
  40     };
  41   },
  42   methods: {
  43     open: function(address) {
  44       this.show = true;
  45       this.addr = address;
  46
  47       // 使用 API
  48       this.qrcode.clear();
  49       this.qrcode.makeCode("new content");
  50     },
  51     close: function() {
  52       this.show = false;
  53     }
  54   },
  55   mounted() {
  56     this.qrcode = new QRCode("qrcode", {
  57       width: 150,
  58       height: 150,
  59       colorDark: "#000000",
  60       colorLight: "#ffffff",
  61       correctLevel: QRCode.CorrectLevel.H
  62     });
  63   }
  64 };
  65 </script>