minya
/
vue3-mgt-template
mirror of https://github.com/LCJ-MinYa/vue3-mgt-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 二维码生成插件

Browse Source
master
lichaojun 1 week ago
parent 3dd9324308
commit 075ca62f7e
5 changed files with 120 additions and 115 deletions
Show Stats Download Patch File Download Diff File

55
chromePlugin/contentToQrCode/index.html
Unescape Escape View File

@ -1,29 +1,38 @@
<!DOCTYPE html>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容转二维码</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>内容转二维码</title>
<link
rel="stylesheet"
href="style.css"
/>
</head>
<body>
<div class="container">
<h1>内容转二维码生成器</h1>
<p>将您的文本粘贴到下面的框中，然后点击“生成二维码”按钮。</p>
<div class="container">
<h1>内容转二维码生成器</h1>
<p>将您的文本粘贴到下面的框中，然后点击“生成二维码”按钮。</p>
<textarea
id="text-input"
rows="10"
placeholder="请在此处粘贴您的文本内容..."
></textarea>
<textarea id="text-input" rows="10" placeholder="请在此处粘贴您的文本内容..."></textarea>
<button id="generate-btn">生成二维码</button>
<button id="generate-btn">生成二维码</button>
<div id="qrcode-container">
<!-- 二维码将在这里生成 -->
</div>
</div>
<div id="qrcode-container">
<!-- 二维码将在这里生成 -->
</div>
</div>
<!-- 引入 qrcode.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<!-- 引入我们自己的逻辑脚本 -->
<script src="main.js"></script>
</body>
<!-- 引入 qrcode.js 库 -->
<script src="qrcode.min.js"></script>
<!-- 引入我们自己的逻辑脚本 -->
<script src="main.js"></script>
</body>
</html>

116
chromePlugin/contentToQrCode/main.js
Unescape Escape View File

@ -2,74 +2,74 @@
// 当整个页面的HTML内容加载完成后，执行此函数
document.addEventListener('DOMContentLoaded', () => {
// 获取页面上的关键元素
const textInput = document.getElementById('text-input');
const generateBtn = document.getElementById('generate-btn');
const qrcodeContainer = document.getElementById('qrcode-container');
// 获取页面上的关键元素
const textInput = document.getElementById('text-input');
const generateBtn = document.getElementById('generate-btn');
const qrcodeContainer = document.getElementById('qrcode-container');
// 为“生成二维码”按钮添加点击事件监听器
generateBtn.addEventListener('click', () => {
// 获取输入框中的文本，并用 trim() 清除前后的空白字符
const text = textInput.value.trim();
// 为“生成二维码”按钮添加点击事件监听器
generateBtn.addEventListener('click', () => {
// 获取输入框中的文本，并用 trim() 清除前后的空白字符
const text = textInput.value.trim();
// 在生成新的二维码之前，清空之前可能存在的旧二维码
qrcodeContainer.innerHTML = '';
// 在生成新的二维码之前，清空之前可能存在的旧二维码
qrcodeContainer.innerHTML = '';
// 如果文本为空，则不执行任何操作
if (!text) {
console.log('输入内容为空，已中止生成。');
return;
}
// 如果文本为空，则不执行任何操作
if (!text) {
console.log('输入内容为空，已中止生成。');
return;
}
// 定义每个二维码的最大字符数
const chunkSize = 2000;
// 计算需要生成多少个二维码
const totalChunks = Math.ceil(text.length / chunkSize);
// 定义每个二维码的最大字符数
const chunkSize = 1000;
// 计算需要生成多少个二维码
const totalChunks = Math.ceil(text.length / chunkSize);
console.log(`总字符数: ${text.length}，将生成 ${totalChunks} 个二维码。`);
console.log(`总字符数: ${text.length}，将生成 ${totalChunks} 个二维码。`);
// 循环处理每一块文本
for (let i = 0; i < totalChunks; i++) {
// 计算当前块的起始和结束位置
const start = i * chunkSize;
const end = start + chunkSize;
// 从总文本中截取当前块的文本
const chunk = text.substring(start, end);
// 循环处理每一块文本
for (let i = 0; i < totalChunks; i++) {
// 计算当前块的起始和结束位置
const start = i * chunkSize;
const end = start + chunkSize;
// 从总文本中截取当前块的文本
const chunk = text.substring(start, end);
// --- 创建包裹单个二维码及其标签的容器 ---
const itemDiv = document.createElement('div');
itemDiv.className = 'qrcode-item';
// --- 创建包裹单个二维码及其标签的容器 ---
const itemDiv = document.createElement('div');
itemDiv.className = 'qrcode-item';
// --- 创建并添加序号标签 ---
const label = document.createElement('p');
label.className = 'qrcode-label';
// 如果总数大于1，则显示 "二维码 x/y"，否则只显示 "二维码"
label.textContent = totalChunks > 1 ? `二维码 ${i + 1}/${totalChunks}` : '二维码';
itemDiv.appendChild(label);
// --- 创建并添加序号标签 ---
const label = document.createElement('p');
label.className = 'qrcode-label';
// 如果总数大于1，则显示 "二维码 x/y"，否则只显示 "二维码"
label.textContent = totalChunks > 1 ? `二维码 ${i + 1}/${totalChunks}` : '二维码';
itemDiv.appendChild(label);
// --- 创建用于生成二维码的占位符元素 ---
const qrcodeDiv = document.createElement('div');
// 给这个div一个唯一的ID，虽然qrcodejs也可以直接接收元素对象
qrcodeDiv.id = `qrcode-${i}`;
itemDiv.appendChild(qrcodeDiv);
// --- 创建用于生成二维码的占位符元素 ---
const qrcodeDiv = document.createElement('div');
// 给这个div一个唯一的ID，虽然qrcodejs也可以直接接收元素对象
qrcodeDiv.id = `qrcode-${i}`;
itemDiv.appendChild(qrcodeDiv);
// --- 将完整的二维码项（标签+占位符）添加到主容器中 ---
qrcodeContainer.appendChild(itemDiv);
// --- 将完整的二维码项（标签+占位符）添加到主容器中 ---
qrcodeContainer.appendChild(itemDiv);
// --- 使用 qrcode.js 库生成二维码 ---
// 实例化 QRCode 对象
// 第一个参数是二维码要渲染到的DOM元素
// 第二个参数是配置对象
new QRCode(qrcodeDiv, {
text: chunk, // 当前块的文本内容
width: 400, // 二维码宽度
height: 400, // 二维码高度
colorDark: '#000000', // 二维码颜色
colorLight: '#ffffff', // 二维码背景色
correctLevel: QRCode.CorrectLevel.H // 纠错级别，H是最高级
});
// --- 使用 qrcode.js 库生成二维码 ---
// 实例化 QRCode 对象
// 第一个参数是二维码要渲染到的DOM元素
// 第二个参数是配置对象
new QRCode(qrcodeDiv, {
text: chunk, // 当前块的文本内容
width: 400, // 二维码宽度
height: 400, // 二维码高度
colorDark: '#000000', // 二维码颜色
colorLight: '#ffffff', // 二维码背景色
correctLevel: QRCode.CorrectLevel.H, // 纠错级别，H是最高级
});
console.log(`已为第 ${i + 1} 块内容生成二维码。`);
}
});
console.log(`已为第 ${i + 1} 块内容生成二维码。`);
}
});
});

