生成二维码bug

layouts/default.vue

@@ -2,7 +2,7 @@
   <div>
     <Header></Header>
     <nuxt/>
-
+    <Footer></Footer>
   </div>
 </template>
 

nuxt.config.js

@@ -69,7 +69,6 @@ module.exports = {
     /*
     ** You can extend webpack config here
     */
-    vendor: ['external_library'],
     extend(config, { isDev, isClient }) {
 
       // const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader');

pages/content/index.vue

@@ -35,9 +35,9 @@
                           :footer-hide="true"
                           width="300px"
                         >
-                          <div id="code"></div>
-                          <canvas id="canvas"></canvas>
-                          <!-- <no-ssr><vue-qr id="vx-qrcode" :text="'http://aseanweb.info666.com/content/'+id" :size="200" :data-bd-imgshare-binded="0"></vue-qr></no-ssr> -->
+                          <!-- <div id="code"></div>-->
+                          <!-- <canvas id="canvas"></canvas> -->
+                          <vue-qr id="vx-qrcode" :text="'http://aseanweb.info666.com/content/'+id" :size="200" :data-bd-imgshare-binded="0"></vue-qr>
                           <p>打开微信，点击底部的“发现”，使用“扫一扫”即可将网页分享至朋友圈。</p>
                         </Modal>
                       </a>
@@ -154,12 +154,12 @@ import { getColumnAd } from '~/api/lists'
 import { mapMutations, mapState, mapGetters, mapActions } from 'vuex'
 import Bus from '~/common/bus'
 // import VueQr from 'vue-qr'
-import QRCode from 'qrcode'
+// import QRCode from 'qrcode'
 import { formatTime } from '~/common/publicFun'
 export default {
-  components: {
-    QRCode: QRCode
-  },
+  // components: {
+  //   VueQr: VueQr
+  // },
   data() {
     return {
       vxCodeShow: false,
@@ -217,6 +217,9 @@ export default {
       getInfoDetail({ reqdata: { infoId: query.id } }),
       getColumnAd({ reqdata: { adPosition: 'column' } })
     ])
+    if (process.browser) {
+      require('vue-qr')
+    }
 
     conData.object.relateList.map((item, index) => {
       if (index < 12) {
@@ -268,7 +271,7 @@ export default {
     Bus.$emit('columnId', this.columnId)
     window._bd_share_main = ''
     this.shareArt()
-    this.useqrcode()
+    // this.useqrcode()
     // this.getData(this.id);
   },
   // computed: {
@@ -430,19 +433,20 @@ export default {
     //   //   },500);
     //   // }
     // },
-    useqrcode() {
-      console.log(QRCode, 'QRCodeQRCode')
-      var canvas = document.getElementById('canvas')
-      let er = 'http://aseanweb.info666.com/content/' + this.id
-      QRCode.toCanvas(canvas, er, function(error) {
-        console.log(error, 'error')
-        if (error) console.error(error)
-        console.log('success!')
-      })
-      console.log(canvas, '1325412345234')
-    },
+    // useqrcode() {
+    //   console.log(QRCode, 'QRCodeQRCode')
+    //   var canvas = document.getElementById('canvas')
+    //   let er = 'http://aseanweb.info666.com/content/' + this.id
+    //   QRCode.toCanvas(canvas, er, function(error) {
+    //     console.log(error, 'error')
+    //     if (error) console.error(error)
+    //     console.log('success!')
+    //   })
+    //   console.log(canvas, '1325412345234')
+    // },
 
     showVxCode() {
+      // this.useqrcode();
       this.vxCodeShow = !this.vxCodeShow
     }
   }
@@ -466,10 +470,10 @@ export default {
       border-bottom: 1px dashed #ddd;
       width: 100%;
       line-height: 29px;
-      #canvas {
-        width: 200px !important;
-        height: 200px !important;
-      }
+      // #canvas {
+      //   width: 200px !important;
+      //   height: 200px !important;
+      // }
       .ivu-col-span-8 {
         height: 29px;
       }

plugins/plugins.js

@@ -1,9 +1,10 @@
 import Vue from 'vue'
 import VueAwesomeSwiper from 'vue-awesome-swiper'
 import vueSocialSharing from 'vue-social-sharing'
-import QRCode from 'qrcode'
-
-Vue.use(QRCode)
+import VueQr from 'vue-qr'
+// import QRCode from 'qrcode'
+// Vue.use(QRCode);
+Vue.use(VueQr);
 Vue.use(vueSocialSharing)
 Vue.use(VueAwesomeSwiper);