{"id":3032,"date":"2023-08-28T10:09:55","date_gmt":"2023-08-28T02:09:55","guid":{"rendered":"https:\/\/xinchewhd.com.cn\/?p=3032"},"modified":"2023-08-28T10:09:55","modified_gmt":"2023-08-28T02:09:55","slug":"vue-%e7%94%9f%e6%88%90%e4%ba%8c%e7%bb%b4%e7%a0%81%e7%9a%84%e4%b8%a4%e7%a7%8d%e6%96%b9%e5%bc%8f","status":"publish","type":"post","link":"https:\/\/xinchewhd.com.cn\/index.php\/vue\/vue-%e7%94%9f%e6%88%90%e4%ba%8c%e7%bb%b4%e7%a0%81%e7%9a%84%e4%b8%a4%e7%a7%8d%e6%96%b9%e5%bc%8f\/","title":{"rendered":"vue \u751f\u6210\u4e8c\u7ef4\u7801\u7684\u4e24\u79cd\u65b9\u5f0f"},"content":{"rendered":"\n\n
\n

\u65b9\u5f0f\u4e00\uff1aqrcode\uff08\u65e0 icon \u56fe\u6807\uff09<\/h3>\n
npm i qrcodejs2 --save<\/code><\/pre>\n
\u5b8c\u6574\u4ee3\u7801<\/p>\n
<template>\n  <div class=\"flex-box\">\n    <div>qrcode\uff08\u65e0 icon \u56fe\u6807\uff09<\/div>\n    <div class=\"qr-code\" ref=\"qrCodeUrl\"><\/div>\n  <\/div>\n<\/template>\n\n<script>\nimport QRCode from 'qrcodejs2';\n\nexport default {\n  data() {\n    return {};\n  },\n  methods: {\n    \/* \u521b\u5efa\u4e8c\u7ef4\u7801 *\/\n    creatQrCode() {\n      new QRCode(this.$refs.qrCodeUrl, {\n        text: 'https:\/\/blog.csdn.net\/AdminGuan', \/\/ \u4e8c\u7ef4\u7801\u7684\u5185\u5bb9\n        width: 150,\n        height: 150,\n        colorDark: '#000',\n        colorLight: '#fff',\n        correctLevel: QRCode.CorrectLevel.H\n      });\n    }\n  },\n  mounted() {\n    this.creatQrCode(); \/\/ \u521b\u5efa\u4e8c\u7ef4\u7801\n  }\n};\n<\/script>\n\n<style scoped>\n.flex-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n}\n.qr-code {\n  padding: 10px;\n  margin-top: 20px;\n  background-color: #fff;\n  border: 1px solid red;\n}\n<\/style><\/code><\/pre>\n
\u65b9\u5f0f\u4e8c\uff1avue-qr\uff08\u6709 icon \u56fe\u6807\uff09<\/h3>\n
\u5b98\u7f51\u5730\u5740\uff1avue-qr - npm<\/a><\/p>\n
npm install vue-qr --save<\/code><\/pre>\n
import \u5f15\u5165\u65b9\u5f0f<\/p>\n
import vueQr from 'vue-qr'; \/\/ vue2.0<\/code><\/pre>\n
import vueQr from 'vue-qr\/src\/packages\/vue-qr.vue'; \/\/ vue3.0 (support vite)<\/code><\/pre>\n
\u5b8c\u6574\u4ee3\u7801<\/p>\n
<template>\n  <div class=\"flex-box\">\n    <div>vue-qr\uff08\u6709 icon \u56fe\u6807\uff09<\/div>\n    <vue-qr class=\"qr-code\" :logoSrc=\"imageUrl\" :text=\"qrCodeUrl\" :size=\"150\" \/>\n  <\/div>\n<\/template>\n\n<script>\nimport vueQr from 'vue-qr'; \/\/ vue2.0\n\/\/ import vueQr from 'vue-qr\/src\/packages\/vue-qr.vue'; \/\/ vue3.0 (support vite)\n\nexport default {\n  components: { vueQr },\n  data() {\n    return {\n      qrCodeUrl: 'https:\/\/blog.csdn.net\/AdminGuan', \/\/ \u4e8c\u7ef4\u7801\u7684\u5185\u5bb9\n      imageUrl: require('..\/assets\/default.jpg') \/\/ icon\u8def\u5f84\n    };\n  },\n  methods: {}\n};\n<\/script>\n\n<style scoped>\n.flex-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n}\n.qr-code {\n  margin-top: 20px;\n  background-color: #fff;\n  border: 1px solid red;\n}\n<\/style><\/code><\/pre>\n
\u76f8\u5173\u914d\u7f6e\u5c5e\u6027<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u5c5e\u6027\u540d<\/th>\n\u542b\u4e49<\/th>\n<\/tr>\n
text<\/td>\n\u7f16\u7801\u5185\u5bb9<\/td>\n<\/tr>\n
correctLevel<\/td>\n\u5bb9\u9519\u7ea7\u522b\uff080 - 3\uff09<\/td>\n<\/tr>\n
size<\/td>\n\u5c3a\u5bf8\uff0c\u957f\u5bbd\u4e00\u81f4, \u5305\u542b\u5916\u8fb9\u8ddd<\/td>\n<\/tr>\n
margin<\/td>\n\u4e8c\u7ef4\u7801\u56fe\u50cf\u7684\u5916\u8fb9\u8ddd\uff0c\u9ed8\u8ba4 20px<\/td>\n<\/tr>\n
colorDark<\/td>\n\u5b9e\u70b9\u7684\u989c\u8272<\/td>\n<\/tr>\n
colorLight<\/td>\n\u7a7a\u767d\u533a\u7684\u989c\u8272<\/td>\n<\/tr>\n
bgSrc<\/td>\n\u6b32\u5d4c\u5165\u7684\u80cc\u666f\u56fe\u5730\u5740<\/td>\n<\/tr>\n
gifBgSrc<\/td>\n\u6b32\u5d4c\u5165\u7684\u80cc\u666f\u56fe gif \u5730\u5740\uff0c\u8bbe\u7f6e\u540e\u666e\u901a\u7684\u80cc\u666f\u56fe\u5c06\u5931\u6548\u3002\u8bbe\u7f6e\u6b64\u9009\u9879\u4f1a\u5f71\u54cd\u6027\u80fd<\/td>\n<\/tr>\n
backgroundColor<\/td>\n\u80cc\u666f\u8272<\/td>\n<\/tr>\n
backgroundDimming<\/td>\n\u53e0\u52a0\u5728\u80cc\u666f\u56fe\u4e0a\u7684\u989c\u8272\uff0c\u5728\u89e3\u7801\u6709\u96be\u5ea6\u7684\u65f6\u6709\u4e00\u5b9a\u5e2e\u52a9<\/td>\n<\/tr>\n
logoSrc<\/td>\n\u5d4c\u5165\u81f3\u4e8c\u7ef4\u7801\u4e2d\u5fc3\u7684 logo \u5730\u5740<\/td>\n<\/tr>\n
logoScale<\/td>\n\u7528\u4e8e\u8ba1\u7b97 logo \u5927\u5c0f\u7684\u503c\uff0c\u8fc7\u5927\u5c06\u5bfc\u81f4\u89e3\u7801\u5931\u8d25\uff0clogo \u5c3a\u5bf8\u8ba1\u7b97\u516c\u5f0f logoScale * (size - 2 * margin)\uff0c\u9ed8\u8ba4 0.2<\/td>\n<\/tr>\n
logoMargin<\/td>\nlogo \u6807\u8bc6\u5468\u56f4\u7684\u7a7a\u767d\u8fb9\u6846\uff0c\u9ed8\u8ba4\u4e3a 0<\/td>\n<\/tr>\n
logoBackgroundColor<\/td>\nlogo \u80cc\u666f\u8272\uff0c\u9700\u8981\u8bbe\u7f6e logo margin<\/td>\n<\/tr>\n
logoCornerRadius<\/td>\nlogo \u6807\u8bc6\u53ca\u5176\u8fb9\u6846\u7684\u5706\u89d2\u534a\u5f84\uff0c\u9ed8\u8ba4\u4e3a 0<\/td>\n<\/tr>\n
whiteMargin<\/td>\n\u82e5\u8bbe\u4e3a true\uff0c\u80cc\u666f\u56fe\u5916\u5c06\u7ed8\u5236\u767d\u8272\u8fb9\u6846<\/td>\n<\/tr>\n
dotScale<\/td>\n\u6570\u636e\u533a\u57df\u70b9\u7f29\u5c0f\u6bd4\u4f8b\uff0c\u9ed8\u8ba4\u4e3a 0.35<\/td>\n<\/tr>\n
autoColor<\/td>\n\u82e5\u4e3a true\uff0c\u56fe\u50cf\u5c06\u88ab\u4e8c\u503c\u5316\u5904\u7406\uff0c\u672a\u6307\u5b9a\u9608\u503c\u5219\u4f7f\u7528\u9ed8\u8ba4\u503c<\/td>\n<\/tr>\n
binarizeThreshold<\/td>\n(0 < threshold < 255) \u4e8c\u503c\u5316\u5904\u7406\u7684\u9608\u503c<\/td>\n<\/tr>\n
callback<\/td>\n\u751f\u6210\u7684\u4e8c\u7ef4\u7801 data url \u53ef\u4ee5\u5728\u56de\u8c03\u4e2d\u53d6\u5f97\uff0c\u7b2c\u4e00\u4e2a\u53c2\u6570\u4e3a\u4e8c\u7ef4\u7801 data url\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u4e3a props \u4f20\u8fc7\u6765\u7684 qid(\u56e0\u4e3a\u4e8c\u7ef4\u7801\u751f\u6210\u662f\u5f02\u6b65\u7684\uff0c\u6240\u4ee5\u52a0\u4e2a id \u7528\u4e8e\u6392\u5e8f)<\/td>\n<\/tr>\n
bindElement<\/td>\n\u6307\u5b9a\u662f\u5426\u9700\u8981\u81ea\u52a8\u5c06\u751f\u6210\u7684\u4e8c\u7ef4\u7801\u7ed1\u5b9a\u5230 HTML \u4e0a\uff0c\u9ed8\u8ba4\u662f true<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\u672c\u7bc7\u6587\u7ae0\u6765\u6e90\u4e8eCSDN\uff1ahttps:\/\/blog.csdn.net\/AdminGuan\/article\/details\/127855812<\/p>\n","raw":"","protected":false},"excerpt":{"rendered":"
\u65b9\u5f0f\u4e00\uff1aqrcode\uff08\u65e0 icon \u56fe\u6807\uff09 npm i qrcodejs2 –save \u5b8c\u6574\u4ee3\u7801 <template&gt …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"emotion":"","emotion_color":"","title_style":"","license":"","footnotes":""},"categories":[13],"tags":[],"class_list":["post-3032","post","type-post","status-publish","format-standard","hentry","category-vue"],"post_thumbnail_image":"","content_first_image":null,"post_medium_image_300":"","post_thumbnail_image_624":"","post_frist_image":null,"post_medium_image":"","post_large_image":"","post_full_image":"","post_all_images":[],"videoAdId":"","listAd":"0","listAdId":"","listAdEvery":6,"total_comments":0,"category_name":"Vue","post_date":"2023-08-28","like_count":"0","praiseWord":"\u9f13\u52b1","copyright_state":"","excitationAd":"0","rewardedVideoAdId":"","detailAdId":"","detailAd":"0","enterpriseMinapp":"0","audios":[],"postImageUrl":"https:\/\/wp-moto-1258805347.cos.ap-shanghai.myqcloud.com\/2023\/05\/20230519082947553.jpg","avatarurls":[],"related_posts":null,"pageviews":370,"next_post_id":3473,"next_post_title":"\u524d\u7aef\u7ebf\u4e0a\u90e8\u7f72\uff0c\u5982\u4f55\u901a\u77e5\u7528\u6237\u6709\u65b0\u7248\u672c\uff1f\uff1f\uff1f","previous_post_id":3067,"previous_post_title":"\u767e\u5ea6\u5730\u56fe BMap InfoWindow\u4fee\u6539\u9ed8\u8ba4\u6837\u5f0f Css","_links":{"self":[{"href":"https:\/\/xinchewhd.com.cn\/index.php\/wp-json\/wp\/v2\/posts\/3032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xinchewhd.com.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xinchewhd.com.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xinchewhd.com.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xinchewhd.com.cn\/index.php\/wp-json\/wp\/v2\/comments?post=3032"}],"version-history":[{"count":0,"href":"https:\/\/xinchewhd.com.cn\/index.php\/wp-json\/wp\/v2\/posts\/3032\/revisions"}],"wp:attachment":[{"href":"https:\/\/xinchewhd.com.cn\/index.php\/wp-json\/wp\/v2\/media?parent=3032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xinchewhd.com.cn\/index.php\/wp-json\/wp\/v2\/categories?post=3032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xinchewhd.com.cn\/index.php\/wp-json\/wp\/v2\/tags?post=3032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}