Vue生成二维码_vue通过二维码分享
Vue 分享 生成 通过 二维码
2023-06-13 09:15:00 时间
大家好,又见面了,我是你们的朋友全栈君。
转存 vue 生成二维码并下载
1、下载插件
npm install --save qrcodejs2
2、引入
const QRCode = require("qrcodejs2")
3、组件使用
<template>
<div class="qr_code">
<div style="display: flex;align-items: center">
地址:<Input id="text" type="text" v-model="urlx" style="width:400px"/><br/>
<Button style="margin: 0 10px;" type="primary" @click="getMadeQrCode">生成</Button>
二维码名称:<Input type="text" v-model="qrCodeName" style="width:200px;"/><br/>
<Button style="margin-left: 10px" type="primary" @click="downloadQrCode">下载</Button>
</div>
<div id="qrcode" ref="qrcodeU" style="width:200px; height:200px; margin-top:15px;"></div>
</div>
</template>
4、生成二维码
//二维码生成
async getMadeQrCode() {
document.getElementById('qrcode').innerHTML = ''; //生成前先清除上一个
let qrcode = new QRCode(this.$refs.qrcodeU, {
text: this.urlx,//二维码包含的信息
width: 200,
height: 200,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/188118.html原文链接:https://javaforall.cn
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- vue集成海康h5player实现播放
- 在vue中使用jsx
- Vue学习笔记2-安装Vue
- Vue–模板语法[通俗易懂]
- 支付宝授权登录淘宝_vue的登录实现
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- vue面试之Composition-API响应式包装对象原理
- 免费开源~啦~啦~Vue Admin Work开源系列再添一员猛将
- Vue响应式依赖收集原理分析-vue高级必备
- Markdown文件居然也可以直接作为Vue路由组件?
- vue封装jquery修改自身以及兄弟元素的方法「建议收藏」
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- VUE组件封装_vue组件内部双向绑定
- vue如何生成二维码_vue实现扫描二维码
- Vue生成二维码_vue视频软件怎么生成二维码
- js 分页插件_vue分页组件
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- 百度前端一面必会vue面试题合集
- Vue 父子组件通信传值(子组件中使用父组件中的数据)
- Vue计算属性
- 开心档-软件开发入门之Vue.js Ajax(vue-resource)
- 安装Vue on Linux:轻松搭建开发环境(linux安装vue)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- 基于Vue的Redis网页设计(vue设计redis页面)
- Vue用Redis储存获取数据(vue获取redis)
- Vue实时监测Redis变化(vue监控redis变化)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- 研究Oracle VUE价格探究深入探究和分析(oracle vue价格)