添加生成条形码功能 #89

1. 添加以来vue-color,jsbarcode。
vue-color 是一个颜色选择器.
https://github.com/xiaokaike/vue-color.git

jsbarcode 是该功能的核心工具，能够生成各类条形码
https://github.com/lindell/JsBarcode.git

2. 仿照jsbarcode的demo页面将条码生成功能集成到CTool中
https://lindell.me/JsBarcode/generator/

package-lock.json

 {
   "name": "c-tool",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3265,6 +3265,11 @@
       "dev": true,
       "optional": true
     },
+    "clamp": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
+      "integrity": "sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ="
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -7001,6 +7006,11 @@
         "esprima": "^4.0.0"
       }
     },
+    "jsbarcode": {
+      "version": "3.11.5",
+      "resolved": "https://registry.npmjs.org/jsbarcode/-/jsbarcode-3.11.5.tgz",
+      "integrity": "sha512-zv3KsH51zD00I/LrFzFSM6dst7rDn0vIMzaiZFL7qusTjPZiPtxg3zxetp0RR7obmjTw4f6NyGgbdkBCgZUIrA=="
+    },
     "jsbn": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
@@ -7636,6 +7646,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -12345,6 +12360,17 @@
       "integrity": "sha512-cCjEgTD4nO5YQeRgdrrOqN7Qc2MzBx2u90J/CJ3Gp4PZ2sUONZE67/Qy+zWNHCWVCYsSEIvbnPSuiiQeEr1KSQ==",
       "dev": true
     },
+    "vue-color": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
+      "integrity": "sha512-BoLCEHisXi2QgwlhZBg9UepvzZZmi4176vbr+31Shen5WWZwSLVgdScEPcB+yrAtuHAz42309C0A4+WiL9lNBw==",
+      "requires": {
+        "clamp": "^1.0.1",
+        "lodash.throttle": "^4.0.0",
+        "material-colors": "^1.0.0",
+        "tinycolor2": "^1.1.2"
+      }
+    },
     "vue-eslint-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",

package.json

@@ -28,6 +28,7 @@
         "js-base64": "^2.6.4",
         "js-htmlencode": "^0.3.0",
         "js-yaml": "^3.14.1",
+        "jsbarcode": "^3.11.5",
         "json-to-properties": "^1.1.3",
         "jsonlint": "^1.6.3",
         "jsrsasign": "^10.4.1",
@@ -55,6 +56,7 @@
         "uuid": "^8.3.2",
         "view-design": "^4.6.1",
         "vue": "^2.6.14",
+        "vue-color": "^2.8.1",
         "vue-router": "^3.5.3",
         "x2js": "github:abdolence/x2js"
     },

src/config.js

@@ -40,6 +40,7 @@ const tool = [
     {'name': 'url', 'title': 'URL编码', 'cat': ['conversion']},
     {'name': 'timestamp', 'title': '时间戳', 'cat': ['conversion']},
     {'name': 'qrCode', 'title': '二维码', 'cat': ['generate']},
+    {'name': 'barcode', 'title': '条形码', 'cat': ['generate']},
     {'name': 'pinyin', 'title': '汉字转拼音', 'cat': ['conversion']},
     {'name': 'ip', 'title': 'IP地址查询', 'cat': ['other']},
     {'name': 'code', 'title': '代码格式化', 'cat': ['other']},

src/tool.router.js

@@ -70,6 +70,10 @@ const routes = [
         path: '/tool/qrCode',
         component: r => require(['./views/tool/qrCode.vue'], r)
     },
+    {
+        path: '/tool/barcode',
+        component: r => require(['./views/tool/barcode.vue'], r)
+    },
     {
         path: '/tool/randomString',
         component: r => require(['./views/tool/randomString.vue'], r)