解决vue3-print-nb打印二维码定位(qrcode.vue) 问题
生活随笔
收集整理的這篇文章主要介紹了
解决vue3-print-nb打印二维码定位(qrcode.vue) 问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
解決vue3-print-nb打印二維碼定位(qrcode.vue) 問題
在使用vu3-print-nb搭配qrcode.vue產生二維碼的時候,我的代碼是設置了全部元素都居中顯示的,效果如下
<div id="qrcode"><div style="margin-bottom: 20px">生產工單二維碼</div><div class="qrbox"><qrcode-vuesize="300"class="code":value="`workOrder-8bRDO7ieHOU4kVO2-${qrCodeInfo.id}`"></qrcode-vue></div><div style="margin-top: 30px; margin-bottom: 20px">工單id: {{ qrCodeInfo.id }}</div><div class="text">客戶名稱: {{ qrCodeInfo.customerName }}</div><div class="text">產品名稱: {{ qrCodeInfo.productName }}</div><div class="text">產品編號: {{ qrCodeInfo.productNumber }}</div><div>訂單編號: {{ qrCodeInfo.orderNo }}</div></div><style lang="scss" scoped> #qrcode {text-align: center;font-weight: 700;font-size: 20px;.text {margin-bottom: 20px;} } </style>
但當點擊打印的時候,打印頁面的二維碼就不會自動居中,而是跑到了左上角
所以想要解決使二維碼居中或者是其他位置的時候就要在css里面更改如下代碼,注意一定要寫
@media print,而@media print里面的class就是修改打印頁面樣式的class。
我這里給包裹二維碼的box設置了class =“qrbox”,所以在qrbox里面修改二維碼的樣式,不過注意的是 transform: translate();這類屬性在對qrcode二維碼進行位置的修改是不起作用的,所以我這里是給了一個相對定位并且使用top,left等屬性對二維碼進行定位,完成效果如下
總結
以上是生活随笔為你收集整理的解决vue3-print-nb打印二维码定位(qrcode.vue) 问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【转】iOS右滑返回手势全解和最佳实施方
- 下一篇: 《青春》 by 席慕容