25
chromePlugin/contentToQrCode/manifest.json
Unescape Escape View File

@ -1,17 +1,12 @@
{
"manifest_version": 3,
"name": "内容转二维码",
"version": "1.0",
"description": "将长文本内容分割并生成一个或多个二维码的页面。",
"action": {
"default_title": "内容转二维码"
},
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
"manifest_version": 3,
"name": "内容转二维码",
"version": "1.0",
"description": "将长文本内容分割并生成一个或多个二维码的页面。",
"action": {
"default_title": "内容转二维码"
},
"background": {
"service_worker": "background.js"
}
}

1
chromePlugin/contentToQrCode/qrcode.min.js vendored
View File

File diff suppressed because one or more lines are too long

32
src/views/welcome/config.json
Unescape Escape View File

@ -1,12 +1,12 @@
{
"totalNotes": 74,
"totalNotes": 76,
"categories": 5,
"lastUpdated": "2025-10-15T08:30:23.764Z",
"weeklyAdded": 8,
"lastUpdated": "2025-10-17T12:02:18.785Z",
"weeklyAdded": 20,
"categoryChartData": [
{
"name": "demo",
"value": 63
"value": 65
},
{
"name": "python",
@ -27,16 +27,16 @@
],
"recentNotes": [
{
"path": "demo/scssLiveTranslate/index.vue",
"title": "SCSS → CSS 实时翻译器",
"path": "demo/messageBoxWithHtml.vue",
"title": "messageBoxWithHtml",
"category": "demo",
"date": "2025-10-15"
"date": "2025-10-17"
},
{
"path": "demo/cssDemo.vue",
"title": "cssDemo",
"path": "demo/base64Tool.vue",
"title": "base64编码解码工具",
"category": "demo",
"date": "2025-10-15"
"date": "2025-10-17"
},
{
"path": "demo/tuiImageEditor/index.vue",
@ -45,16 +45,16 @@
"date": "2025-10-15"
},
{
"path": "demo/deletdNodeModules/index.vue",
"title": "删除 node_modules 文件夹非常耗时解决办法",
"path": "demo/scssLiveTranslate/index.vue",
"title": "SCSS → CSS 实时翻译器",
"category": "demo",
"date": "2025-10-14"
"date": "2025-10-15"
},
{
"path": "demo/asyncDynComp/index.vue",
"title": "异步动态加载组件",
"path": "demo/cssDemo.vue",
"title": "cssDemo",
"category": "demo",
"date": "2025-10-11"
"date": "2025-10-15"
}
]
}
Write Preview
Loading…
Cancel
Save