diff --git a/package-lock.json b/package-lock.json
index 24180326b5c3d6aef30bd48d2c27e7d18bbc971c..5cc53f0f7ed155bdcea9a687529fe01418f3c293 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "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",
diff --git a/package.json b/package.json
index a6cded9c40903ba9b3d0050ecb133b5a8feee9c8..4ad75b6ba0edc02ba8b12a071425c52121247ca3 100644
--- a/package.json
+++ b/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"
     },
diff --git a/src/config.js b/src/config.js
index 8fafd726d8a8d5828eacf8a4c8cc34b9ebb07046..e0c36013d80a401b1002576e6904e593c038d689 100644
--- a/src/config.js
+++ b/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']},
diff --git a/src/tool.router.js b/src/tool.router.js
index 9b106b8ac17c410bfcd5e30892c01adf975838ce..cc7274b8b30b407cc61b3462ba650e706ec9e518 100644
--- a/src/tool.router.js
+++ b/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)
diff --git a/src/views/tool/barcode.vue b/src/views/tool/barcode.vue
index da05b4da0aca6905c2491afbc15e0bb5ec28e06c..f13434a2d5298f33e4d9bb0a3814c216fe000ccc 100644
--- a/src/views/tool/barcode.vue
+++ b/src/views/tool/barcode.vue
@@ -1,139 +1,133 @@
 <template>
-    <div>
-        <div style="height: 250px;line-height: 250px;text-align: center;vertical-align: middle;">
-            <canvas @click="saveImage" :style="`border: ${canvasBorder};vertical-align: middle;`" ref="barcode"
-                    class="barcode" v-show="!validStr" style="cursor:pointer"></canvas>
-            <p style="color: red" v-show="validStr">{{ validStr }}</p>
-        </div>
-        <div id="barcode-setting">
-            <Row :gutter="10">
-                <Col span="12">
-                    <Form :label-width="80">
-                        <FormItem :label="$t('barcode_content')">
-                            <Input v-model="current.text">
-                                <Select v-model="current.format" slot="append" style="width: 100px">
-                                    <Option v-for="type in barcodeFormat" :key="type" :value="type">{{ type }}</Option>
-                                </Select>
-                            </Input>
-                        </FormItem>
-                        <Row>
-                            <Col span="12">
-                                <FormItem :label="$t('barcode_background')">
-                                    <ColorPicker recommend v-model="current.background"/>
-                                </FormItem>
-                            </Col>
-                            <Col span="12">
-                                <FormItem :label="$t('barcode_line_color')">
-                                    <ColorPicker recommend v-model="current.lineColor"/>
-                                </FormItem>
-                            </Col>
-                        </Row>
-                        <FormItem :label="$t('barcode_bar_width')">
-                            <Row>
-                                <Col span="21">
-                                    <Slider v-model="current.width" :min="1" :max="4"></Slider>
-                                </Col>
-                                <Col span="3">
-                                    <span style="float: right">{{ this.current.width }}</span>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                        <FormItem :label="$t('barcode_height')">
-                            <Row>
-                                <Col span="21">
-                                    <Slider v-model="current.height" :min="10" :max="150"></Slider>
-                                </Col>
-                                <Col span="3">
-                                    <span style="float: right">{{ this.current.height }}</span>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                        <FormItem :label="$t('barcode_margin')">
-                            <Row>
-                                <Col span="21">
-                                    <Slider v-model="current.margin" :min="0" :max="25"></Slider>
-                                </Col>
-                                <Col span="3">
-                                    <span style="float: right">{{ this.current.margin }}</span>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                    </Form>
+  <div>
+    <Row>
+      <Col span="12">
+        <Card>
+          <Form :label-width="100">
+            <FormItem label="条码内容">
+              <Input v-model="current.text">
+                <Select v-model="current.format" slot="append" style="width: 100px">
+                  <Option v-for="type in barcodeFormat" :key="type" :value="type">{{ type }}</Option>
+                </Select>
+              </Input>
+            </FormItem>
+            <FormItem label="条码宽" class="line-item">
+              <Row>
+                <Col span="22">
+                  <Slider v-model="current.width" :min="0" :max="4"></Slider>
                 </Col>
