松山湖网站建设,wordpress主题发布站源码,网页开发基础知识,软文营销的软文形式目录
概要
构建展示的vue组件qrcode.vue
组件的使用 概要
项目中用到需要展示二维码的样式#xff0c;想到了qrcode
例如#xff1a; 前提#xff1a;安装包
npm install qrcodejs2 --save
构建展示的vue组件qrcode.vue
templatediv stylewidth: …目录
概要
构建展示的vue组件qrcode.vue
组件的使用 概要
项目中用到需要展示二维码的样式想到了qrcode
例如 前提安装包
npm install qrcodejs2 --save
构建展示的vue组件qrcode.vue
templatediv stylewidth: 100%;height: 100%; :idid :refid/div
/template
script
import QRCode from qrcodejs2
export default {data() {return {qrcode: }},props: {id: {type: String,required: true},text: { // 后端返回的二维码地址type: String,default: M000001},width: {type: String,default: 100},height: {type: String,default: 100},colorDark: {type: String,default: #000000},colorLight: {type: String,default: #ffffff}},watch: {text(newText) {this.createQrcode()}},mounted() {this.createQrcode()},methods: {createQrcode() {if(this.qrcode) { // 有新的二维码地址了先把之前的清除掉this.$refs[this.id].innerHTML }this.qrcode new QRCode(this.$refs[this.id], {text: this.text, //页面地址 ,如果页面需要参数传递请注意哈希模式#width: this.width, // 二维码宽度 不支持100%height: this.height, // 二维码高度 不支持100%colorDark: this.colorDark,colorLight: this.colorLight,correctLevel: QRCode.CorrectLevel.H,})},// 制作另一个二维码updateCode() {this.qrcode.makeCode(http://naver.com)}}
}
/script
组件的使用 templatediv/***item为二维码的内容*colorDark为前景色*/QrCode :idQrCode :textitem colorDark#802126//div/template
script
import QrCode from ../../components/QRcode/qrCode.vue // 引用上面封装的二维码组件
export default {
components: { QrCode },//注册组件}/script小结
这个组件还是相当好用的多多推荐
