生活随笔
收集整理的這篇文章主要介紹了
前端QRCode.js生成二维码插件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
填報二維碼生成
http://code.ciaoca.com/javascript/qrcode/demo/
git倉庫地址
<el
-table
:data
="scenicForm" style
="width: 100%" border
><el
-table
-column label
="二維碼" width
="180"><template slot
-scope
="scope"><div
:id
="'item_' + scope.row.id"></div
><a href
="" download
="erweima">點擊下載二維碼
</a
></template
></el
-table
-column
>
</el
-table
>
export default {data() {return {}},methods
:{qrcode(qrcode
, text
) {let qrcode2
= new QRCode(qrcode
, {width
: 100,height
: 100, text
: text
}),getInfo(){this.$store
.dispatch('sInfo').then(data
=> {if (!data
) {this.$message({message
: '沒有信息',type
: 'warning'});return;}this.scenicForm
= data
.list
;this.$nextTick(() => {data
.list
.forEach(item
=> {let gid
= 'item_' + item
.id
;let parent
=document
.getElementById(gid
)let children
= parent
.getElementsByTagName('img');if(children
.length
>0){for(let i
=0;i
<children
.length
;i
++){parent
.removeChild(children
[i
]);} }});this.$nextTick(() => {data
.list
.forEach(item
=> {this.qrcode('item_' + item
.id
, item
.qp_code
|| this.testerweima
);let gid
= 'item_' + item
.id
;setTimeout(() => {document
.getElementById(gid
).nextElementSibling
.href
= document
.getElementById(gid
).children
[1].src
;});});});});}},
一定要在div生成之后再生成二維碼，否則就會出現(xiàn)Cannot read property ‘a(chǎn)ppendChild’ of null"的錯誤
如果是點擊按鈕調(diào)用，就用click方法，如果是組件渲染得時候調(diào)用，就寫在mouted里面
總結(jié)
以上是生活随笔為你收集整理的前端QRCode.js生成二维码插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