-                <Col span="12">
-                    <Form :label-width="80">
-                        <FormItem :label="$t('barcode_show_text')">
-                            <RadioGroup v-model="current.textPosition" type="button">
-                                <Radio label="close">
-                                    <span>{{ $t('barcode_hide') }}</span>
-                                </Radio>
-                                <Radio label="top">
-                                    <span>{{ $t('barcode_top') }}</span>
-                                </Radio>
-                                <Radio label="bottom">
-                                    <span>{{ $t('barcode_bottom') }}</span>
-                                </Radio>
-                            </RadioGroup>
-                        </FormItem>
-                        <FormItem :label="$t('barcode_text_align')">
-                            <RadioGroup v-model="current.textAlign" type="button">
-                                <Radio :disabled="!showText" label="left">
-                                    <span>{{ $t('barcode_left') }}</span>
-                                </Radio>
-                                <Radio :disabled="!showText" label="center">
-                                    <span>{{ $t('barcode_center') }}</span>
-                                </Radio>
-                                <Radio :disabled="!showText" label="right">
-                                    <span>{{ $t('barcode_right') }}</span>
-                                </Radio>
-                            </RadioGroup>
-                        </FormItem>
-                        <FormItem :label="$t('barcode_font')">
-                            <Row :gutter="10">
-                                <Col span="12">
-                                    <Select :disabled="!showText" v-model="current.font">
-                                        <Option v-for="font in fontFamily" :key="font" :value="font">{{ font }}</Option>
-                                    </Select>
-                                </Col>
-                                <Col span="12">
-                                    <CheckboxGroup v-model="current.fontOptions">
-                                        <Checkbox :disabled="!showText" label="bold">
-                                            <span>{{ $t('barcode_bold') }}</span>
-                                        </Checkbox>
-                                        <Checkbox :disabled="!showText" label="italic">
-                                            <span>{{ $t('barcode_italic') }}</span>
-                                        </Checkbox>
-                                    </CheckboxGroup>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                        <FormItem :label="$t('barcode_font_size')">
-                            <Row>
-                                <Col span="22">
-                                    <Slider :disabled="!showText" v-model="current.fontSize" :min="8"
-                                            :max="36"></Slider>
-                                </Col>
-                                <Col span="2">
-                                    <span style="float: right">{{ this.current.fontSize }}</span>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                        <FormItem :label="$t('barcode_text_margin')">
-                            <Row>
-                                <Col span="22">
-                                    <Slider :disabled="!showText" v-model="current.textMargin" :min="-15"
-                                            :max="40"></Slider>
-                                </Col>
-                                <Col span="2">
-                                    <span style="float: right">{{ this.current.textMargin }}</span>
-                                </Col>
-                            </Row>
-                        </FormItem>
-                    </Form>
+                <Col span="2">
+                  <span style="float: right">{{ this.current.width }}</span>
                 </Col>
-            </Row>
-        </div>
-    </div>
+              </Row>
+            </FormItem>
+            <FormItem label="条码高" class="line-item">
+              <Row>
+                <Col span="22">
+                  <Slider v-model="current.height" :min="10" :max="150"></Slider>
+                </Col>
+                <Col span="2">
+                  <span style="float: right">{{ this.current.height }}</span>
+                </Col>
+              </Row>
+            </FormItem>
+            <FormItem label="条码外边距" class="line-item">
+              <Row>
+                <Col span="22">
+                  <Slider v-model="current.margin" :min="0" :max="25"></Slider>
+                </Col>
+                <Col span="2">
+                  <span style="float: right">{{ this.current.margin }}</span>
+                </Col>
+              </Row>
+            </FormItem>
+            <FormItem label="背景" class="line-item">
+              <Input type="text" id="backgroundInput" v-model="current.background.hex"
+                     @on-focus="openBackgroundPicker($event)"></Input>
+              <chrome-picker v-show="showBackgroundPicker" id="backgroundPicker" style="position: fixed;z-index: 1000"
+                             v-model="current.background"
+                             @input="updateBackground"/>
+            </FormItem>
+            <FormItem label="线条颜色" class="line-item">
+              <Input type="text" id="lineColorInput" v-model="current.lineColor.hex"
+                     @on-focus="openLineColorPicker"></Input>
+              <chrome-picker v-show="showLineColoePicker" id="lineColorPicker" style="position: fixed;z-index: 1000"
+                             v-model="current.lineColor"
+                             @input="updateLineColor"/>
+            </FormItem>
+            <FormItem label="显示文本" class="line-item">
+              <RadioGroup v-model="current.showText" type="button">
+                <Radio label="true">
+                  <span>显示</span>
+                </Radio>
+                <Radio label="false">
+                  <span>隐藏</span>
+                </Radio>
+              </RadioGroup>
+            </FormItem>
+            <div v-if="this.current.showText === 'true'">
+              <FormItem label="字体位置" class="line-item">
+                <RadioGroup v-model="current.textAlign" type="button">
+                  <Radio label="left">
+                    <span>居左</span>
+                  </Radio>
+                  <Radio label="center">
+                    <span>居中</span>
+                  </Radio>
+                  <Radio label="right">
+                    <span>居右</span>
+                  </Radio>
+                </RadioGroup>
+              </FormItem>
+              <FormItem label="字体" class="line-item">
+                <Select v-model="current.font">
+                  <Option v-for="font in fontFamily" :key="font" :value="font">{{ font }}</Option>
+                </Select>
+              </FormItem>
+              <FormItem label="字体样式" class="line-item">
+                <CheckboxGroup v-model="current.fontOptions">
+                  <Checkbox label="bold">
+                    <span>粗体</span>
+                  </Checkbox>
+                  <Checkbox label="italic">
+                    <span>斜体</span>
+                  </Checkbox>
+                </CheckboxGroup>
+              </FormItem>
+              <FormItem label="字体大小" class="line-item">
+                <Row>
+                  <Col span="22">
+                    <Slider v-model="current.fontSize" :min="8" :max="36"></Slider>
+                  </Col>
+                  <Col span="2">
+                    <span style="float: right">{{ this.current.fontSize }}</span>
+                  </Col>
+                </Row>
+              </FormItem>
+              <FormItem label="字体外边距" class="line-item">
+                <Row>
+                  <Col span="22">
+                    <Slider v-model="current.textMargin" :min="-15" :max="40"></Slider>
+                  </Col>
+                  <Col span="2">
+                    <span style="float: right">{{ this.current.textMargin }}</span>
+                  </Col>
+                </Row>
+              </FormItem>
+            </div>
+          </Form>
+        </Card>
+      </Col>
+      <Col span="12">
+        <Card>
+          <div>
+            <canvas id="barcode"></canvas>
+            <p style="color: red">{{ validStr }}</p>
+          </div>
+        </Card>
+      </Col>
+    </Row>
+  </div>
 </template>
 <script>
 /**
@@ -141,121 +135,178 @@
  * @date 2021/10/30
  * 基于jsbarcode生成条形码，可以自定义条码各项属性
  * 不支持中文
+ * 颜色选择器采用vue-color
  */
 import JsBarcode from 'jsbarcode'
