vue |
您所在的位置：网站首页 › numpy反转整个二维数组 › vue |
vue
|
简介
功能：用于生成二维码 优点：简单 缺点：不支持ie 官网：www.npmjs.com/package/vue… 实现效果 注意vue2、vue3 导入方式有点差异 // vue2.x import VueQr from 'vue-qr' // vue3.x import vueQr from 'vue-qr/src/packages/vue-qr.vue' 复制代码 使用 复制代码关于图片导入下面会细说 import logoImg from '@/assets/logo.png' // 先把图片导入存在一个变量里 export default { // 注册组件 components: {vueQr}, data(){ return{ logoPath: logoImg, // 或者用require()来导入 // logoPath: require('@/assets/logo.png'), textValue:'https://cn.vuejs.org/' } } } 复制代码 下载二维码下载二维码这个功能，只需要加一个按钮元素然后绑定一个点击事件 // 事件处理函数 downloadQR() { const a = document.createElement('a') // 下载的文件名 a.download = '二维码' // url a.href = this.$refs.qrCode.$el.src // 触发点击 a.click() }, 复制代码 主要配置项 text二维码要展示的内容logoSrc二维码中间的小logologoScale小logo的大小（别搞太大，超过容错率识别不出来的）size整个二维码所占空间的大小，（宽高相等，包含margin）可能需要你自己用css设置一下图片宽高100%margin二维码的外边距（默认 20px）全部配置项自行去官网查 注意--安装失败这个问题我也是通过另一个作者的文章来解决的 原文：blog.csdn.net/weixin_4271… 安装vue-qr这个包的时候可能卡在某个地方无法安装 需要在根目录下新建一个配置文件 用yarn安装就是 .yarnrc 用npm安装就是 .npmrc 多一句嘴：注意文件名是以点 . 开头的 通过上面的方法我成功安装上了vue-qr这个包，但是马上就报了一堆错，我猜应该就是上面的文件导致的，然后直接把刚才创建的文件删除就没事了 注意--图片引入关于中间那个logo图的导入 因为 :src 会将后面的值当做变量解析 所以我们可以将图片存在一个变量里 或者通过require()方法来导入 import logoImg from '@/assets/logo.png' // 先把图片导入存在一个变量里 export default { components: {vueQr}, data(){ return{ logoPath: logoImg, // 或者用require()来导入 // logoPath: require('@/assets/logo.png'), textValue:'https://cn.vuejs.org/' } } } 复制代码还可以直接在组件中通过require()来导入 复制代码 |
【本文地址】
今日新闻 |
推荐新闻 |