vue-生成二维码生成点击输入框内叉号移除生成的二维码输入框聚焦
Posted 水香木鱼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-生成二维码生成点击输入框内叉号移除生成的二维码输入框聚焦相关的知识,希望对你有一定的参考价值。
博主介绍
📢点击下列内容可跳转对应的界面,查看更多精彩内容!
文章目录
简介:这是一篇有关【vue-生成二维码【生成、点击输入框内叉号移除生成的二维码、输入框聚焦】】的文章,博主用
最精简的语言
去表达给前端读者们。
1、安装QR code
npm i qrcodejs2 --save
2、完整代码
<!-- 必要时使用this.$nextTick()确保数据渲染 -->
<template>
<div>
<el-input
v-model="value"
clearable
ref="focus"
style="width: 50%"
@clear="deleteQrcode()"
/>
<el-button @click="createQrcode()" @keyup.enter="keyupSubmit()"
>生成二维码</el-button
>
<section class="qrcode-content">
<div id="qrcodeImg" ref="qrcodeImg" />
</section>
</div>
</template>
<script>
import QRCode from "qrcodejs2";
export default
data()
return
handleStatus: false,
// 要转换为二维码的文字或链接
value: "https://blog.csdn.net/weixin_48337566?type=blog",
// 二维码实例
qr: null,
;
,
created()
this.keyupSubmit();
,
methods:
// 键盘事件
keyupSubmit()
document.onkeydown = (e) =>
let _key = window.event.keyCode;
if (_key === 13 && !this.clickState)
this.createQrcode();
;
,
/**
* 创建二维码
* @description new QRcode()
* @return void
*/
createQrcode()
// 是否需要生成多个二维码(只要你new QRCode,会一直重复生成)
// 如果qr实例有内容了,就证明生成过了(直接return拦截)
//判断输入的内容是否为空,
if (this.value == "")
alert("请输入要生成的内容!");
else
if (this.qr != null) return false;
// 创建二维码实例
// 第一个参数: 要渲染的DOM(ref获取或id获取)
// 第二个参数: 二维码各项配置介绍(详见文章底部)
this.qr = new QRCode(this.$refs.qrcodeImg,
text: this.value,
width: 200,
height: 200,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
);
,
/**
* 移除二维码
* @description innerhtml
* @return void
*/
deleteQrcode()
// 清空实例与innerHTML
this.qr = null;
this.$refs.qrcodeImg.innerHTML = "";
this.$refs["focus"].focus(); //输入框自动聚焦
,
,
;
</script>
<style scoped>
/* 样式根据您的需求修改即可 */
.qrcode-content
/* 二维码最外层容器 */
margin-top: 20px;
</style>
3、配置文档
名称 | 默认值 | 文字说明 |
---|---|---|
text | - | 转换的链接或者文字 |
width | 200 | 图片宽度 |
height | 200 | 图片高度 |
colorDark | #ffffff | 前景色 |
colorLight | #1890ff | 背景色 |
correctLevel | QRCode CorrectLevel.L | 容错级别,可设置为: QRCode CorrectLevel.L、QRCode CorrectLevel.M、QRCode CorrectLevel.Q、QRCode CorrectLevel.H(从上至下生成二维码的密度越来越高 L-M-Q-H) |
render | canvas | 渲染方式,默认canvas,可选table |
相关推荐
⭐vue基于promise可以用于浏览器和node.js的网络请求库【axios封装-收藏版】
⭐vue实现按钮弹框【弹出图片、视频、表格、表单等】
⭐前端清除项目默认样式【拿去即用】
⭐前端实现放大镜效果【原生js实现、vue实现】
⭐前端element-ui组件库el-card卡片【hover效果与点击事件(点击无效用@click.native=““)解决】
以上是关于vue-生成二维码生成点击输入框内叉号移除生成的二维码输入框聚焦的主要内容,如果未能解决你的问题,请参考以下文章