+import {Chrome} from 'vue-color'
 
 export default {
-    created() {
-        this.$initToolData('text')
+  created() {
+    this.current = Object.assign(this.current, this.$getToolData("content"))
+  },
+  components: {
+    'chrome-picker': Chrome,
+  },
+  mounted() {
+    // 加载颜色选择器消失的事件
+    this.loadEvent()
+    // 生成默认的条形码
+    this.generate()
+  },
+  beforeDestroy() {
+    // 移除挂载时添加的事件
+    document.removeEventListener('click', () => {
+    }, true)
+  },
+  watch: {
+    current: {
+      handler() {
+        this.generate()
+      },
+      deep: true
+    }
+  },
+
+  methods: {
+    /**
+     * 检查
+     * @param event
+     * @param id
+     * @returns {boolean}
+     */
+    checkNodeContainsId(event, id) {
+      // 检查目标元素及目标元素上层是否存在指定id元素
+      let et = event.target
+      while (et && et.id !== undefined) {
+        // 检查当前元素上是否存在指定
+        if (et.id === id) {
+          return true
+        }
+        et = et.parentNode
+      }
     },
-    computed: {
-        showText() {
-            return ['top', 'bottom'].includes(this.current.textPosition)
-        },
-        canvasBorder() {
-            if (this.current.background.toUpperCase() === "#FFFFFF") {
-                return "1px dashed #666"
-            }
-            return "1px dashed #fff";
+    loadEvent() {
+      let _this = this
+      document.addEventListener('click', (e) => {
+        // 如果点击的区域不是输入框或者是背景色选择器则将背景选择器隐藏
+        if (!_this.checkNodeContainsId(e, 'backgroundInput') && !_this.checkNodeContainsId(e, 'backgroundPicker')) {
+          _this.showBackgroundPicker = false
         }
+        // 同理
+        if (!_this.checkNodeContainsId(e, 'lineColorInput') && !_this.checkNodeContainsId(e, 'lineColorPicker')) {
+          _this.showLineColoePicker = false
+        }
+      })
     },
-    mounted() {
-        this.generate()
+    openBackgroundPicker() {
+      this.showBackgroundPicker = true
+      this.showLineColoePicker = false
     },
-    watch: {
-        current: {
-            handler() {
-                this.generate()
-            },
-            deep: true
-        }
+    updateBackground(val) {
+      this.current.background = val
     },
-    methods: {
-        generate() {
-            // 处理字体样式
-            let fontOptions = this.current.fontOptions.join(" ")
-            const barcodeContent = this.current.text ? this.current.text : "Example 1234"
-            JsBarcode(this.$refs.barcode, barcodeContent, {
-                format: this.current.format,
-                width: this.current.width,
-                height: this.current.height,
-                margin: this.current.margin,
-                background: this.current.background,
-                lineColor: this.current.lineColor,
-                displayValue: this.showText,
-                textPosition: this.current.textPosition,
-                textAlign: this.current.textAlign,
-                font: this.current.font,
-                fontOptions: fontOptions,
-                fontSize: this.current.fontSize,
-                textMargin: this.current.textMargin,
-                valid: (valid) => {
-                    this.validStr = !valid ? `"${barcodeContent}" ${this.$t('barcode_invalid_content').toString()}` : "";
-                    if (!this.validStr && this.current.text) {
-                        this.$saveToolData(this.current)
-                    }
-                }
-            })
-        },
-        saveImage() {
-            if (!this.validStr && this.current.text) {
-                this.$clipboardCopyImages(this.$refs.barcode.toDataURL("image/png"), true)
-            }
-        }
+    openLineColorPicker() {
+      this.showLineColoePicker = true
+      this.showBackgroundPicker = false
+    },
+    updateLineColor(val) {
+      this.current.lineColor = val
+    },
+    closeColorPicker() {
+      this.showLineColoePicker = false
+      this.showBackgroundPicker = false
     },
-    data() {
-        return {
-            current: {
-                text: "",
-                format: "CODE128",
-                width: 2,
-                height: 50,
-                margin: 10,
-                background: "#FFFFFF",
-                lineColor: "#000000",
-                textAlign: "center",
-                textPosition: "bottom",
-                font: "monospace",
-                fontOptions: [],
-                fontSize: 20,
-                textMargin: 0
-            },
-            validStr: '',
-            // 条码格式
-            barcodeFormat: [
-                "CODE128",
-                "CODE128A",
-                "CODE128B",
-                "CODE128C",
-                "EAN13",
-                "EAN8",
-                "UPC",
-                "CODE39",
-                "ITF14",
-                "ITF",
-                "MSI",
-                "MSI10",
-                "MSI11",
-                "MSI1010",
-                "MSI1110",
-                "pharmacode",
-            ],
-            fontFamily: [
-                "monospace",
-                "Sans-serif",
-                "Serif",
-                "Fantasy",
-                "Cursive"
-            ],
-            barcodeBase64: "",
+
+    generate() {
+      let _this = this;
+      // 处理字体样式
+      let fontOptions = this.current.fontOptions.join(" ")
+      JsBarcode("#barcode", this.current.text, {
+        format: this.current.format,//选择要使用的条形码类型
+        width: this.current.width,
+        height: this.current.height,
+        margin: this.current.margin,
+        background: this.current.background.hex,
+        lineColor: this.current.lineColor.hex,
+        displayValue: this.current.showText,//是否在条形码下方显示文字
+        textPosition: "bottom",//设置文本的垂直位置
+        textAlign: this.current.textAlign,
+        font: this.current.font,
+        fontOptions: fontOptions,
+        fontSize: this.current.fontSize,
+        textMargin: this.current.textMargin,
+        valid: function (valid) {
+          // 显示条码内容无效
+          if (!valid) {
+            _this.validStr = "无效的条码内容"
+          } else {
+            _this.validStr = ""
+          }
         }
+      })
     },
+  },
+  data() {
+    return {
+      current: {
+        text: "Test 123456789",
+        format: "CODE128",
+        width: 2,
+        height: 50,
+        margin: 10,
+        background: {
+          hex: '#FFFFFF',
+        },
+        lineColor: {
+          hex: '#000000',
+        },
+        showText: "true",
+        textAlign: "center",
+        font: "monospace",
+        fontOptions: [],
+        fontSize: 20,
+        textMargin: 0
+      },
+      validStr: '',
+      // 背景色选择器控制开关
+      showBackgroundPicker: false,
+      // 线条颜色选择器控制开关
+      showLineColoePicker: false,
+      // 条码格式
+      barcodeFormat: [
+        "CODE128",
+        "CODE128A",
+        "CODE128B",
+        "CODE128C",
+        "EAN13",
+        "EAN8",
+        "UPC",
+        "CODE39",
+        "ITF14",
+        "ITF",
+        "MSI",
+        "MSI10",
+        "MSI11",
+        "MSI1010",
+        "MSI1110",
+        "pharmacode",
+      ],
+      fontFamily: [
+        "monospace",
+        "Sans-serif",
+        "Serif",
+        "Fantasy",
+        "Cursive"
+      ]
+
+    }
+  },
 }
 </script>
 
 <style scoped>
 /**iview原来的formitem太高了，在浏览器直接使用插件时会被撑开，因此需要压缩下高度**/
-#barcode-setting .ivu-form-item {
-    margin-bottom: 2px;
+.line-item {
+  margin-top: -20px;
 }
-</style>
+</style>
\ No newline at end of file