最近有個需求需要實現自定義首頁佈局，需要將屏幕按照 6 列 4 行進行等分成多個格子，然後將組件可拖拽對應格子進行渲染展示。 示例 對比一些已有的插件，發現想要實現產品的交互效果，沒有現成可用的。本身功能並不是太過複雜，於是決定自己基於 vue 手擼一個簡易的 Grid 拖拽佈局。 完整源碼在此，在 ...
標題：基於uQRCode封裝的Vue3二維碼生成插件
摘要：本文介紹了一種基於uQRCode封裝的Vue3二維碼生成插件，可以在Javascript運行環境下生成二維碼並返回圖片地址。該插件適用於所有Javascript運行環境，並且支持微信小程式。本文將詳細介紹該插件的使用方法，並給出一個基於Vue3的示例。
關鍵詞：Vue3，uQRCode，二維碼生成，Javascript，微信小程式
一、引言
隨著移動互聯網的普及，二維碼已經成為了人們生活中不可或缺的一部分。在Web應用中，經常需要生成二維碼來方便用戶掃碼。而Vue3作為目前最流行的前端框架之一，也需要一個方便易用的二維碼生成插件。本文將介紹一種基於uQRCode封裝的Vue3二維碼生成插件，可以在Javascript運行環境下生成二維碼並返回圖片地址。
效果圖如下：
二、技術背景
Vue3
Vue3是Vue.js框架的下一代版本，它在性能、可維護性和可擴展性方面都有了很大的提升。Vue3採用了更簡潔、更直觀的API設計，使得開發者能夠更加高效地開發Web應用。
uQRCode
uQRCode是一個輕量級的二維碼生成庫，它可以在客戶端生成二維碼圖片，並且支持自定義二維碼的顏色、大小、背景等屬性。uQRCode支持多種運行環境，包括瀏覽器、Node.js、微信小程式等。
三、插件實現
使用方法
複製代碼
引入js文件
import uQRCode from './common/uqrcode.js'
<view class="canvas">
<!-- 二維碼插件 width height設置寬高 -->
<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
</view>
<text class="list-text">{{ '預約號碼:' + ' ' + myFormatData.yyh}}
</text>
<text class="list-text"> {{ '預約視窗:' + ' ' + myFormatData.bsdmc}}
</text>
<text class="list-text"> {{ '業務類型:' + ' ' + myFormatData.Yylxmc}}
</text>
<text class="list-text"> {{ '預約日期:' + ' ' + myFormatData.yyrq}}
</text>
</view>
附完整組件代碼下載地址：https://ext.dcloud.net.cn/plugin?id=15095#detail
