diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000000000000000000000000000000000..6adb5130621a0d4134c060b890e17d1997d386b1
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,37 @@
+{
+    "editor.formatOnSave": true,
+    "editor.renderControlCharacters": true,
+    "editor.renderWhitespace": "all",
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true,
+        "source.fixAll.stylelint": true
+    },
+    "px2rem-plus.base": 50,
+    "[html]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[css]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[less]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[vue]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[json]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[jsonc]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[markdown]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+}
diff --git a/JYeontuComponentWarehouse/.editorconfig b/JYeontuComponentWarehouse/.editorconfig
new file mode 100644
index 0000000000000000000000000000000000000000..f651b7eca3b6156aed08b73155e426b78a4863a1
--- /dev/null
+++ b/JYeontuComponentWarehouse/.editorconfig
@@ -0,0 +1,15 @@
+# https://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
\ No newline at end of file
diff --git a/JYeontuComponentWarehouse/babel.config.js b/JYeontuComponentWarehouse/babel.config.js
index ba179669a123909a9728283fd9c004c65adb90c5..e6f2ce4c7bfb09ff85584783bfbee8394bfcceaf 100644
--- a/JYeontuComponentWarehouse/babel.config.js
+++ b/JYeontuComponentWarehouse/babel.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}
+    presets: ["@vue/app"]
+};
diff --git a/JYeontuComponentWarehouse/examples/App.vue b/JYeontuComponentWarehouse/examples/App.vue
index 11e4248851efe6a458928e116f821eb906246395..ccbb8abb96ef26ef3f37654acdcb6ca761db23a6 100644
--- a/JYeontuComponentWarehouse/examples/App.vue
+++ b/JYeontuComponentWarehouse/examples/App.vue
@@ -1,144 +1,149 @@
 <template>
-  <div id="app">
-    <div class="top-content" id="top-content">
-      <top></top>
+    <div id="app">
+        <div class="top-content" id="top-content">
+            <top></top>
+        </div>
+        <div style="display: flex;">
+            <el-drawer
+                class="drawer-left-content"
+                title="菜单"
+                :visible.sync="drawer"
+                :direction="direction"
+                :before-close="handleClose"
+            >
+                <left class="drawer-left-content"></left>
+            </el-drawer>
+            <div class="left-content" id="left-content">
+                <left></left>
+            </div>
+            <i
+                class="menuBtn el-icon-menu drawer-left-content"
+                @click="drawer = true"
+                type="primary"
+                style="margin-left: 10px;"
+            >
+            </i>
+            <div class="router-viewContent" id="routerViewContent">
+                <router-view></router-view>
+            </div>
+        </div>
     </div>
-    <div style="display: flex;">
-      <el-drawer
-          class="drawer-left-content"
-          title="菜单"
-          :visible.sync="drawer"
-          :direction="direction"
-          :before-close="handleClose">
-        <left class="drawer-left-content"></left>
-      </el-drawer>
-      <div class="left-content" id="left-content">
-        <left></left>
-      </div>
-      <i class="menuBtn el-icon-menu drawer-left-content" @click="drawer = true" type="primary"
-         style="margin-left: 10px;">
-      </i>
-      <div class="router-viewContent" id="routerViewContent">
-        <router-view></router-view>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
-import left from './components/menu/left'
-import top from './components/menu/top'
+import left from "./components/menu/left";
+import top from "./components/menu/top";
 
 export default {
-  name: 'app',
-  components: {
-    top,
-    left
-  },
-  data () {
-    return {
-      drawer: false,
-      direction: 'ltr'
-    }
-  },
-  methods: {
-    handleClose (done) {
-      done()
+    name: "app",
+    components: {
+        top,
+        left
+    },
+    data() {
+        return {
+            drawer: false,
+            direction: "ltr"
+        };
     },
-    reSizeWidth () {
-      let a = document.getElementById('leftMenu')
-      let aWidth = a.offsetWidth
-      let aHeight = a.offsetHeight
-      let b = document.getElementById('topMenu')
-      let bWidth = b.offsetWidth
-      let bHeight = b.offsetHeight
-      let c = document.getElementById('routerViewContent')
-      c.style.width = bWidth - aWidth + 'px'
-      c.style.marginTop = parseInt(bHeight) + 'px'
-      c.style.marginLeft = parseInt(aWidth) + 'px'
-      c.style.padding = '2rem'
-      a.style.marginTop = parseInt(bHeight) + 'px'
-      // console.log(aWidth,bWidth);
+    methods: {
+        handleClose(done) {
+            done();
+        },
+        reSizeWidth() {
+            let a = document.getElementById("leftMenu");
+            let aWidth = a.offsetWidth;
+            let aHeight = a.offsetHeight;
+            let b = document.getElementById("topMenu");
+            let bWidth = b.offsetWidth;
+            let bHeight = b.offsetHeight;
+            let c = document.getElementById("routerViewContent");
+            c.style.width = bWidth - aWidth + "px";
+            c.style.marginTop = parseInt(bHeight) + "px";
+            c.style.marginLeft = parseInt(aWidth) + "px";
+            c.style.padding = "2rem";
+            a.style.marginTop = parseInt(bHeight) + "px";
+            // console.log(aWidth,bWidth);
+        }
+    },
+    mounted() {
+        // setTimeout(() => {
+        this.reSizeWidth();
+        // }, 1000)
     }
-  },
-  mounted () {
-    // setTimeout(() => {
-      this.reSizeWidth()
-    // }, 1000)
-  }
-}
+};
 </script>
 
 <style lang="scss">
-	body{
-		overflow-x:hidden;
-	}
-	.router-viewContent{
-	  //height: calc(100vh - 60px);
-	  //width: 100%;
-		overflow-x:hidden;
-	}
-	.drawer-left-content{
-	  display: none;
-	}
-	.top-content{
-	  position: fixed;
-	}
-	.left-content{
-	  display: block;
-	  position: fixed;
-	}
+body {
+    overflow-x: hidden;
+}
+.router-viewContent {
+    //height: calc(100vh - 60px);
+    //width: 100%;
+    overflow-x: hidden;
+}
+.drawer-left-content {
+    display: none;
+}
+.top-content {
+    position: fixed;
+}
+.left-content {
+    display: block;
+    position: fixed;
+}
 
-	@media screen and (max-width:1000px) {
-	  .drawer-left-content{
-		display: block;
-	  }
-	  .left-content{
-		  display: none;
-		position: fixed;
-	  }
-	  #leftMenu{
-		font-size: small !important;
-	  }
-	  #routerViewContent{
-		  font-size: small !important;
-		margin-left: 0px;
-	  }
-		.menuBtn {
-		  position: fixed;
-		  top: 1rem;
-		  display: inline-block !important;
-		}
-	}
-	body {
-	  margin: 0 0;
-	}
+@media screen and (max-width: 1000px) {
+    .drawer-left-content {
+        display: block;
+    }
+    .left-content {
+        display: none;
+        position: fixed;
+    }
+    #leftMenu {
+        font-size: small !important;
+    }
+    #routerViewContent {
+        font-size: small !important;
+        margin-left: 0px;
+    }
+    .menuBtn {
+        position: fixed;
+        top: 1rem;
+        display: inline-block !important;
+    }
+}
+body {
+    margin: 0 0;
+}
 
-	.el-drawer {
-	  width: auto !important;
-	}
+.el-drawer {
+    width: auto !important;
+}
 
-	.el-drawer__header {
-	  padding: 10px 20px 0 !important;
-	  padding-bottom: 25px !important;
-	  margin-bottom: 0 !important;
-	  background-color: #374151;
-	}
+.el-drawer__header {
+    padding: 10px 20px 0 !important;
+    padding-bottom: 25px !important;
+    margin-bottom: 0 !important;
+    background-color: #374151;
+}
 
-	#app {
-	  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-	  -webkit-font-smoothing: antialiased;
-	  -moz-osx-font-smoothing: grayscale;
-	  text-align: center;
-	  color: #2c3e50;
-	  /*margin-top: 60px;*/
-	  width: 100vw;
-	  min-height: 100vh;
-	}
+#app {
+    font-family: "Avenir", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    /*margin-top: 60px;*/
+    width: 100vw;
+    min-height: 100vh;
+}
 
-	.menuBtn {
-	  position: fixed;
-	  top: 1rem;
-	  // display: none !important;
-	}
+.menuBtn {
+    position: fixed;
+    top: 1rem;
+    // display: none !important;
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/assets/icon/iconfont.css b/JYeontuComponentWarehouse/examples/assets/icon/iconfont.css
index e20d3898d5a7788a5ef08764981ea1a35695ee67..1f5f338facbcb4faec4432c245db4bd5328e936a 100644
--- a/JYeontuComponentWarehouse/examples/assets/icon/iconfont.css
+++ b/JYeontuComponentWarehouse/examples/assets/icon/iconfont.css
@@ -1,84 +1,102 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 2846995 */
-  src: url('iconfont.woff2?t=1637570793422') format('woff2'),
-       url('iconfont.woff?t=1637570793422') format('woff'),
-       url('iconfont.ttf?t=1637570793422') format('truetype');
+    font-family: "iconfont"; /* Project id 2846995 */
+    src: url("iconfont.woff2?t=1639480707807") format("woff2"),
+        url("iconfont.woff?t=1639480707807") format("woff"),
+        url("iconfont.ttf?t=1639480707807") format("truetype");
 }
 
 .iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: deepskyblue;
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-banbenxinxi:before {
+    content: "\e71d";
+}
+
+.icon-star:before {
+    content: "\e681";
+}
+
+.icon-danchuang:before {
+    content: "\e63c";
+}
+
+.icon-xuanfuanniufadongtai:before {
+    content: "\e6e8";
+}
+
+.icon-shuzidizeng:before {
+    content: "\e652";
 }
 
 .icon-anzhuangbao:before {
-  content: "\e6ef";
+    content: "\e6ef";
 }
 
 .icon-zifuchuanchulimoban:before {
-  content: "\e661";
+    content: "\e661";
 }
 
 .icon-huaban1:before {
-  content: "\e61f";
+    content: "\e61f";
 }
 
 .icon-youxiyouxiji:before {
-  content: "\e61e";
+    content: "\e61e";
 }
 
 .icon-shuzishurukuang:before {
-  content: "\e69c";
+    content: "\e69c";
 }
 
 .icon-gongju1:before {
-  content: "\e607";
+    content: "\e607";
 }
 
 .icon-shijian1:before {
-  content: "\e612";
+    content: "\e612";
 }
 
 .icon-daima:before {
-  content: "\e703";
+    content: "\e703";
 }
 
 .icon-icon__liuchengtu:before {
-  content: "\e618";
+    content: "\e618";
 }
 
 .icon-huaban:before {
-  content: "\e6e2";
+    content: "\e6e2";
 }
 
 .icon-shijian:before {
-  content: "\e6a0";
+    content: "\e6a0";
 }
 
 .icon-gongju:before {
-  content: "\e73f";
+    content: "\e73f";
 }
 
 .icon-gangqin:before {
-  content: "\e66c";
+    content: "\e66c";
 }
 
 .icon-biaoge:before {
-  content: "\e721";
+    content: "\e721";
 }
 
 .icon-calendar:before {
-  content: "\e8cf";
+    content: "\e8cf";
 }
 
 .icon-number:before {
-  content: "\e660";
+    content: "\e660";
 }
 
 .icon-home:before {
-  content: "\e689";
+    content: "\e689";
 }
-
diff --git a/JYeontuComponentWarehouse/examples/assets/icon/iconfont.json b/JYeontuComponentWarehouse/examples/assets/icon/iconfont.json
index 8e376bdb02c0245ca72d37ca679a4ffaff7b2eb6..4f43f6ede529ab615158fbc97887032fd82f02f1 100644
--- a/JYeontuComponentWarehouse/examples/assets/icon/iconfont.json
+++ b/JYeontuComponentWarehouse/examples/assets/icon/iconfont.json
@@ -1,128 +1,163 @@
 {
-  "id": "2846995",
-  "name": "JYeontuComponents",
-  "font_family": "iconfont",
-  "css_prefix_text": "icon-",
-  "description": "",
-  "glyphs": [
-    {
-      "icon_id": "2679664",
-      "name": "安装包",
-      "font_class": "anzhuangbao",
-      "unicode": "e6ef",
-      "unicode_decimal": 59119
-    },
-    {
-      "icon_id": "4579372",
-      "name": "字符串处理模板",
-      "font_class": "zifuchuanchulimoban",
-      "unicode": "e661",
-      "unicode_decimal": 58977
-    },
-    {
-      "icon_id": "8832745",
-      "name": "龙卷风",
-      "font_class": "huaban1",
-      "unicode": "e61f",
-      "unicode_decimal": 58911
-    },
-    {
-      "icon_id": "397919",
-      "name": "游戏，游戏机",
-      "font_class": "youxiyouxiji",
-      "unicode": "e61e",
-      "unicode_decimal": 58910
-    },
-    {
-      "icon_id": "1766501",
-      "name": "符号-数字输入框",
-      "font_class": "shuzishurukuang",
-      "unicode": "e69c",
-      "unicode_decimal": 59036
-    },
-    {
-      "icon_id": "2571131",
-      "name": "工具",
-      "font_class": "gongju1",
-      "unicode": "e607",
-      "unicode_decimal": 58887
-    },
-    {
-      "icon_id": "11893495",
-      "name": "时间",
-      "font_class": "shijian1",
-      "unicode": "e612",
-      "unicode_decimal": 58898
-    },
-    {
-      "icon_id": "16514476",
-      "name": "代码",
-      "font_class": "daima",
-      "unicode": "e703",
-      "unicode_decimal": 59139
-    },
-    {
-      "icon_id": "23004816",
-      "name": "流程图",
-      "font_class": "icon__liuchengtu",
-      "unicode": "e618",
-      "unicode_decimal": 58904
-    },
-    {
-      "icon_id": "12592146",
-      "name": "画板",
-      "font_class": "huaban",
-      "unicode": "e6e2",
-      "unicode_decimal": 59106
-    },
-    {
-      "icon_id": "3860930",
-      "name": "时间",
-      "font_class": "shijian",
-      "unicode": "e6a0",
-      "unicode_decimal": 59040
-    },
-    {
-      "icon_id": "4517821",
-      "name": "工具2",
-      "font_class": "gongju",
-      "unicode": "e73f",
-      "unicode_decimal": 59199
-    },
-    {
-      "icon_id": "17601072",
-      "name": "钢琴",
-      "font_class": "gangqin",
-      "unicode": "e66c",
-      "unicode_decimal": 58988
-    },
-    {
-      "icon_id": "9149488",
-      "name": "表格",
-      "font_class": "biaoge",
-      "unicode": "e721",
-      "unicode_decimal": 59169
-    },
-    {
-      "icon_id": "1727474",
-      "name": "234日历",
-      "font_class": "calendar",
-      "unicode": "e8cf",
-      "unicode_decimal": 59599
-    },
-    {
-      "icon_id": "698898",
-      "name": "数字",
-      "font_class": "number",
-      "unicode": "e660",
-      "unicode_decimal": 58976
-    },
-    {
-      "icon_id": "8679369",
-      "name": "主页",
-      "font_class": "home",
-      "unicode": "e689",
-      "unicode_decimal": 59017
-    }
-  ]
+    "id": "2846995",
+    "name": "JYeontuComponents",
+    "font_family": "iconfont",
+    "css_prefix_text": "icon-",
+    "description": "",
+    "glyphs": [
+        {
+            "icon_id": "7093666",
+            "name": "版本信息",
+            "font_class": "banbenxinxi",
+            "unicode": "e71d",
+            "unicode_decimal": 59165
+        },
+        {
+            "icon_id": "773017",
+            "name": "star",
+            "font_class": "star",
+            "unicode": "e681",
+            "unicode_decimal": 59009
+        },
+        {
+            "icon_id": "12550674",
+            "name": "弹窗",
+            "font_class": "danchuang",
+            "unicode": "e63c",
+            "unicode_decimal": 58940
+        },
+        {
+            "icon_id": "18545906",
+            "name": "悬浮按钮发动态",
+            "font_class": "xuanfuanniufadongtai",
+            "unicode": "e6e8",
+            "unicode_decimal": 59112
+        },
+        {
+            "icon_id": "24043661",
+            "name": "数字递增",
+            "font_class": "shuzidizeng",
+            "unicode": "e652",
+            "unicode_decimal": 58962
+        },
+        {
+            "icon_id": "2679664",
+            "name": "安装包",
+            "font_class": "anzhuangbao",
+            "unicode": "e6ef",
+            "unicode_decimal": 59119
+        },
+        {
+            "icon_id": "4579372",
+            "name": "字符串处理模板",
+            "font_class": "zifuchuanchulimoban",
+            "unicode": "e661",
+            "unicode_decimal": 58977
+        },
+        {
+            "icon_id": "8832745",
+            "name": "龙卷风",
+            "font_class": "huaban1",
+            "unicode": "e61f",
+            "unicode_decimal": 58911
+        },
+        {
+            "icon_id": "397919",
+            "name": "游戏，游戏机",
+            "font_class": "youxiyouxiji",
+            "unicode": "e61e",
+            "unicode_decimal": 58910
+        },
+        {
+            "icon_id": "1766501",
+            "name": "符号-数字输入框",
+            "font_class": "shuzishurukuang",
+            "unicode": "e69c",
+            "unicode_decimal": 59036
+        },
+        {
+            "icon_id": "2571131",
+            "name": "工具",
+            "font_class": "gongju1",
+            "unicode": "e607",
+            "unicode_decimal": 58887
+        },
+        {
+            "icon_id": "11893495",
+            "name": "时间",
+            "font_class": "shijian1",
+            "unicode": "e612",
+            "unicode_decimal": 58898
+        },
+        {
+            "icon_id": "16514476",
+            "name": "代码",
+            "font_class": "daima",
+            "unicode": "e703",
+            "unicode_decimal": 59139
+        },
+        {
+            "icon_id": "23004816",
+            "name": "流程图",
+            "font_class": "icon__liuchengtu",
+            "unicode": "e618",
+            "unicode_decimal": 58904
+        },
+        {
+            "icon_id": "12592146",
+            "name": "画板",
+            "font_class": "huaban",
+            "unicode": "e6e2",
+            "unicode_decimal": 59106
+        },
+        {
+            "icon_id": "3860930",
+            "name": "时间",
+            "font_class": "shijian",
+            "unicode": "e6a0",
+            "unicode_decimal": 59040
+        },
+        {
+            "icon_id": "4517821",
+            "name": "工具2",
+            "font_class": "gongju",
+            "unicode": "e73f",
+            "unicode_decimal": 59199
+        },
+        {
+            "icon_id": "17601072",
+            "name": "钢琴",
+            "font_class": "gangqin",
+            "unicode": "e66c",
+            "unicode_decimal": 58988
+        },
+        {
+            "icon_id": "9149488",
+            "name": "表格",
+            "font_class": "biaoge",
+            "unicode": "e721",
+            "unicode_decimal": 59169
+        },
+        {
+            "icon_id": "1727474",
+            "name": "234日历",
+            "font_class": "calendar",
+            "unicode": "e8cf",
+            "unicode_decimal": 59599
+        },
+        {
+            "icon_id": "698898",
+            "name": "数字",
+            "font_class": "number",
+            "unicode": "e660",
+            "unicode_decimal": 58976
+        },
+        {
+            "icon_id": "8679369",
+            "name": "主页",
+            "font_class": "home",
+            "unicode": "e689",
+            "unicode_decimal": 59017
+        }
+    ]
 }
diff --git a/JYeontuComponentWarehouse/examples/assets/icon/iconfont.ttf b/JYeontuComponentWarehouse/examples/assets/icon/iconfont.ttf
index 07b72cb12432953a684da2139d88d63dafeeaaeb..e20d8ac3fd6f12d433eb6c271e29f99dcc9adac3 100644
Binary files a/JYeontuComponentWarehouse/examples/assets/icon/iconfont.ttf and b/JYeontuComponentWarehouse/examples/assets/icon/iconfont.ttf differ
diff --git a/JYeontuComponentWarehouse/examples/assets/icon/iconfont.woff b/JYeontuComponentWarehouse/examples/assets/icon/iconfont.woff
index 8759ba39e0d27fde0de7d26c283dd7267e619225..ed773064ab011a1d9d6e9ee8293c41eaaeb9b1b1 100644
Binary files a/JYeontuComponentWarehouse/examples/assets/icon/iconfont.woff and b/JYeontuComponentWarehouse/examples/assets/icon/iconfont.woff differ
diff --git a/JYeontuComponentWarehouse/examples/assets/icon/iconfont.woff2 b/JYeontuComponentWarehouse/examples/assets/icon/iconfont.woff2
index f91bd3207bb4ae5b697c923627c424bd51a704d9..85c2daceb407bda774dbac93ddfba7c911bd8e60 100644
Binary files a/JYeontuComponentWarehouse/examples/assets/icon/iconfont.woff2 and b/JYeontuComponentWarehouse/examples/assets/icon/iconfont.woff2 differ
diff --git a/JYeontuComponentWarehouse/examples/components/common/JDropDownBox.vue b/JYeontuComponentWarehouse/examples/components/common/JDropDownBox.vue
index 7d713a8ba5e344fe1243a99eff9119f1c18e0e12..c1782631744be857073e1862a56f600022250e99 100644
--- a/JYeontuComponentWarehouse/examples/components/common/JDropDownBox.vue
+++ b/JYeontuComponentWarehouse/examples/components/common/JDropDownBox.vue
@@ -1,198 +1,208 @@
 <template>
-	<div class="drop-down-box">
-		<div class="box-input-box">
-			<input :placeholder="placeholder"
-					@focus="focusInput()"
-					@input="bindInput()"
-					v-model="inputData"
-					v-if="!readOnly"
-					class="box-input"/>
-			<div @click="arrowClick()"
-					v-if="readOnly"
-					class="box-input">
-					{{inputData}}
-			</div>
-			<div class="icon icon-close" 
-				@click="clearInput()"
-				v-show="boxIsShow"
-				title="清空">
-				x
-			</div>
-			<div class="icon icon-arrow"
-				@click="arrowClick()"
-				title="下拉">
-				{{boxIsShow?'∨':'>'}}
-			</div>
-		</div>
-		<div class="box-area" v-show="boxIsShow">
-			<div v-for="(itemData,index) in showSelectData"
-				:title="itemData.value"
-				:key="itemData.id"
-				@click="selectItem(itemData)"
-				class="select-item">
-				{{itemData.value}}
-			</div>
-		</div>
-	</div>
+    <div class="drop-down-box">
+        <div class="box-input-box">
+            <input
+                :placeholder="placeholder"
+                @focus="focusInput()"
+                @input="bindInput()"
+                v-model="inputData"
+                v-if="!readOnly"
+                class="box-input"
+            />
+            <div @click="arrowClick()" v-if="readOnly" class="box-input">
+                {{ inputData }}
+            </div>
+            <div
+                class="icon icon-close"
+                @click="clearInput()"
+                v-show="boxIsShow"
+                title="清空"
+            >
+                x
+            </div>
+            <div class="icon icon-arrow" @click="arrowClick()" title="下拉">
+                {{ boxIsShow ? "∨" : ">" }}
+            </div>
+        </div>
+        <div class="box-area" v-show="boxIsShow">
+            <div
+                v-for="(itemData, index) in showSelectData"
+                :title="itemData.value"
+                :key="itemData.id"
+                @click="selectItem(itemData)"
+                class="select-item"
+            >
+                {{ itemData.value }}
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
-	export default{
-		name:"JDropDownBox",
-		props:{
-			defIndex:{
-				type:String,
-				default:''
-			},
-			value:{
-				type:String,
-				default:''
-			},
-			placeholder:{
-				type:String,
-				default:"请输入"
-			},
-			filter:{
-				type:Boolean,
-				default:false,
-			},
-			closed:{
-				type:Boolean,
-				default:true,
-			},
-			readOnly:{
-				type:Boolean,
-				default:false
-			},
-			selectData:{
-				type:Array,
-				default:[{
-					id:1,
-					value:'选项一'
-				},{
-					id:2,
-					value:'选项二一'
-				},{
-					id:3,
-					value:'选项三'
-				},{
-					id:4,
-					value:'选项四一'
-				},{
-					id:5,
-					value:'选项五'
-				},{
-					id:6,
-					value:'选项六'
-				}]
-			}
-		},
-		data(){
-			return{
-				boxIsShow:false,
-				inputData:'',
-			}
-		},
-		created() {
-			this.showSelectData = this.selectData;
-		},
-		watch:{
-			inputData(newVal){
-				this.value = newVal;
-			}
-		},
-		methods:{
-			arrowClick(){
-				this.boxIsShow = !this.boxIsShow;
-			},
-			clearInput(){
-				this.inputData = '';
-				this.showSelectData = this.selectData;
-				this.$emit('selectItem','');
-				this.$emit('selectIndexValue',this.defIndex,'');
-			},
-			focusInput(){
-				this.boxIsShow = true;
-				this.bindInput();
-			},
-			bindInput(){
-				if(this.filter){
-					this.showSelectData = this.selectData.filter(sItem => {
-						return sItem.value.indexOf(this.inputData) != -1;
-					})
-				}
-			},
-			blurInput(){
-				setTimeout(()=>{
-					this.boxIsShow = false;
-				},100);
-			},
-			selectItem(itemData){
-				this.inputData = itemData.value;
-				this.$emit('selectItem',itemData.id);
-				this.$emit('selectIndexValue',this.defIndex,itemData.value);
-				this.boxIsShow = false;
-			}
-		}
-	}
+export default {
+    name: "JDropDownBox",
+    props: {
+        defIndex: {
+            type: String,
+            default: ""
+        },
+        value: {
+            type: String,
+            default: ""
+        },
+        placeholder: {
+            type: String,
+            default: "请输入"
+        },
+        filter: {
+            type: Boolean,
+            default: false
+        },
+        closed: {
+            type: Boolean,
+            default: true
+        },
+        readOnly: {
+            type: Boolean,
+            default: false
+        },
+        selectData: {
+            type: Array,
+            default: [
+                {
+                    id: 1,
+                    value: "选项一"
+                },
+                {
+                    id: 2,
+                    value: "选项二一"
+                },
+                {
+                    id: 3,
+                    value: "选项三"
+                },
+                {
+                    id: 4,
+                    value: "选项四一"
+                },
+                {
+                    id: 5,
+                    value: "选项五"
+                },
+                {
+                    id: 6,
+                    value: "选项六"
+                }
+            ]
+        }
+    },
+    data() {
+        return {
+            boxIsShow: false,
+            inputData: ""
+        };
+    },
+    created() {
+        this.showSelectData = this.selectData;
+    },
+    watch: {
+        inputData(newVal) {
+            this.value = newVal;
+        }
+    },
+    methods: {
+        arrowClick() {
+            this.boxIsShow = !this.boxIsShow;
+        },
+        clearInput() {
+            this.inputData = "";
+            this.showSelectData = this.selectData;
+            this.$emit("selectItem", "");
+            this.$emit("selectIndexValue", this.defIndex, "");
+        },
+        focusInput() {
+            this.boxIsShow = true;
+            this.bindInput();
+        },
+        bindInput() {
+            if (this.filter) {
+                this.showSelectData = this.selectData.filter(sItem => {
+                    return sItem.value.indexOf(this.inputData) != -1;
+                });
+            }
+        },
+        blurInput() {
+            setTimeout(() => {
+                this.boxIsShow = false;
+            }, 100);
+        },
+        selectItem(itemData) {
+            this.inputData = itemData.value;
+            this.$emit("selectItem", itemData.id);
+            this.$emit("selectIndexValue", this.defIndex, itemData.value);
+            this.boxIsShow = false;
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped>
-	.drop-down-box{
-		// border: lightskyblue 1px solid;
-		color: black;
-		width: max-content;
-		// position: relative;
-		.box-input-box{
-			background-color: whitesmoke;
-			display: flex;
-			line-height: 30px;
-			border: skyblue 1px solid;
-			padding-left: 0.5rem;
-			.box-input{
-				outline: none;
-				border: 0;
-				background-color: whitesmoke;
-				min-width: 150px;
-				div{
-					cursor: pointer;
-				}
-			}
-			.icon{
-				line-height: 20px;
-				width: 20px;
-				margin: auto;
-				cursor: pointer;
-			}
-			.icon-arrow{
-				color: deepskyblue;
-			}
-			.icon-close{
-				border-radius: 50%;
-				border: dimgrey 1px solid;
-				font-size: medium;
-				transform: scale(0.7);
-				color: #c21f30;
-			}
-		}
-		.box-area{
-			background-color: whitesmoke;
-			border: lightskyblue 1px solid;
-			color:#61649f;
-			max-height: 6.25rem;
-			overflow: scroll;
-			// overflow-y: hidden;
-			scrollbar-width: 1px;
-			overflow-x: hidden;
-			&::-webkit-scrollbar {/*滚动条整体样式*/
-				width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
-				height: 4px;
-			}
-			.select-item{
-				cursor: pointer;
-				border-bottom: solid 1px grey;
-				padding: 2px;
-			}
-		}
-	}
+.drop-down-box {
+    // border: lightskyblue 1px solid;
+    color: black;
+    width: max-content;
+    // position: relative;
+    .box-input-box {
+        background-color: whitesmoke;
+        display: flex;
+        line-height: 30px;
+        border: skyblue 1px solid;
+        padding-left: 0.5rem;
+        .box-input {
+            outline: none;
+            border: 0;
+            background-color: whitesmoke;
+            min-width: 150px;
+            div {
+                cursor: pointer;
+            }
+        }
+        .icon {
+            line-height: 20px;
+            width: 20px;
+            margin: auto;
+            cursor: pointer;
+        }
+        .icon-arrow {
+            color: deepskyblue;
+        }
+        .icon-close {
+            border-radius: 50%;
+            border: dimgrey 1px solid;
+            font-size: medium;
+            transform: scale(0.7);
+            color: #c21f30;
+        }
+    }
+    .box-area {
+        background-color: whitesmoke;
+        border: lightskyblue 1px solid;
+        color: #61649f;
+        max-height: 6.25rem;
+        overflow: scroll;
+        // overflow-y: hidden;
+        scrollbar-width: 1px;
+        overflow-x: hidden;
+        &::-webkit-scrollbar {
+            /*滚动条整体样式*/
+            width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+            height: 4px;
+        }
+        .select-item {
+            cursor: pointer;
+            border-bottom: solid 1px grey;
+            padding: 2px;
+        }
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/components/common/methodTest.vue b/JYeontuComponentWarehouse/examples/components/common/methodTest.vue
index 06b556f88c81271a0922ff0035d431034b87cd74..ce4dc29b9344e064c2eb37ee2f5b9dba7b3ae52b 100644
--- a/JYeontuComponentWarehouse/examples/components/common/methodTest.vue
+++ b/JYeontuComponentWarehouse/examples/components/common/methodTest.vue
@@ -1,228 +1,265 @@
 <template>
-	<div>
-		<div class="method-test-box" 
-			:key="index">
-			<div class="method-item method-name">
-				<span class="title-sm">方法：</span>
-				<j-drop-drow-box :selectData="methodList"
-								@selectItem = "selectMethod"
-								:readOnly="true">
-				</j-drop-drow-box>
-			</div>
-			<div class="method-item method-params">
-				<span class="title-sm">参数：</span>
-				<div class="params">
-					<div v-for="(param,index1) in methodParams"
-						:key="index1"
-						class="param">
-						<j-drop-drow-box  :selectData="changeOption(param.options)"
-										v-if="param.options"
-										@selectItem = "selectParam"
-										@selectIndexValue = "selectIndexValue"
-										:defIndex = "index1"
-										:title="param.name"
-										:placeholder="param.name">
-						</j-drop-drow-box>
-						<input v-else 
-							:title="param.name"
-							:placeholder="param.name"
-							@input="bindInput"
-							style="min-width: 195px;"
-							v-model="param.value"/>
-					</div>
-				</div>
-			</div>
-			<div class = "method-rep method-item">
-				<span><span class="title-sm">表达式：</span><span class="method-rep-span">{{methodRep}}</span></span>
-			</div>
-			<div class="method-item method-btn">
-				<button class="btn" @click="doTestCode()">点击调用</button>
-			</div>
-			<div class="method-item method-result">
-				<span><span class="title-sm">结果：</span><span class="method-result-span">{{result}}</span></span>
-			</div>
-		</div>
-	</div>
+    <div>
+        <div class="method-test-box" :key="index">
+            <div class="method-item method-name">
+                <span class="title-sm">方法：</span>
+                <j-drop-drow-box
+                    :selectData="methodList"
+                    @selectItem="selectMethod"
+                    :readOnly="true"
+                >
+                </j-drop-drow-box>
+            </div>
+            <div class="method-item method-params">
+                <span class="title-sm">参数：</span>
+                <div class="params">
+                    <div
+                        v-for="(param, index1) in methodParams"
+                        :key="index1"
+                        class="param"
+                    >
+                        <j-drop-drow-box
+                            :selectData="changeOption(param.options)"
+                            v-if="param.options"
+                            @selectItem="selectParam"
+                            @selectIndexValue="selectIndexValue"
+                            :defIndex="index1"
+                            :title="param.name"
+                            :placeholder="param.name"
+                        >
+                        </j-drop-drow-box>
+                        <input
+                            v-else
+                            :title="param.name"
+                            :placeholder="param.name"
+                            @input="bindInput"
+                            style="min-width: 195px;"
+                            v-model="param.value"
+                        />
+                    </div>
+                </div>
+            </div>
+            <div class="method-rep method-item">
+                <span
+                    ><span class="title-sm">表达式：</span
+                    ><span class="method-rep-span">{{ methodRep }}</span></span
+                >
+            </div>
+            <div class="method-item method-btn">
+                <button class="btn" @click="doTestCode()">点击调用</button>
+            </div>
+            <div class="method-item method-result">
+                <span
+                    ><span class="title-sm">结果：</span
+                    ><span class="method-result-span">{{ result }}</span></span
+                >
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
-	import JDropDrowBox from './JDropDownBox.vue'
-	var dateTool = require('@/utils/dateTool.js');
-	var numsFormat = require('@/utils/numsFormat.js');
-	var strTool = require('@/utils/strTool.js');
-	export default{
-		name:"methodTest",
-		props:{
-			util:require('@/utils/dateTool.js'),
-			methodData:{
-				type:Array,
-				default:[]
-			}
-		},
-		components:{
-			JDropDrowBox
-		},
-		data() {
-			return{
-				methodList:[],
-				methodParams:[],
-				chooseMethod:'',
-				chooseParams:[],
-				result:'',
-				methodRep:''
-			}
-		},
-		watch:{
-			chooseMethod(val){
-				if(val >= 0){
-					let methodParams = this.methodData[val].params;
-					this.methodParams = methodParams;
-					this.methodRep = this.util + '.' + this.methodList[val].value;
-					let p = '';
-					for(let i = 0; i < methodParams.length; i++){
-						if(methodParams[i].value != ''){
-							if(i > 0) p += ',';
-							p += '\'' + methodParams[i].value + '\'';
-						}
-					}
-					this.methodRep += '(' + p + ')';
-				}else{
-					this.methodRep = '';
-				}
-			}
-		},
-		created() {
-			let methodData = this.methodData;
-			// this.methodRep = this.util + '.' + this.methodList[val].value + '(' + ')';
-			for(let i = 0; i < methodData.length; i++){
-				this.methodList.push({
-					id:i,
-					value:methodData[i].name
-				});
-			}
-		},
-		methods:{
-			bindInput(){
-				let methodList = this.methodList,
-					chooseMethod = this.chooseMethod,
-					methodParams = this.methodParams;
-					
-				this.methodRep = this.util + '.' + methodList[chooseMethod].value;
-				let p = '';
-				for(let i = 0; i < methodParams.length; i++){
-					if(methodParams[i].value != ''){
-						if(i > 0) p += ',';
-						p += '\'' + methodParams[i].value + '\'';
-					}
-				}
-				if(p.length > 0){
-					this.methodRep += '(' + p + ')';
-				}
-			},
-			selectParam(val){
-				this.chooseParams = val;
-			},
-			selectIndexValue(index,val){
-				this.methodParams[index].value = val;
-				
-				let methodList = this.methodList,
-					chooseMethod = this.chooseMethod,
-					methodParams = this.methodParams;
-					
-				this.methodRep = this.util + '.' + methodList[chooseMethod].value;
-				let p = '';
-				for(let i = 0; i < methodParams.length; i++){
-					if(methodParams[i].value != ''){
-						if(i > 0) p += ',';
-						p += '\'' + methodParams[i].value + '\'';
-					}
-				}
-				if(p.length > 0){
-					this.methodRep += '(' + p + ')';
-				}
-			},
-			selectMethod(val){
-				this.chooseMethod = val;
-			},
-			changeOption(options){
-				let res = [];
-				for(let i = 0; i < options.length; i++){
-					res.push({
-						id:i,
-						value:options[i]
-					})
-				}
-				return res;
-			},
-			doTestCode(){
-				let methodList = this.methodList,
-					chooseMethod = this.chooseMethod,
-					methodParams = this.methodParams;
-				
-				if(methodParams.length == 2 && methodParams[1].value != ''){
-					if(this.util == 'dateTool') this.result = dateTool[methodList[chooseMethod].value](methodParams[0].value,methodParams[1].value);
-					else if(this.util == 'numsFormat') this.result = numsFormat[methodList[chooseMethod].value](methodParams[0].value,methodParams[1].value);
-					else if(this.util == 'strTool') this.result = strTool[methodList[chooseMethod].value](methodParams[0].value,methodParams[1].value);
-				}else if(methodParams[0].value != ''){
-					if(this.util == 'dateTool') this.result = dateTool[methodList[chooseMethod].value](methodParams[0].value);
-					else if(this.util == 'numsFormat') this.result = numsFormat[methodList[chooseMethod].value](methodParams[0].value);
-					else if(this.util == 'strTool') this.result = strTool[methodList[chooseMethod].value](methodParams[0].value);
-				}else{
-					if(this.util == 'dateTool') this.result = dateTool[methodList[chooseMethod].value]();
-					else if(this.util == 'numsFormat') this.result = numsFormat[methodList[chooseMethod].value]();
-					else if(this.util == 'strTool') this.result = strTool[methodList[chooseMethod].value]();
-				}
-			}
-		}
-	}
+import JDropDrowBox from "./JDropDownBox.vue";
+var dateTool = require("@/utils/dateTool.js");
+var numsFormat = require("@/utils/numsFormat.js");
+var strTool = require("@/utils/strTool.js");
+export default {
+    name: "methodTest",
+    props: {
+        util: require("@/utils/dateTool.js"),
+        methodData: {
+            type: Array,
+            default: []
+        }
+    },
+    components: {
+        JDropDrowBox
+    },
+    data() {
+        return {
+            methodList: [],
+            methodParams: [],
+            chooseMethod: "",
+            chooseParams: [],
+            result: "",
+            methodRep: ""
+        };
+    },
+    watch: {
+        chooseMethod(val) {
+            if (val >= 0) {
+                let methodParams = this.methodData[val].params;
+                this.methodParams = methodParams;
+                this.methodRep = this.util + "." + this.methodList[val].value;
+                let p = "";
+                for (let i = 0; i < methodParams.length; i++) {
+                    if (methodParams[i].value != "") {
+                        if (i > 0) p += ",";
+                        p += "'" + methodParams[i].value + "'";
+                    }
+                }
+                this.methodRep += "(" + p + ")";
+            } else {
+                this.methodRep = "";
+            }
+        }
+    },
+    created() {
+        let methodData = this.methodData;
+        // this.methodRep = this.util + '.' + this.methodList[val].value + '(' + ')';
+        for (let i = 0; i < methodData.length; i++) {
+            this.methodList.push({
+                id: i,
+                value: methodData[i].name
+            });
+        }
+    },
+    methods: {
+        bindInput() {
+            let methodList = this.methodList,
+                chooseMethod = this.chooseMethod,
+                methodParams = this.methodParams;
+
+            this.methodRep = this.util + "." + methodList[chooseMethod].value;
+            let p = "";
+            for (let i = 0; i < methodParams.length; i++) {
+                if (methodParams[i].value != "") {
+                    if (i > 0) p += ",";
+                    p += "'" + methodParams[i].value + "'";
+                }
+            }
+            if (p.length > 0) {
+                this.methodRep += "(" + p + ")";
+            }
+        },
+        selectParam(val) {
+            this.chooseParams = val;
+        },
+        selectIndexValue(index, val) {
+            this.methodParams[index].value = val;
+
+            let methodList = this.methodList,
+                chooseMethod = this.chooseMethod,
+                methodParams = this.methodParams;
+
+            this.methodRep = this.util + "." + methodList[chooseMethod].value;
+            let p = "";
+            for (let i = 0; i < methodParams.length; i++) {
+                if (methodParams[i].value != "") {
+                    if (i > 0) p += ",";
+                    p += "'" + methodParams[i].value + "'";
+                }
+            }
+            if (p.length > 0) {
+                this.methodRep += "(" + p + ")";
+            }
+        },
+        selectMethod(val) {
+            this.chooseMethod = val;
+        },
+        changeOption(options) {
+            let res = [];
+            for (let i = 0; i < options.length; i++) {
+                res.push({
+                    id: i,
+                    value: options[i]
+                });
+            }
+            return res;
+        },
+        doTestCode() {
+            let methodList = this.methodList,
+                chooseMethod = this.chooseMethod,
+                methodParams = this.methodParams;
+
+            if (methodParams.length == 2 && methodParams[1].value != "") {
+                if (this.util == "dateTool")
+                    this.result = dateTool[methodList[chooseMethod].value](
+                        methodParams[0].value,
+                        methodParams[1].value
+                    );
+                else if (this.util == "numsFormat")
+                    this.result = numsFormat[methodList[chooseMethod].value](
+                        methodParams[0].value,
+                        methodParams[1].value
+                    );
+                else if (this.util == "strTool")
+                    this.result = strTool[methodList[chooseMethod].value](
+                        methodParams[0].value,
+                        methodParams[1].value
+                    );
+            } else if (methodParams[0].value != "") {
+                if (this.util == "dateTool")
+                    this.result = dateTool[methodList[chooseMethod].value](
+                        methodParams[0].value
+                    );
+                else if (this.util == "numsFormat")
+                    this.result = numsFormat[methodList[chooseMethod].value](
+                        methodParams[0].value
+                    );
+                else if (this.util == "strTool")
+                    this.result = strTool[methodList[chooseMethod].value](
+                        methodParams[0].value
+                    );
+            } else {
+                if (this.util == "dateTool")
+                    this.result = dateTool[methodList[chooseMethod].value]();
+                else if (this.util == "numsFormat")
+                    this.result = numsFormat[methodList[chooseMethod].value]();
+                else if (this.util == "strTool")
+                    this.result = strTool[methodList[chooseMethod].value]();
+            }
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped>
-	.method-test-box{
-		display: flex;
-		flex-wrap: wrap;
-		.method-item{
-			display: flex;
-			margin-right: 1rem;
-			margin-top: 0.5rem;
-			.title-sm{
-				color: #2c9678;
-			}
-		}
-		.method-name{
-			// flex: 2;
-			.name{
-				color: royalblue;
-			}
-		}
-		.method-params{
-			// flex: 3;
-			.params{
-				display: flex;
-				flex-direction: column;
-				min-width: 100px;
-				margin-right: 1rem;
-				.param{
-					margin-top: 0.2rem;
-				}
-			}
-		}
-		.method-rep{
-			margin-top: 0.2rem;
-			line-height: auto;
-			.method-rep-span{
-				border-bottom: 1px black solid;
-			}
-		}
-		.method-btn{
-			// flex: 1;
-			max-height: 4rem;
-		}
-		.method-result{
-			// flex: 3;
-			.method-result-span{
-				border-bottom: 1px black solid;
-			}
-		}
-	}
+.method-test-box {
+    display: flex;
+    flex-wrap: wrap;
+    .method-item {
+        display: flex;
+        margin-right: 1rem;
+        margin-top: 0.5rem;
+        .title-sm {
+            color: #2c9678;
+        }
+    }
+    .method-name {
+        // flex: 2;
+        .name {
+            color: royalblue;
+        }
+    }
+    .method-params {
+        // flex: 3;
+        .params {
+            display: flex;
+            flex-direction: column;
+            min-width: 100px;
+            margin-right: 1rem;
+            .param {
+                margin-top: 0.2rem;
+            }
+        }
+    }
+    .method-rep {
+        margin-top: 0.2rem;
+        line-height: auto;
+        .method-rep-span {
+            border-bottom: 1px black solid;
+        }
+    }
+    .method-btn {
+        // flex: 1;
+        max-height: 4rem;
+    }
+    .method-result {
+        // flex: 3;
+        .method-result-span {
+            border-bottom: 1px black solid;
+        }
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/components/menu/left.vue b/JYeontuComponentWarehouse/examples/components/menu/left.vue
index 278a35187becfa716a36a5ddaed4650fd0199b37..d36234c07efe05f55ac757f05c9b0e88821a2a00 100644
--- a/JYeontuComponentWarehouse/examples/components/menu/left.vue
+++ b/JYeontuComponentWarehouse/examples/components/menu/left.vue
@@ -1,137 +1,167 @@
 <template>
-  <div id="leftMenu">
-	  
-  </div>
+    <div id="leftMenu"></div>
 </template>
 
 <script>
+const router = require("@/config/router.json");
 export default {
-  name: 'left',
-  data () {
-    return {
-      menu: []
-    }
-  },
-  methods: {
-    getNewMenu () {
-      let menu = []
-      let id = 0
-      const router = require('@/config/router.json')
-      menu = router.menu
-      if (localStorage.jyeontuRouteId !== undefined && localStorage.jyeontuMenu !== undefined) {
-        menu = JSON.parse(localStorage.jyeontuMenu)
-        id = localStorage.jyeontuRouteId
-      }
-      this.menu = menu
-      let domTree = this.generatorMenu(menu, '', id)
-      let leftMenu = document.getElementById('leftMenu')
-      leftMenu.innerHTML = domTree
-      this.chooseNode(id)
-    },
-    refreshMenu () {
-      localStorage.removeItem('jyeontuMenu')
-      let routeId = localStorage.getItem('jyeontuRouteId')
-      localStorage.removeItem('jyeontuRouteId')
-      // this.$router.push('/homePage')
-      this.getNewMenu()
-      this.chooseNode(jyeontuRouteId)
-    },
-    findNodeById (node, id) {
-      for (let i = 0; i < node.length; i++) {
-        if (id.toString() === node[i].id.toString()) {
-          node[i].selected = true
-          node[i].open = !node[i].open
-          this.$router.push(node[i].path)
-          localStorage.setItem('jyeontuRouteId', node[i].id)
-          localStorage.setItem('jyeontuMenu', JSON.stringify(this.menu))
-          if (node[i].children && node[i].children.length > 0) {
-            this.findNodeById(node[i].children, id)
-          }
-        } else {
-          node[i].selected = false
-          if (node[i].children && node[i].children.length > 0) {
-            this.findNodeById(node[i].children, id)
-          }
-        }
-      }
+    name: "left",
+    data() {
+        return {
+            menu: []
+        };
     },
-    chooseNode (id) {
-      this.findNodeById(this.menu, id)
-      let domTree = this.generatorMenu(this.menu, '', 0)
-      let leftMenu = document.getElementById('leftMenu')
-      leftMenu.innerHTML = domTree
-    },
-    generatorMenu (menu, temp, floor) {
-      // if (temp === '') {
-      //   temp += `<div class="menuOption" style="cursor: pointer" onclick="refreshMenu()">
-      //               <i class="el-icon-refresh" style="margin-right: 5px;"></i>刷新菜单
-      //           </div>`
-      // }
-      for (let i = 0; i < menu.length; i++) {
-		if(menu[i].hide == true) continue;
-        temp += `<div style="width: max-content,background-color: ${menu[i].selected ? '#A78BFA' : ''};">
+    methods: {
+        getNewMenu() {
+            let menu = [];
+            let id = 0;
+            menu = router.menu;
+            if (
+                localStorage.jyeontuRouteId !== undefined &&
+                localStorage.jyeontuMenu !== undefined
+            ) {
+                menu = JSON.parse(localStorage.jyeontuMenu);
+                id = localStorage.jyeontuRouteId;
+            }
+            this.menu = menu;
+            let domTree = this.generatorMenu(menu, "", id);
+            let leftMenu = document.getElementById("leftMenu");
+            leftMenu.innerHTML = domTree;
+            this.chooseNode(id);
+        },
+        refreshMenu() {
+            localStorage.removeItem("jyeontuMenu");
+            let routeId = localStorage.getItem("jyeontuRouteId");
+            localStorage.removeItem("jyeontuRouteId");
+            // this.$router.push('/homePage')
+            this.getNewMenu();
+            this.chooseNode(jyeontuRouteId);
+        },
+        findNodeById(node, id) {
+            for (let i = 0; i < node.length; i++) {
+                if (id.toString() === node[i].id.toString()) {
+                    node[i].selected = true;
+                    node[i].open = !node[i].open;
+                    this.$router.push(node[i].path);
+                    window.scroll(0, 0);
+                    window.scrollTo(0, 0);
+                    localStorage.setItem("jyeontuRouteId", node[i].id);
+                    localStorage.setItem(
+                        "jyeontuMenu",
+                        JSON.stringify(this.menu)
+                    );
+                    if (node[i].children && node[i].children.length > 0) {
+                        this.findNodeById(node[i].children, id);
+                    }
+                } else {
+                    node[i].selected = false;
+                    if (node[i].children && node[i].children.length > 0) {
+                        this.findNodeById(node[i].children, id);
+                    }
+                }
+            }
+        },
+        chooseNode(id) {
+            this.findNodeById(this.menu, id);
+            let domTree = this.generatorMenu(this.menu, "", 0);
+            let leftMenu = document.getElementById("leftMenu");
+            leftMenu.innerHTML = domTree;
+        },
+        generatorMenu(menu, temp, floor) {
+            // if (temp === '') {
+            //   temp += `<div class="menuOption" style="cursor: pointer" onclick="refreshMenu()">
+            //               <i class="el-icon-refresh" style="margin-right: 5px;"></i>刷新菜单
+            //           </div>`
+            // }
+            for (let i = 0; i < menu.length; i++) {
+                if (menu[i].hide == true) continue;
+                temp += `<div style="width: max-content,background-color: ${
+                    menu[i].selected ? "#A78BFA" : ""
+                };">
                     <div class="menuOption" onclick="chooseNode(${menu[i].id})"
                             style="text-indent: ${floor}em;
-                            background-color: ${menu[i].selected ? '#A78BFA' : ''};
+                            background-color: ${
+                                menu[i].selected ? "#A78BFA" : ""
+                            };
                             cursor: pointer;
-                            margin-top: 1rem;">`
-        if (menu[i].icon.split('-')[0] === 'el') {
-          temp += `<i class="${menu[i].icon}" style="margin-right: 5px;"></i>`
-        } else if (menu[i].icon.split('-')[0] === 'icon') {
-          temp += `<i class="iconfont ${menu[i].icon}" style="margin-right: 5px;"></i>`
-        }
-        temp += `${menu[i].label.trim()}`
-        if (!menu[i].open && menu[i].children && menu[i].children.length > 0) {
-          temp += `<i style="margin-left: 1rem" class="el-icon-arrow-right" style="margin-right: 5px;"></i>`
-        } else {
-          if (menu[i].open && menu[i].children && menu[i].children.length > 0) {
-            temp += `<i style="margin-left: 1rem" class="el-icon-arrow-down" style="margin-right: 5px;"></i>`
-          }
-        }
-        temp += `</div>`
-        if (menu[i].open && menu[i].children && menu[i].children.length !== 0) {
-          temp = this.generatorMenu(menu[i].children, temp, floor + 1)
+                            margin-top: 1rem;">`;
+                let iconColor = router.iconColor;
+                if (menu[i].icon.split("-")[0] === "el") {
+                    if (menu[i].iconColor) {
+                        iconColor = menu[i].iconColor;
+                    }
+                    temp += `<i class="${menu[i].icon}" style="margin-right: 5px;color:${iconColor};"></i>`;
+                } else if (menu[i].icon.split("-")[0] === "icon") {
+                    temp += `<i class="iconfont ${menu[i].icon}" style="margin-right: 5px;color:${iconColor};"></i>`;
+                }
+                temp += `${menu[i].label.trim()}`;
+                if (
+                    !menu[i].open &&
+                    menu[i].children &&
+                    menu[i].children.length > 0
+                ) {
+                    temp += `<i style="margin-left: 1rem" class="el-icon-arrow-right" style="margin-right: 5px;"></i>`;
+                } else {
+                    if (
+                        menu[i].open &&
+                        menu[i].children &&
+                        menu[i].children.length > 0
+                    ) {
+                        temp += `<i style="margin-left: 1rem" class="el-icon-arrow-down" style="margin-right: 5px;"></i>`;
+                    }
+                }
+                temp += `</div>`;
+                if (
+                    menu[i].open &&
+                    menu[i].children &&
+                    menu[i].children.length !== 0
+                ) {
+                    temp = this.generatorMenu(
+                        menu[i].children,
+                        temp,
+                        floor + 1
+                    );
+                }
+                temp += `</div>`;
+            }
+            return temp;
         }
-        temp += `</div>`
-      }
-      return temp
+    },
+    created() {
+        this.refreshMenu();
+    },
+    mounted() {
+        window.chooseNode = this.chooseNode;
+        window.refreshMenu = this.refreshMenu;
+        this.getNewMenu();
     }
-  },
-  created () {
-    this.refreshMenu ();
-  },
-  mounted () {
-    window.chooseNode = this.chooseNode
-    window.refreshMenu = this.refreshMenu
-    this.getNewMenu()
-  }
-}
+};
 </script>
 
 <style lang="scss">
-  #leftMenu{
+#leftMenu {
     min-height: calc(100vh - 44px - 1rem);
-    background-color: #1F2937;
+    background-color: #1f2937;
     color: white;
     text-align: left;
     padding: 0.5rem 1rem;
     font-size: large;
     font-weight: bold;
-	z-index: 99;
-	overflow: scroll;
-	top:0;
-	bottom:0;
-	position:fixed;
-	overflow-y:scroll;
-	overflow-x:hidden;
-	.selectedM{
-		background-color: #374151;
-	}
-	.menuOption{
-		cursor: pointer;
-		&:hover{
-			color: yellow;
-		}
-	}
-  }
+    z-index: 99;
+    overflow: scroll;
+    top: 0;
+    bottom: 0;
+    position: fixed;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    .selectedM {
+        background-color: #374151;
+    }
+    .menuOption {
+        cursor: pointer;
+        &:hover {
+            color: yellow;
+        }
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/components/menu/top.vue b/JYeontuComponentWarehouse/examples/components/menu/top.vue
index 8c18c8e637724764d6e79677532cc6d974f35b5d..e674bb4e35b6ab00e70a501a2805efe91458685f 100644
--- a/JYeontuComponentWarehouse/examples/components/menu/top.vue
+++ b/JYeontuComponentWarehouse/examples/components/menu/top.vue
@@ -1,100 +1,102 @@
 <template>
-  <div id="topMenu">
-	<j-electronic-number
-	    :numbers="numbers"
-	    :number-color="numberColor"
-	    :number-size="numberSize"
-		class="electronic-number"
-	>
-	</j-electronic-number>
-    <span id="username" class="username">JYeontu</span>
-    <img class="avatar" src="../../assets/logo.png" alt="">
-  </div>
+    <div id="topMenu">
+        <j-electronic-number
+            :numbers="numbers"
+            :number-color="numberColor"
+            :number-size="numberSize"
+            class="electronic-number"
+        >
+        </j-electronic-number>
+        <span id="username" class="username">JYeontu</span>
+        <img class="avatar" src="../../assets/logo.png" alt="" />
+    </div>
 </template>
 
 <script>
-import { getToday } from '@/utils/dateTool'
+import { getToday } from "@/utils/dateTool";
 export default {
-  name: 'topMenu',
-  components:{
-	  
-  },
-  data () {
-    return {
-		numbers:[],
-		numberColor:'pink',
-		numberSize:'0.6rem'
-	}
-  },
-  methods: {
-	  getTime(){
-	    let day = getToday('yyyy-mm-dd hh:MM:ss');
-	    this.numbers = [day];
-	    setTimeout(()=>{
-	      this.getTime();
-	    },1000);
-	  }
-  },
-  created () {
-	  this.getTime();
-  },
-  mounted () {
-    const username = document.getElementById('username')
-    username.innerHTML = username.textContent.replace(/\S/g, '<span>$&</span>')
-    document.querySelectorAll('span').forEach((span, index) => {
-      span.style.setProperty('--delay', `${index * 0.1}s`)
-    })
-  }
-}
+    name: "topMenu",
+    components: {},
+    data() {
+        return {
+            numbers: [],
+            numberColor: "pink",
+            numberSize: "0.6rem"
+        };
+    },
+    methods: {
+        getTime() {
+            let day = getToday("yyyy-mm-dd hh:MM:ss");
+            this.numbers = [day];
+            setTimeout(() => {
+                this.getTime();
+            }, 1000);
+        }
+    },
+    created() {
+        this.getTime();
+    },
+    mounted() {
+        const username = document.getElementById("username");
+        username.innerHTML = username.textContent.replace(
+            /\S/g,
+            "<span>$&</span>"
+        );
+        document.querySelectorAll("span").forEach((span, index) => {
+            span.style.setProperty("--delay", `${index * 0.1}s`);
+        });
+    }
+};
 </script>
 
 <style lang="scss" scoped>
 .avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-  // float: right;
-  margin: 10px;
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    // float: right;
+    margin: 10px;
 }
 
 .username {
-  // float: right;
-  line-height: 60px;
-  margin-right: 20px;
-  color: white;
-  font-size: 1rem;
+    // float: right;
+    line-height: 60px;
+    margin-right: 20px;
+    color: white;
+    font-size: 1rem;
 }
 
 #topMenu {
-  background-color: #111827;
-  min-width: 100vw;
-  height: 60px;
-  display:-webkit-flex;
-  align-items:center;
-  flex-direction: row-reverse;
-  z-index: 99;
+    background-color: #111827;
+    min-width: 100vw;
+    height: 60px;
+    display: -webkit-flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    z-index: 99;
 }
 
 @keyframes blink {
-  0%, 100% {
-    color: inherit;
-  }
-  50% {
-    color: #B9E769;
-  }
+    0%,
+    100% {
+        color: inherit;
+    }
+    50% {
+        color: #b9e769;
+    }
 }
 
 #topMenu #username span {
-  display: inline-block;
-  animation-name: blink;
-  /*取出style中的--delay属性值*/
-  /*animation-delay: var(--delay);*/
-  animation-timing-function: ease-in-out;
-  animation-duration: .4s;
+    display: inline-block;
+    animation-name: blink;
+    /*取出style中的--delay属性值*/
+    /*animation-delay: var(--delay);*/
+    animation-timing-function: ease-in-out;
+    animation-duration: 0.4s;
 }
-.electronic-number{
-	// float: right;
-	line-height: 60px;
-	margin-right: 4rem;
+.electronic-number {
+    // float: right;
+    line-height: 60px;
+    margin-right: 4rem;
 }
 </style>
diff --git a/JYeontuComponentWarehouse/examples/components/pages/JTabBar.vue b/JYeontuComponentWarehouse/examples/components/pages/JTabBar.vue
index 395cb83506e0347d84382660f28e245f5137798e..87e6affd2022900f421fbd17101f1b9ac66af166 100644
--- a/JYeontuComponentWarehouse/examples/components/pages/JTabBar.vue
+++ b/JYeontuComponentWarehouse/examples/components/pages/JTabBar.vue
@@ -1,89 +1,86 @@
 <template>
-	<div class="j-tab-bar">
-		<div class="bar-items">
-			<div v-for="(item,index) in tabList"
-				:key="item.id"
-				:class="getBarClass(index,'bar-item')"
-				:title="item.label"
-				@click="barClick(index)">
-				{{item.label}}
-			</div>
-		</div>
-		<div v-for="(item,index) in tabList" 
-			:key="item.id"
-			>
-			<slot v-if="item.id == tabList[showTab].id" 
-				:name="item.id">
-				
-			</slot>
-		</div>
-	</div>
+    <div class="j-tab-bar">
+        <div class="bar-items">
+            <div
+                v-for="(item, index) in tabList"
+                :key="item.id"
+                :class="getBarClass(index, 'bar-item')"
+                :title="item.label"
+                @click="barClick(index)"
+            >
+                {{ item.label }}
+            </div>
+        </div>
+        <div v-for="(item, index) in tabList" :key="item.id">
+            <slot v-if="item.id == tabList[showTab].id" :name="item.id"> </slot>
+        </div>
+    </div>
 </template>
 
 <script>
-	export default{
-		name:"JTabBar",
-		props:{
-			tabList:{
-				type:Array,
-				default:[
-					{
-						label:'tab',
-						id:'tab'
-					},
-					{
-						label:'tab1',
-						id:'tab1'
-					}
-				]
-			},
-			defaultShowTab:{
-				type:Number,
-				default:0
-			}
-		},
-		data() {
-			return{
-				showTab:0
-			}
-		},
-		created() {
-			this.init();
-		},
-		methods:{
-			init(){
-				this.showTab = this.defaultShowTab;
-			},
-			barClick(index){
-				this.showTab = index;
-				this.$emit('clickTab',index);
-			},
-			getBarClass(index,val=''){
-				let res = '';
-				if(index == this.showTab){
-					res += 'active-tab';
-				}
-				return res + ' ' + val;
-			}
-		}
-	}
+export default {
+    name: "JTabBar",
+    props: {
+        tabList: {
+            type: Array,
+            default: [
+                {
+                    label: "tab",
+                    id: "tab"
+                },
+                {
+                    label: "tab1",
+                    id: "tab1"
+                }
+            ]
+        },
+        defaultShowTab: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            showTab: 0
+        };
+    },
+    created() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.showTab = this.defaultShowTab;
+        },
+        barClick(index) {
+            this.showTab = index;
+            this.$emit("clickTab", index);
+        },
+        getBarClass(index, val = "") {
+            let res = "";
+            if (index == this.showTab) {
+                res += "active-tab";
+            }
+            return res + " " + val;
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped="scoped">
-	.j-tab-bar{
-		.bar-items{
-			display: flex;
-			flex-direction: row;
-			line-height: 2rem;
-			.bar-item{
-				flex: 1;
-				color: black;
-				border: 1px solid deepskyblue;
-				cursor: pointer;
-			}
-			.active-tab{
-				color: cadetblue;
-			}
-		}
-	}
+.j-tab-bar {
+    .bar-items {
+        display: flex;
+        flex-direction: row;
+        line-height: 2rem;
+        .bar-item {
+            flex: 1;
+            color: black;
+            border: 1px solid deepskyblue;
+            cursor: pointer;
+        }
+        .active-tab {
+            color: cadetblue;
+        }
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/components/pages/splitHorizontal.vue b/JYeontuComponentWarehouse/examples/components/pages/splitHorizontal.vue
index e11d72fceebbf4b35bf43541efc01a3aba05d10c..96e41e39c8e0dd38af5d496900fb56d65135afdd 100644
--- a/JYeontuComponentWarehouse/examples/components/pages/splitHorizontal.vue
+++ b/JYeontuComponentWarehouse/examples/components/pages/splitHorizontal.vue
@@ -1,81 +1,80 @@
 <template>
-	<div>
-		<div class="view-header">
-			<slot name="header-p"></slot>
-		</div>
-		<div class="view-body">
-			<div class="left-p">
-				<slot name="left-p"></slot>
-			</div>
-			<div class="right-p">
-				<slot name="right-p"></slot>
-			</div>
-		</div>
-		<div class="mid-p">
-			<slot name="mid-p"></slot>
-		</div>
-		<div class="view-footer">
-			<slot name="footer-p"></slot>
-		</div>
-	</div>
+    <div>
+        <div class="view-header">
+            <slot name="header-p"></slot>
+        </div>
+        <div class="view-body">
+            <div class="left-p">
+                <slot name="left-p"></slot>
+            </div>
+            <div class="right-p">
+                <slot name="right-p"></slot>
+            </div>
+        </div>
+        <div class="mid-p">
+            <slot name="mid-p"></slot>
+        </div>
+        <div class="view-footer">
+            <slot name="footer-p"></slot>
+        </div>
+    </div>
 </template>
 
-<script>
-</script>
+<script></script>
 
 <style lang="scss" scoped>
-	.view-header{
-		.title{
-			font-size: x-large;
-			text-align: left;
-			margin-bottom: 1rem;
-			.detail{
-				font-size: medium;
-				color: dimgrey;
-				margin-top: 1rem;
-			}
-			.code{
-				margin-top: 1rem;
-				border: 0.5px solid lightslategrey;
-				padding: 1rem;
-				font-size: medium;
-				color: black;
-				line-height: 1.5rem;
-			}
-		}
-	}
-	.view-body{
-	  display: flex;
-	  flex-direction: row;
-	  .mid-p{
-		  width:100%;
-	  }
-	  .left-p{
-	    width: 42%;
-		margin-left: 2%;
-		height: inherit;
-		display: flex;
-	  }
-	  .right-p{
-	    width: 42%;
-		margin-top: 2rem;
-		margin-left: 10%;
-		height: inherit;
-		display: flex;
-	  }
-	}
-  @media screen and (max-width:1000px) {
-    .view-body{
-      display: flex;
-      flex-direction: column;
-	  margin-left:0;
-      .left-p{
+.view-header {
+    .title {
+        font-size: x-large;
+        text-align: left;
+        margin-bottom: 1rem;
+        .detail {
+            font-size: medium;
+            color: dimgrey;
+            margin-top: 1rem;
+        }
+        .code {
+            margin-top: 1rem;
+            border: 0.5px solid lightslategrey;
+            padding: 1rem;
+            font-size: medium;
+            color: black;
+            line-height: 1.5rem;
+        }
+    }
+}
+.view-body {
+    display: flex;
+    flex-direction: row;
+    .mid-p {
         width: 100%;
-      }
-      .right-p{
-        width: 80%;
-        margin: 2rem auto;
-      }
     }
-  }
+    .left-p {
+        width: 42%;
+        margin-left: 2%;
+        height: inherit;
+        display: flex;
+    }
+    .right-p {
+        width: 42%;
+        // margin-top: 2rem;
+        margin-left: 10%;
+        height: inherit;
+        display: flex;
+    }
+}
+@media screen and (max-width: 1000px) {
+    .view-body {
+        display: flex;
+        flex-direction: column;
+        margin-left: 0;
+        .left-p {
+            width: 100%;
+        }
+        .right-p {
+            width: 80%;
+            margin: 2rem auto;
+        }
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/config/router.json b/JYeontuComponentWarehouse/examples/config/router.json
index 06dbfa9fcbcaa1b83a5c9fdb3ecf8b7220291e62..05194f2e5560701da7e49ba99939407ec5363453 100644
--- a/JYeontuComponentWarehouse/examples/config/router.json
+++ b/JYeontuComponentWarehouse/examples/config/router.json
@@ -1,178 +1,219 @@
 {
-  "name": "routerConfig",
-  "menu": [{
-    "id": 1,
-    "name": "home",
-    "path": "/homePage",
-    "label": "首页",
-    "selected": true,
-    "icon": "icon-home",
-    "open": true,
-    "component": "views/homePage/homePage.vue",
-    "children": []
-  },{
-    "id": 10,
-    "name": "installView",
-    "path": "/installView",
-    "label": "安装",
-    "selected": true,
-    "icon": "icon-anzhuangbao",
-    "open": true,
-    "component": "views/installView.vue",
-    "children": []
-  },{
-    "id": 2,
-    "name": "calendar",
-    "path": "/calendar",
-    "label": "日历",
-    "select": false,
-    "icon": "icon-calendar",
-    "open": false,
-    "component": "views/calendar.vue",
-    "children": []
-  },{
-    "id": 3,
-    "name": "electronicNumber",
-    "path": "/electronicNumber",
-    "label": "电子屏数字",
-    "select": false,
-    "icon": "icon-number",
-    "open": false,
-    "component": "views/electronicNumber.vue",
-    "children": []
-  },{
-    "id": 5,
-    "name": "flowChartView",
-    "path": "/flowChartView",
-    "label": "流程图",
-    "select": false,
-    "icon": "icon-icon__liuchengtu",
-    "open": false,
-    "component": "views/flowChartView.vue",
-    "children": []
-  },{
-    "id": 6,
-    "name": "JTableView",
-    "path": "/JTableView",
-    "label": "表格",
-    "select": false,
-    "icon": "icon-biaoge",
-    "open": false,
-    "component": "views/JTableView.vue",
-    "children": []
-  },{
-    "id": 7,
-    "name": "codeHeightLightView",
-    "path": "/codeHeightLightView",
-    "label": "代码高亮",
-    "select": false,
-    "icon": "icon-daima",
-    "open": false,
-    "component": "views/codeHeightLightView.vue",
-    "children": []
-  },{
-    "id": 9,
-    "name": "canvasBroadView",
-    "path": "/canvasBroadView",
-    "label": "canvas画板",
-    "select": false,
-    "icon": "icon-huaban",
-    "open": false,
-    "component": "views/canvasBroadView.vue",
-    "children": []
-  },{
-    "id": 11,
-    "name": "JNumRollingView",
-    "path": "/JNumRollingView",
-    "label": "数字滚动变化效果",
-    "select": false,
-    "icon": "icon-huaban",
-    "open": false,
-    "component": "views/JNumRollingView.vue",
-    "children": []
-  },{
-    "id": 12,
-    "name": "JStepsView",
-    "path": "/JStepsView",
-    "label": "步骤条",
-    "select": false,
-    "icon": "icon-huaban",
-    "open": false,
-	"hide":true,
-    "component": "views/JStepsView.vue",
-    "children": []
-  },{
-    "id": 13,
-    "name": "JDialogView",
-    "path": "/JDialogView",
-    "label": "弹窗",
-    "select": false,
-    "icon": "icon-huaban",
-    "open": false,
-	"hide":true,
-    "component": "views/JDialogView.vue",
-    "children": []
-  },{
-    "id": 14,
-    "name": "JHoverBtnView",
-    "path": "/JHoverBtnView",
-    "label": "悬浮按钮",
-    "select": false,
-    "icon": "icon-huaban",
-    "open": false,
-    "component": "views/JHoverBtnView.vue",
-    "children": []
-  },{
-    "id": 8,
-    "name": "utilsTools",
-    "path": "",
-    "label": "工具函数",
-    "select": false,
-    "icon": "icon-gongju1",
-    "open": false,
-    "component": "",
-    "children": [
-		{
-			"id": 801,
-			"name": "dateToolView",
-			"path": "/dateToolView",
-			"label": "时间处理",
-			"select": false,
-			"icon": "icon-shijian1",
-			"open": false,
-			"component": "views/utilsTools/dateToolView.vue",
-			"children": []
-		},{
-			"id": 802,
-			"name": "numsFormatView",
-			"path": "/numsFormatView",
-			"label": "数字处理",
-			"select": false,
-			"icon": "icon-shuzishurukuang",
-			"open": false,
-			"component": "views/utilsTools/numsFormatView.vue",
-			"children": []
-		},{
-			"id": 803,
-			"name": "strToolView",
-			"path": "/strToolView",
-			"label": "字符串处理",
-			"select": false,
-			"icon": "icon-zifuchuanchulimoban",
-			"open": false,
-			"component": "views/utilsTools/strToolView.vue",
-			"children": []
-		}
-	]
-  },{
-    "id": 4,
-    "name": "games",
-    "path": "/games",
-    "label": "游戏",
-    "select": false,
-    "icon": "icon-youxiyouxiji",
-    "open": false,
-    "component": "",
-    "children": []
-  }]
+    "name": "routerConfig",
+    "iconColor": "deepskyblue",
+    "menu": [
+        {
+            "id": 1,
+            "name": "home",
+            "path": "/homePage",
+            "label": "首页",
+            "selected": true,
+            "icon": "icon-home",
+            "open": true,
+            "component": "views/homePage/homePage.vue",
+            "children": []
+        },
+        {
+            "id": 100,
+            "name": "installView",
+            "path": "/installView",
+            "label": "安装",
+            "selected": false,
+            "icon": "icon-anzhuangbao",
+            "open": true,
+            "component": "views/installView.vue",
+            "children": []
+        },
+        {
+            "id": 200,
+            "name": "versionInfo",
+            "path": "/versionInfo",
+            "label": "版本介绍",
+            "selected": false,
+            "icon": "icon-banbenxinxi",
+            "open": true,
+            "component": "views/versionInfo.vue",
+            "children": []
+        },
+        {
+            "id": 2,
+            "name": "calendar",
+            "path": "/calendar",
+            "label": "日历",
+            "selected": false,
+            "icon": "icon-calendar",
+            "open": false,
+            "component": "views/calendar.vue",
+            "children": []
+        },
+        {
+            "id": 3,
+            "name": "electronicNumber",
+            "path": "/electronicNumber",
+            "label": "电子屏数字",
+            "selected": false,
+            "icon": "icon-number",
+            "open": false,
+            "component": "views/electronicNumber.vue",
+            "children": []
+        },
+        {
+            "id": 5,
+            "name": "flowChartView",
+            "path": "/flowChartView",
+            "label": "流程图",
+            "selected": false,
+            "icon": "icon-icon__liuchengtu",
+            "open": false,
+            "component": "views/flowChartView.vue",
+            "children": []
+        },
+        {
+            "id": 6,
+            "name": "JTableView",
+            "path": "/JTableView",
+            "label": "表格",
+            "selected": false,
+            "icon": "icon-biaoge",
+            "open": false,
+            "component": "views/JTableView.vue",
+            "children": []
+        },
+        {
+            "id": 7,
+            "name": "codeHeightLightView",
+            "path": "/codeHeightLightView",
+            "label": "代码高亮",
+            "selected": false,
+            "icon": "icon-daima",
+            "open": false,
+            "component": "views/codeHeightLightView.vue",
+            "children": []
+        },
+        {
+            "id": 9,
+            "name": "canvasBroadView",
+            "path": "/canvasBroadView",
+            "label": "canvas画板",
+            "selected": false,
+            "icon": "icon-huaban",
+            "open": false,
+            "component": "views/canvasBroadView.vue",
+            "children": []
+        },
+        {
+            "id": 11,
+            "name": "JNumRollingView",
+            "path": "/JNumRollingView",
+            "label": "数字滚动变化效果",
+            "selected": false,
+            "icon": "icon-shuzidizeng",
+            "open": false,
+            "component": "views/JNumRollingView.vue",
+            "children": []
+        },
+        {
+            "id": 12,
+            "name": "JStepsView",
+            "path": "/JStepsView",
+            "label": "步骤条",
+            "selected": false,
+            "icon": "icon-huaban",
+            "open": false,
+            "hide": false,
+            "component": "views/JStepsView.vue",
+            "children": []
+        },
+        {
+            "id": 13,
+            "name": "JDialogView",
+            "path": "/JDialogView",
+            "label": "弹窗",
+            "selected": false,
+            "icon": "icon-danchuang",
+            "open": false,
+            "hide": false,
+            "component": "views/JDialogView.vue",
+            "children": []
+        },
+        {
+            "id": 14,
+            "name": "JHoverBtnView",
+            "path": "/JHoverBtnView",
+            "label": "悬浮按钮",
+            "selected": false,
+            "icon": "icon-xuanfuanniufadongtai",
+            "open": false,
+            "component": "views/JHoverBtnView.vue",
+            "children": []
+        },
+        {
+            "id": 15,
+            "name": "JFloatDivView",
+            "path": "/JFloatDivView",
+            "label": "div文字环绕效果",
+            "selected": false,
+            "icon": "icon-xuanfuanniufadongtai",
+            "open": false,
+            "hide": true,
+            "component": "views/JFloatDivView.vue",
+            "children": []
+        },
+        {
+            "id": 8,
+            "name": "utilsTools",
+            "path": "",
+            "label": "工具函数",
+            "selected": false,
+            "icon": "icon-gongju1",
+            "open": false,
+            "component": "",
+            "children": [
+                {
+                    "id": 801,
+                    "name": "dateToolView",
+                    "path": "/dateToolView",
+                    "label": "时间处理",
+                    "selected": false,
+                    "icon": "icon-shijian1",
+                    "open": false,
+                    "component": "views/utilsTools/dateToolView.vue",
+                    "children": []
+                },
+                {
+                    "id": 802,
+                    "name": "numsFormatView",
+                    "path": "/numsFormatView",
+                    "label": "数字处理",
+                    "selected": false,
+                    "icon": "icon-shuzishurukuang",
+                    "open": false,
+                    "component": "views/utilsTools/numsFormatView.vue",
+                    "children": []
+                },
+                {
+                    "id": 803,
+                    "name": "strToolView",
+                    "path": "/strToolView",
+                    "label": "字符串处理",
+                    "selected": false,
+                    "icon": "icon-zifuchuanchulimoban",
+                    "open": false,
+                    "component": "views/utilsTools/strToolView.vue",
+                    "children": []
+                }
+            ]
+        },
+        {
+            "id": 4,
+            "name": "games",
+            "path": "/games",
+            "label": "游戏",
+            "selected": false,
+            "icon": "icon-youxiyouxiji",
+            "open": false,
+            "component": "",
+            "children": []
+        }
+    ]
 }
diff --git a/JYeontuComponentWarehouse/examples/main.js b/JYeontuComponentWarehouse/examples/main.js
index e2c4639f436a5e099d175c3b6a27ee54010180cb..06dd6d581b310a5da4af150479b5b40603a716db 100644
--- a/JYeontuComponentWarehouse/examples/main.js
+++ b/JYeontuComponentWarehouse/examples/main.js
@@ -1,21 +1,21 @@
 /* eslint-disable no-unused-vars,no-undef */
-import Vue from 'vue'
-import App from './App.vue'
-import ElementUI from 'element-ui'
-import router from './router'
-import 'element-ui/lib/theme-chalk/index.css'
-import '@/assets/icon/iconfont.css'
+import Vue from "vue";
+import App from "./App.vue";
+import ElementUI from "element-ui";
+import router from "./router";
+import "element-ui/lib/theme-chalk/index.css";
+import "@/assets/icon/iconfont.css";
 
 // 导入组件库
-import jvuewhell from './../packages/index'
+import jvuewhell from "./../packages/index";
 // 注册组件库
-Vue.use(jvuewhell)
-Vue.use(ElementUI)
+Vue.use(jvuewhell);
+Vue.use(ElementUI);
 
 Vue.config.devtools = true;
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  router,
-  render: h => h(App)
-}).$mount('#app')
+    router,
+    render: h => h(App)
+}).$mount("#app");
diff --git a/JYeontuComponentWarehouse/examples/router/index.js b/JYeontuComponentWarehouse/examples/router/index.js
index d15c3529d8268cf69df00ff422f4e81cb212973c..9a98924b5f626622ee8872a79747e614420cc929 100644
--- a/JYeontuComponentWarehouse/examples/router/index.js
+++ b/JYeontuComponentWarehouse/examples/router/index.js
@@ -1,40 +1,43 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import Vue from "vue";
+import VueRouter from "vue-router";
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
-const originalPush = VueRouter.prototype.push
-VueRouter.prototype.push = function push (location) {
-  return originalPush.call(this, location).catch(err => err)
-}
+const originalPush = VueRouter.prototype.push;
+VueRouter.prototype.push = function push(location) {
+    return originalPush.call(this, location).catch(err => err);
+};
 
-let routerMenu = require('@/config/router.json')
-routerMenu = routerMenu.menu
-let menu = []
-let formatRoute = function (routerMenu, menu) {
-  for (let i = 0; i < routerMenu.length; i++) {
-    let temp = {
-      path: routerMenu[i].path,
-      name: routerMenu[i].name,
-      // 用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js
-      component: resolve => require([`@/${routerMenu[i].component}`], resolve)
+let routerMenu = require("@/config/router.json");
+routerMenu = routerMenu.menu;
+let menu = [];
+let formatRoute = function(routerMenu, menu) {
+    for (let i = 0; i < routerMenu.length; i++) {
+        let temp = {
+            path: routerMenu[i].path,
+            name: routerMenu[i].name,
+            // 用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js
+            component: resolve =>
+                require([`@/${routerMenu[i].component}`], resolve)
+        };
+        menu.push(temp);
+        if (routerMenu[i].children && routerMenu[i].children.length > 0) {
+            formatRoute(routerMenu[i].children, menu);
+        }
     }
-    menu.push(temp)
-    if (routerMenu[i].children && routerMenu[i].children.length > 0) {
-      formatRoute(routerMenu[i].children, menu)
+};
+formatRoute(routerMenu, menu);
+const routes = [
+    {
+        path: "/",
+        redirect: "/homePage"
     }
-  }
+];
+for (let i = 0; i < menu.length; i++) {
+    routes.push(menu[i]);
 }
-formatRoute(routerMenu, menu)
-const routes = [
-  {
-    path: '/',
-    redirect: '/homePage'
-  }
-]
-for (let i = 0; i < menu.length; i++) { routes.push(menu[i]) }
 const router = new VueRouter({
-  routes
-})
+    routes
+});
 
-export default router
+export default router;
diff --git a/JYeontuComponentWarehouse/examples/utils/dateTool.js b/JYeontuComponentWarehouse/examples/utils/dateTool.js
index f9604725b5784fd89b91c4763ca7fdfd33b9cfa5..6a94f70293495c9480487f90090c697431a90e84 100644
--- a/JYeontuComponentWarehouse/examples/utils/dateTool.js
+++ b/JYeontuComponentWarehouse/examples/utils/dateTool.js
@@ -4,21 +4,21 @@
  * @return {Boolean}
  */
 
-export const isLeap = function (year) {
-    if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
-        return true
+export const isLeap = function(year) {
+    if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+        return true;
     }
-    return false
+    return false;
 };
 /**
  * 获取星期
  * @param {string} date 日期
  * @return {string} 星期
  */
-export const getWeek = function (date) {
-    let Stamp = new Date(date)
+export const getWeek = function(date) {
+    let Stamp = new Date(date);
     // return weeks[Stamp.getDay()];
-    let weeks = ['日','一','二','三','四','五','六'];
+    let weeks = ["日", "一", "二", "三", "四", "五", "六"];
     return weeks[Stamp.getDay()];
 };
 /**
@@ -27,30 +27,30 @@ export const getWeek = function (date) {
  * @param {string} month 月份
  * @return {number} 月份天数
  */
-export const getMonthDays = function (year, month) {
-    month = parseInt(month) - 1
-    if (month < 0 || month > 11) return ''
-    let months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+export const getMonthDays = function(year, month) {
+    month = parseInt(month) - 1;
+    if (month < 0 || month > 11) return "";
+    let months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
     if (isLeap(year)) {
-        months[1] = 29
+        months[1] = 29;
     }
-    return months[month]
+    return months[month];
 };
 /**
  * 数字补零
  * @param {string} str
  * @return {string}
  */
-export const zero = function (str) {
-    str = parseInt(str)
-    return str > 9 ? str : '0' + str
+export const zero = function(str) {
+    str = parseInt(str);
+    return str > 9 ? str : "0" + str;
 };
 /**
  * 获取今天日期
  * @param {string} str  日期格式
  * @return {string} 格式化日期
  */
-export const getToday = function (str = "yyyy-mm-dd") {
+export const getToday = function(str = "yyyy-mm-dd") {
     const date = new Date();
     const year = date.getFullYear(),
         month = zero(date.getMonth() + 1),
@@ -58,54 +58,65 @@ export const getToday = function (str = "yyyy-mm-dd") {
         hour = zero(date.getHours()),
         minute = zero(date.getMinutes()),
         second = zero(date.getSeconds());
-    let res = '';
-    switch (str){
+    let res = "";
+    switch (str) {
         case "yyyy-mm-dd":
-            res = year + '-' + month + '-' + day;
+            res = year + "-" + month + "-" + day;
             break;
         case "mm-dd-yyyy":
-            res = month + '-' + day + '-' + year;
+            res = month + "-" + day + "-" + year;
             break;
         case "yyyy-mm-dd hh:MM:ss":
-            res = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
+            res =
+                year +
+                "-" +
+                month +
+                "-" +
+                day +
+                " " +
+                hour +
+                ":" +
+                minute +
+                ":" +
+                second;
             break;
         case "hh:MM:ss":
-            res = hour + ':' + minute + ':' + second;
+            res = hour + ":" + minute + ":" + second;
             break;
         case "yyyy":
             res = year;
             break;
-		case "mm":
-			res = month;
-			break;
-		case "dd":
-			res = day;
-			break;
-		case "hh":
-			res = hour;
-			break;
-		case "MM":
-			res = minute;
-			break;
-		case "ss":
-			res = second;
-			break;
+        case "mm":
+            res = month;
+            break;
+        case "dd":
+            res = day;
+            break;
+        case "hh":
+            res = hour;
+            break;
+        case "MM":
+            res = minute;
+            break;
+        case "ss":
+            res = second;
+            break;
         case "mm-dd":
-            res = month + '-' + day;
+            res = month + "-" + day;
             break;
         default:
-            res = '参数错误';
+            res = "参数错误";
             break;
     }
     return res;
-}
+};
 /**
  * 将时间按照所传入的时间格式进行转换
  * @param {string} value  日期
  * @param {string} formatStr  日期格式
  * @return {string} 格式化日期
  */
-export const dateFormat = function (value,formatStr = 'yyyy-mm-dd') {
+export const dateFormat = function(value, formatStr = "yyyy-mm-dd") {
     const date = new Date(value);
     const year = date.getFullYear(),
         month = zero(date.getMonth() + 1),
@@ -113,115 +124,128 @@ export const dateFormat = function (value,formatStr = 'yyyy-mm-dd') {
         hour = zero(date.getHours()),
         minute = zero(date.getMinutes()),
         second = zero(date.getSeconds());
-    let res = '';
-    switch (formatStr){
+    let res = "";
+    switch (formatStr) {
         case "yyyy-mm-dd":
-            res = year + '-' + month + '-' + day;
+            res = year + "-" + month + "-" + day;
             break;
         case "mm-dd-yyyy":
-            res = month + '-' + day + '-' + year;
+            res = month + "-" + day + "-" + year;
             break;
         case "yyyy-mm-dd hh:MM:ss":
-            res = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
+            res =
+                year +
+                "-" +
+                month +
+                "-" +
+                day +
+                " " +
+                hour +
+                ":" +
+                minute +
+                ":" +
+                second;
             break;
         case "hh:MM:ss":
-            res = hour + ':' + minute + ':' + second;
+            res = hour + ":" + minute + ":" + second;
             break;
         case "yyyy":
             res = year;
-			break;
-		case "mm":
-			res = month;
-			break;
-		case "dd":
-			res = day;
-			break;
-		case "hh":
-			res = hour;
-			break;
-		case "MM":
-			res = minute;
-			break;
-		case "ss":
-			res = second;
+            break;
+        case "mm":
+            res = month;
+            break;
+        case "dd":
+            res = day;
+            break;
+        case "hh":
+            res = hour;
+            break;
+        case "MM":
+            res = minute;
+            break;
+        case "ss":
+            res = second;
             break;
         case "mm-dd":
-            res = month + '-' + day;
+            res = month + "-" + day;
             break;
         default:
-            res = '参数错误';
+            res = "参数错误";
             break;
     }
     return res;
-}
+};
 /**
  * 获取上一天日期
  * @param {string} str  当前日期
  * @return {string} 上一天日期
  */
-export const getYesterday = function (str) {
-    let date = str.split('-');
+export const getYesterday = function(str) {
+    let date = str.split("-");
     let year = parseInt(date[0]),
         month = parseInt(date[1]),
         day = parseInt(date[2]);
-    if(month > 12 || month < 1 || day > getMonthDays(year,month)) return '日期不合法';
+    if (month > 12 || month < 1 || day > getMonthDays(year, month))
+        return "日期不合法";
     day -= 1;
-    if(day > 0){
-        return year + '-' + zero(month) + '-' + zero(day);
+    if (day > 0) {
+        return year + "-" + zero(month) + "-" + zero(day);
     }
     month -= 1;
-    if(month > 0){
-        return year + '-' + zero(month) + '-' + getMonthDays(year,month);
+    if (month > 0) {
+        return year + "-" + zero(month) + "-" + getMonthDays(year, month);
     }
     year -= 1;
-    return year + '-' + 12 + '-' + getMonthDays(year,12);
+    return year + "-" + 12 + "-" + getMonthDays(year, 12);
 };
 /**
  * 获取下一天日期
  * @param {string} str  当前日期
  * @return {string} 下一天日期
  */
-export const getTomorrow = function (str){
-    let date = str.split('-');
+export const getTomorrow = function(str) {
+    let date = str.split("-");
     let year = parseInt(date[0]),
         month = parseInt(date[1]),
         day = parseInt(date[2]);
-    if(month > 12 || month < 1 || day > getMonthDays(year,month)) return '日期不合法';
+    if (month > 12 || month < 1 || day > getMonthDays(year, month))
+        return "日期不合法";
     day += 1;
-    if(day <= getMonthDays(year,month)){
-        return year + '-' + zero(month) + '-' + zero(day);
+    if (day <= getMonthDays(year, month)) {
+        return year + "-" + zero(month) + "-" + zero(day);
     }
     month += 1;
-    if(month < 13){
-        return year + '-' + zero(month) + '-' + '01';
+    if (month < 13) {
+        return year + "-" + zero(month) + "-" + "01";
     }
     year += 1;
-    return year + '-' + '01' + '-' + '01';
-}
+    return year + "-" + "01" + "-" + "01";
+};
 /**
  * 获取前n天日期
  * @param {string} n  当前日期
  * @return {string} 前n天日期
  */
-export const beforeDay = function (date,n){
-	if(date.split('-').length < 3) return '日期格式错误';
-	let res = dateFormat(date);
-	n = parseInt(n);
-	while(n--){
-		res = getYesterday(res);
-	}
-	return res;
-}
+export const beforeDay = function(date, n) {
+    if (date.split("-").length < 3) return "日期格式错误";
+    let res = dateFormat(date);
+    n = parseInt(n);
+    while (n--) {
+        res = getYesterday(res);
+    }
+    return res;
+};
 /**
  * 获取后n天日期
  * @param {string} n  当前日期
  * @return {string} 后n天日期
  */
-export const afterDay = function (date,n){
-	if(date.split('-').length < 3) return '日期格式错误';
-	let res = dateFormat(date);
-	while(n--){
-		res = getTomorrow(res);
-	}
-	return res;
-}
+export const afterDay = function(date, n) {
+    if (date.split("-").length < 3) return "日期格式错误";
+    let res = dateFormat(date);
+    while (n--) {
+        res = getTomorrow(res);
+    }
+    return res;
+};
diff --git a/JYeontuComponentWarehouse/examples/utils/numsFormat.js b/JYeontuComponentWarehouse/examples/utils/numsFormat.js
index 515a2af7b2fcfe6ff2ae5b8d633639029378d7d2..3da1c0099c3c4d2c4cf6444d8eafd590f3a48821 100644
--- a/JYeontuComponentWarehouse/examples/utils/numsFormat.js
+++ b/JYeontuComponentWarehouse/examples/utils/numsFormat.js
@@ -4,12 +4,45 @@
  * @return {string} 英文表示
  **/
 export const numberToWords = function(num) {
-    const singles = ["", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"];
-    const teens = ["Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen"];
-    const tens = ["", "Ten", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"];
+    const singles = [
+        "",
+        "One",
+        "Two",
+        "Three",
+        "Four",
+        "Five",
+        "Six",
+        "Seven",
+        "Eight",
+        "Nine"
+    ];
+    const teens = [
+        "Ten",
+        "Eleven",
+        "Twelve",
+        "Thirteen",
+        "Fourteen",
+        "Fifteen",
+        "Sixteen",
+        "Seventeen",
+        "Eighteen",
+        "Nineteen"
+    ];
+    const tens = [
+        "",
+        "Ten",
+        "Twenty",
+        "Thirty",
+        "Forty",
+        "Fifty",
+        "Sixty",
+        "Seventy",
+        "Eighty",
+        "Ninety"
+    ];
     const thousands = ["", "Thousand", "Million", "Billion"];
 
-    const toEnglish = (num) => {
+    const toEnglish = num => {
         const curr = [];
         const hundred = Math.floor(num / 100);
         num %= 100;
@@ -26,21 +59,25 @@ export const numberToWords = function(num) {
         } else if (num >= 10) {
             curr.push(teens[num - 10] + " ");
         }
-        return curr.join('');
-    }
+        return curr.join("");
+    };
 
     if (num === 0) {
         return "Zero";
     }
     const sb = [];
-    for (let i = 3, unit = 1000000000; i >= 0; i--, unit = Math.floor(unit / 1000)) {
+    for (
+        let i = 3, unit = 1000000000;
+        i >= 0;
+        i--, unit = Math.floor(unit / 1000)
+    ) {
         const curNum = Math.floor(num / unit);
         if (curNum !== 0) {
             num -= curNum * unit;
             sb.push(toEnglish(curNum) + thousands[i] + " ");
         }
     }
-    return sb.join('').trim();
+    return sb.join("").trim();
 };
 /**
  * @description 数字转换为大写中文表示
@@ -48,164 +85,179 @@ export const numberToWords = function(num) {
  * @return {string} 大写中文表示
  **/
 export const numberToChineseWords = money => {
-  // 汉字的数字
-  const cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
-  // 基本单位
-  const cnIntRadice = ['', '拾', '佰', '仟']
-  // 对应整数部分扩展单位
-  const cnIntUnits = ['', '万', '亿', '兆']
-  // 对应小数部分单位
-  const cnDecUnits = ['角', '分', '毫', '厘']
-  // 整数金额时后面跟的字符
-  const cnInteger = '整'
-  // 整型完以后的单位
-  const cnIntLast = '元'
-  // 最大处理的数字
-  const maxNum = 9999999999999999.99
-  // 金额整数部分
-  let integerNum
-  // 金额小数部分
-  let decimalNum
-  // 输出的中文金额字符串
-  let chineseStr = ''
-  // 分离金额后用的数组，预定义
-  let parts
-  if (money === '') { return '' }
-  money = parseFloat(money)
-  if (money >= maxNum) {
-    // 超出最大处理数字
-    return ''
-  }
-  if (money === 0) {
-    chineseStr = cnNums[0] + cnIntLast + cnInteger
-    return chineseStr
-  }
-  // 转换为字符串
-  money = money.toString()
-  if (money.indexOf('.') === -1) {
-    integerNum = money
-    decimalNum = ''
-  } else {
-    parts = money.split('.')
-    integerNum = parts[0]
-    decimalNum = parts[1].substr(0, 4)
-  }
-  console.log(integerNum, decimalNum)
-  // 获取整型部分转换
-  if (parseInt(integerNum, 10) > 0) {
-    var zeroCount = 0
-    var IntLen = integerNum.length
-    for (var i = 0; i < IntLen; i++) {
-      let n = integerNum.substr(i, 1)
-      let p = IntLen - i - 1
-      let q = p / 4
-      let m = p % 4
-      if (n === '0') {
-        zeroCount++
-      } else {
-        if (zeroCount > 0) {
-          chineseStr += cnNums[0]
+    // 汉字的数字
+    const cnNums = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
+    // 基本单位
+    const cnIntRadice = ["", "拾", "佰", "仟"];
+    // 对应整数部分扩展单位
+    const cnIntUnits = ["", "万", "亿", "兆"];
+    // 对应小数部分单位
+    const cnDecUnits = ["角", "分", "毫", "厘"];
+    // 整数金额时后面跟的字符
+    const cnInteger = "整";
+    // 整型完以后的单位
+    const cnIntLast = "元";
+    // 最大处理的数字
+    const maxNum = 9999999999999999.99;
+    // 金额整数部分
+    let integerNum;
+    // 金额小数部分
+    let decimalNum;
+    // 输出的中文金额字符串
+    let chineseStr = "";
+    // 分离金额后用的数组，预定义
+    let parts;
+    if (money === "") {
+        return "";
+    }
+    money = parseFloat(money);
+    if (money >= maxNum) {
+        // 超出最大处理数字
+        return "";
+    }
+    if (money === 0) {
+        chineseStr = cnNums[0] + cnIntLast + cnInteger;
+        return chineseStr;
+    }
+    // 转换为字符串
+    money = money.toString();
+    if (money.indexOf(".") === -1) {
+        integerNum = money;
+        decimalNum = "";
+    } else {
+        parts = money.split(".");
+        integerNum = parts[0];
+        decimalNum = parts[1].substr(0, 4);
+    }
+    console.log(integerNum, decimalNum);
+    // 获取整型部分转换
+    if (parseInt(integerNum, 10) > 0) {
+        var zeroCount = 0;
+        var IntLen = integerNum.length;
+        for (var i = 0; i < IntLen; i++) {
+            let n = integerNum.substr(i, 1);
+            let p = IntLen - i - 1;
+            let q = p / 4;
+            let m = p % 4;
+            if (n === "0") {
+                zeroCount++;
+            } else {
+                if (zeroCount > 0) {
+                    chineseStr += cnNums[0];
+                }
+                // 归零
+                zeroCount = 0;
+                chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
+            }
+            if (m === 0 && zeroCount < 4) {
+                chineseStr += cnIntUnits[q];
+            }
+        }
+        chineseStr += cnIntLast;
+    }
+    // 小数部分
+    if (decimalNum !== "") {
+        var decLen = decimalNum.length;
+        for (let i = 0; i < decLen; i++) {
+            let n = decimalNum.substr(i, 1);
+            if (n !== "0") {
+                chineseStr += cnNums[Number(n)] + cnDecUnits[i];
+            }
         }
-        // 归零
-        zeroCount = 0
-        chineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
-      }
-      if (m === 0 && zeroCount < 4) {
-        chineseStr += cnIntUnits[q]
-      }
     }
-    chineseStr += cnIntLast
-  }
-  // 小数部分
-  if (decimalNum !== '') {
-    var decLen = decimalNum.length
-    for (let i = 0; i < decLen; i++) {
-      let n = decimalNum.substr(i, 1)
-      if (n !== '0') {
-        chineseStr += cnNums[Number(n)] + cnDecUnits[i]
-      }
+    if (chineseStr === "") {
+        chineseStr += cnNums[0] + cnIntLast + cnInteger;
+    } else if (decimalNum === "") {
+        chineseStr += cnInteger;
     }
-  }
-  if (chineseStr === '') {
-    chineseStr += cnNums[0] + cnIntLast + cnInteger
-  } else if (decimalNum === '') {
-    chineseStr += cnInteger
-  }
-  return chineseStr
+    return chineseStr;
 };
 
 /**
  * @description 数字千分位分隔
  * @param {String} num 数字
- * @param {String} separator 分隔符,默认为英文逗号','  
- * @return {String} 千分位分隔后的数字  
+ * @param {String} separator 分隔符,默认为英文逗号','
+ * @return {String} 千分位分隔后的数字
  **/
- export const numberToSplitWords = function(num,separator=','){
-	 num = num.toString();
-	 if(num.length < 3) return num;
-	 let flag = '';
-	 if(num[0] == '-'){
-		 flag = '-';
-		 num = num.substr(1);
-	 }
-	 num = num.split('.');
-	 const num1 = num[0],len1 = num[0].length;
-	 let res = '';
-	 for(let i = 0; i < num1.length; i++){
-		 if(i != 0 && i % 3 == 0){
-			 res = separator + res;
-		 }
-		 res = num1[len1 - i - 1] + res;
-	 }
-	 if(num.length > 1){
-		 res += '.';
-		 const num2 = num[1],len2 = num[1].length;
-		 for(let i = 0; i < num2.length; i++){
-		 		 if(i != 0 && i % 3 == 0){
-		 			 res += separator;
-		 		 }
-		 		 res += num2[i];
-		 }
-	 }
-	 return flag + res;
- };
- 
- /**
-  * @description 整数转罗马数字
-  * @param {number} num 整数
-  * @return {string} 罗马数字
-  */
+export const numberToSplitWords = function(num, separator = ",") {
+    num = num.toString();
+    if (num.length < 3) return num;
+    let flag = "";
+    if (num[0] == "-") {
+        flag = "-";
+        num = num.substr(1);
+    }
+    num = num.split(".");
+    const num1 = num[0],
+        len1 = num[0].length;
+    let res = "";
+    for (let i = 0; i < num1.length; i++) {
+        if (i != 0 && i % 3 == 0) {
+            res = separator + res;
+        }
+        res = num1[len1 - i - 1] + res;
+    }
+    if (num.length > 1) {
+        res += ".";
+        const num2 = num[1],
+            len2 = num[1].length;
+        for (let i = 0; i < num2.length; i++) {
+            if (i != 0 && i % 3 == 0) {
+                res += separator;
+            }
+            res += num2[i];
+        }
+    }
+    return flag + res;
+};
+
+/**
+ * @description 整数转罗马数字
+ * @param {number} num 整数
+ * @return {string} 罗马数字
+ */
 export const intToRoman = function(num) {
-	//num > 0 && num <= 3999
-	if(num <= 0 || num > 3999) return '数字范围应该为1~3999';
+    //num > 0 && num <= 3999
+    if (num <= 0 || num > 3999) return "数字范围应该为1~3999";
     const thousands = ["", "M", "MM", "MMM"];
-    const hundreds = ["", "C", "CC", "CCC", "CD", "D", "DC", "DCC", "DCCC", "CM"];
-    const tens     = ["", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XC"];
-    const ones     = ["", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"];
+    const hundreds = [
+        "",
+        "C",
+        "CC",
+        "CCC",
+        "CD",
+        "D",
+        "DC",
+        "DCC",
+        "DCCC",
+        "CM"
+    ];
+    const tens = ["", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XC"];
+    const ones = ["", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"];
 
     const roman = [];
-	num = parseInt(num);
+    num = parseInt(num);
     roman.push(thousands[Math.floor(num / 1000)]);
-    roman.push(hundreds[Math.floor(num % 1000 / 100)]);
-    roman.push(tens[Math.floor(num % 100 / 10)]);
+    roman.push(hundreds[Math.floor((num % 1000) / 100)]);
+    roman.push(tens[Math.floor((num % 100) / 10)]);
     roman.push(ones[num % 10]);
-    return roman.join('');
+    return roman.join("");
 };
 
 /**
-  * @description 罗马数字转整数
+ * @description 罗马数字转整数
  * @param {string} s 罗马数字
  * @return {number} 整数
  */
 export const romanToInt = function(s) {
     const symbolValues = new Map();
-    symbolValues.set('I', 1);
-    symbolValues.set('V', 5);
-    symbolValues.set('X', 10);
-    symbolValues.set('L', 50);
-    symbolValues.set('C', 100);
-    symbolValues.set('D', 500);
-    symbolValues.set('M', 1000);  
+    symbolValues.set("I", 1);
+    symbolValues.set("V", 5);
+    symbolValues.set("X", 10);
+    symbolValues.set("L", 50);
+    symbolValues.set("C", 100);
+    symbolValues.set("D", 500);
+    symbolValues.set("M", 1000);
     let ans = 0;
     const n = s.length;
     for (let i = 0; i < n; ++i) {
diff --git a/JYeontuComponentWarehouse/examples/utils/strTool.js b/JYeontuComponentWarehouse/examples/utils/strTool.js
index 20a4e2416759b52953e4af8ef8efbe0624db0aaf..0cedd52827fd2b22002b498f0ae0fc78810b614c 100644
--- a/JYeontuComponentWarehouse/examples/utils/strTool.js
+++ b/JYeontuComponentWarehouse/examples/utils/strTool.js
@@ -3,45 +3,45 @@
  * @param {String} str 需要转换的字符串
  * @return {String} 小驼峰形式字符串
  **/
-export const _toLittleCamel = function(str){
-	let newStr = str.split('-');
-	if(newStr.length <= 1) return str;
-	let res = newStr[0];
-	for(let i = 1; i < newStr.length; i++){
-		res += newStr[i][0].toUpperCase() + newStr[i].substr(1);
-	}
-	return res;
-}
+export const _toLittleCamel = function(str) {
+    let newStr = str.split("-");
+    if (newStr.length <= 1) return str;
+    let res = newStr[0];
+    for (let i = 1; i < newStr.length; i++) {
+        res += newStr[i][0].toUpperCase() + newStr[i].substr(1);
+    }
+    return res;
+};
 /**
  * @description '-'连接命名转换成大驼峰命名
  * @param {String} str 需要转换的字符串
  * @return {String} 大驼峰形式字符串
  **/
-export const _toBigCamel = function(str){
-	let newStr = str.split('-');
-	if(newStr.length <= 1) return str;
-	let res = '';
-	for(let i = 0; i < newStr.length; i++){
-		res += newStr[i][0].toUpperCase() + newStr[i].substr(1);
-	}
-	return res;
-}
+export const _toBigCamel = function(str) {
+    let newStr = str.split("-");
+    if (newStr.length <= 1) return str;
+    let res = "";
+    for (let i = 0; i < newStr.length; i++) {
+        res += newStr[i][0].toUpperCase() + newStr[i].substr(1);
+    }
+    return res;
+};
 /**
  * @description 驼峰命名转换成'-'连接命名
  * @param {String} str 需要转换的字符串
  * @return {String} '-'连接形式字符串
  **/
-export const camelTo_ = function(str){
-	let res = '';
-	for(let i = 0; i < str.length; i++){
-		if(str[i] >= 'A' && str[i] <= 'Z'){
-			if(i == 0) res += str[i].toLowerCase();
-			else{
-				res += '-' + str[i].toLowerCase();
-			}
-		}else{
-			res += str[i];
-		}
-	}
-	return res;
-}
+export const camelTo_ = function(str) {
+    let res = "";
+    for (let i = 0; i < str.length; i++) {
+        if (str[i] >= "A" && str[i] <= "Z") {
+            if (i == 0) res += str[i].toLowerCase();
+            else {
+                res += "-" + str[i].toLowerCase();
+            }
+        } else {
+            res += str[i];
+        }
+    }
+    return res;
+};
diff --git a/JYeontuComponentWarehouse/examples/views/JDialogView.vue b/JYeontuComponentWarehouse/examples/views/JDialogView.vue
index 04969928f389b11f738aaf835236fdb3773185af..09396b424598f3edf830f737f3927f4dc6ed9b73 100644
--- a/JYeontuComponentWarehouse/examples/views/JDialogView.vue
+++ b/JYeontuComponentWarehouse/examples/views/JDialogView.vue
@@ -1,202 +1,204 @@
 <template>
-	<split-horizontal>
-		<template v-slot:header-p>
-			<div class="title">
-				对话弹窗（JDialog）
-				<div class="detail">
-					页面弹出窗口
-				</div>
-			</div>
-		</template>
-		<template v-slot:left-p>
-		  <div class="content">
-			<j-dialog>
-				
-			</j-dialog>
-		  </div>
-		</template>
-		<template v-slot:right-p>
-			<j-table :title="tableTitle"
-					 :tableData="tableData">
-			</j-table>
-		</template>
-		<template v-slot:footer-p>
-			<j-code-height-light :code="code"
-								class="footer">
-				
-			</j-code-height-light>
-		</template>
-	</split-horizontal>
+    <split-horizontal>
+        <template v-slot:header-p>
+            <div class="title">
+                对话弹窗（JDialog）
+                <div class="detail">
+                    页面弹出窗口
+                </div>
+            </div>
+        </template>
+        <template v-slot:left-p>
+            <div class="content">
+                <j-dialog
+                    :title="title"
+                    ref="JDialog"
+                    closable="true"
+                    @confirm="confirm"
+                    :btnList="btnList"
+                >
+                    <template v-slot:j-dialog-main-content>
+                        <p>人生就像海洋</p>
+                        <p>只有意志坚强的人才能到达彼岸</p>
+                        <!-- 注释 -->
+                    </template>
+                </j-dialog>
+            </div>
+        </template>
+        <template v-slot:right-p>
+            <j-table :title="tableTitle" :tableData="tableData"> </j-table>
+        </template>
+        <template v-slot:footer-p>
+            <j-code-height-light :code="code" class="footer">
+            </j-code-height-light>
+        </template>
+    </split-horizontal>
 </template>
 <script>
-import splitHorizontal from '@/components/pages/splitHorizontal.vue'
+import splitHorizontal from "@/components/pages/splitHorizontal.vue";
 export default {
-  name:'JDialogView',
-  components:{
-	splitHorizontal,
-  },
-  data(){
-    return {
-		nums:'999999',
-		numStyle:{
-			border:'2px solid skyblue',
-			boxShadow:'10px 10px 5px #185D8C',
-			marginLeft:'0.5rem',
-		},
-		code:'',
-		tableTitle:[
-			{
-				title:'参数',//展示列名
-				key:'parameter',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'20vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			},
-			{
-				title:'字段名',//展示列名
-				key:'field',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'30vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			},
-			{
-				title:'数据类型',//展示列名
-				key:'type',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'15vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			},
-			{
-				title:'描述',//展示列名
-				key:'describe',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'35vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			}
-		],
-		tableData:[
-			{
-				'parameter':'nums',
-				'field':'数字',
-				'type':'String',
-				'describe':'需要滚动的数字'
-			},
-			{
-				'parameter':'fontSize',
-				'field':'数字尺寸，行高',
-				'type':'Number',
-				'describe':'默认为4，fone-size为参数除于3'
-			},
-			{
-				'parameter':'stepTime',
-				'field':'滚动速度',
-				'type':'Number',
-				'describe':'每走一步的时间(ms)，默认值为200'
-			},
-			{
-				'parameter':'fixNum',
-				'field':'保留小数点',
-				'type':'Number',
-				'describe':'数字保留小数点，默认为2'
-			},
-			{
-				'parameter':'numStyle',
-				'field':'自定义数字格子样式',
-				'type':'Object',
-				'describe':''
-			},
-			{
-				'parameter':'refreshTime',
-				'field':'数字刷新间隔',
-				'type':'Number',
-				'describe':'数字刷新间隔(s)，默认为3'
-			}
-		],
-	}
-  },
-  created() {
-  	this.code = `
-		<j-num-rolling :nums = "nums" 
-			:fixNum = "2" 
-			:stepTime = "200" 
-			:refreshTime = "2" 
-			:fontSize = "4" 
-			:numStyle = "numStyle">
-			
-		</j-num-rolling>
+    name: "JDialogView",
+    components: {
+        splitHorizontal
+    },
+    data() {
+        return {
+            title: "我是标题",
+            btnList: [
+                {
+                    text: "取消",
+                    style: {
+                        backgroundColor: "orangered"
+                    },
+                    click: "close"
+                },
+                {
+                    text: "确认",
+                    style: {
+                        backgroundColor: "seagreen"
+                    },
+                    click: "confirm"
+                }
+            ],
+            code: "",
+            tableTitle: [
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "字段名", //展示列名
+                    key: "field", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "30vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "数据类型", //展示列名
+                    key: "type", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "15vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "描述", //展示列名
+                    key: "describe", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "35vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData: [
+                {
+                    parameter: "title",
+                    field: "标题",
+                    type: "String",
+                    describe: "左上角显示标题"
+                },
+                {
+                    parameter: "closable",
+                    field: "点击遮罩关闭弹窗",
+                    type: "Boolean",
+                    describe: "默认为false"
+                },
+                {
+                    parameter: "btnList",
+                    field: "底部按钮列表",
+                    type: "Array",
+                    describe: "具体配置如下代码"
+                }
+            ]
+        };
+    },
+    created() {
+        this.code = `
+		<j-dialog :title="title" 
+				closable="true" 
+				:btnList="btnList">
+			<template v-slot:j-dialog-main-content>
+				<div>人生就像海洋</div>
+				<div>只有意志坚强的人才能到达彼岸</div>
+			</template>
+		</j-dialog>
 		
 		data(){
 		  return {
-			nums:'999999',
-			numStyle:{
-				border:'2px solid skyblue',
-				boxShadow:'10px 10px 5px #185D8C',
-				marginLeft:'0.5rem',
-			},
+			title:"我是标题",
+			btnList:[
+				{
+					text:'取消',
+					style:{
+						backgroundColor:'orangered'
+					},
+					click:'close'
+				},
+				{
+					text:'确认',
+					style:{
+						backgroundColor:'seagreen'
+					},
+					click:'confirm'
+				}
+			]
 		  }
 		},
 		mounted() {
-			this.autoChange();
+			
 		},
 		methods:{
-		  //自动增加数字，测试
-		  autoChange(){
-		  	this.nums = parseFloat(this.nums) + 12345.67;
-		  	setTimeout(()=>{
-		  		this.autoChange();
-		  	},5000);
-		  },
+		  confirm(){
+		  		console.log('confirm');
+		  		this.$refs.JDialog.closeDialog();
+		  }
 		}
-	`
-  },
-  mounted() {
-  	this.autoChange();
-  },
-  methods:{
-    //自动增加数字，测试
-    autoChange(){
-    	this.nums = parseFloat(this.nums) + 12345.67;
-    	setTimeout(()=>{
-    		this.autoChange();
-    	},5000);
+	`;
     },
-  }
-}
+    mounted() {},
+    methods: {
+        confirm() {
+            console.log("confirm");
+            this.$refs.JDialog.closeDialog();
+        }
+    }
+};
 </script>
 <style scoped lang="scss">
-	.title{
-		font-size: x-large;
-		text-align: left;
-		margin-bottom: 1rem;
-		.detail{
-			font-size: medium;
-			color: dimgrey;
-			margin-top: 1rem;
-		}
-	}
-  .content{
-    margin:auto auto;
+.title {
+    font-size: x-large;
+    text-align: left;
+    margin-bottom: 1rem;
+    .detail {
+        font-size: medium;
+        color: dimgrey;
+        margin-top: 1rem;
+    }
+}
+.content {
+    margin: auto auto;
     // width: 50%;
-  }
-  .header{
-  	min-height: 4rem;
-  	text-align: center;
-  }
-  .footer{
-  	margin-top: 2rem;
-  	margin-left: 2%;
-  	width:95%;
-  }
+}
+.header {
+    min-height: 4rem;
+    text-align: center;
+}
+.footer {
+    margin-top: 2rem;
+    margin-left: 2%;
+    width: 95%;
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/JFloatDivView.vue b/JYeontuComponentWarehouse/examples/views/JFloatDivView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d297efe6c225c37565aea79d7c80f88da70e4ef8
--- /dev/null
+++ b/JYeontuComponentWarehouse/examples/views/JFloatDivView.vue
@@ -0,0 +1,7 @@
+<template>
+    <j-float-div></j-float-div>
+</template>
+
+<script></script>
+
+<style></style>
diff --git a/JYeontuComponentWarehouse/examples/views/JHoverBtnView.vue b/JYeontuComponentWarehouse/examples/views/JHoverBtnView.vue
index e679b8882061231d58413b20e2bd673baa8d231e..89840fe724d202924c68dc83f6baf0f4c9ec7d07 100644
--- a/JYeontuComponentWarehouse/examples/views/JHoverBtnView.vue
+++ b/JYeontuComponentWarehouse/examples/views/JHoverBtnView.vue
@@ -1,160 +1,161 @@
 <template>
-	<split-horizontal>
-		<template v-slot:header-p>
-			<div class="title">
-				悬浮按钮（JHoverBtn）
-				<div class="detail">
-					可拖拽悬浮按钮组件
-				</div>
-			</div>
-		</template>
-		<template v-slot:left-p>
-		  <div class="content">
-			<j-hover-btn bgColor = 'pink'
-						width = '80'
-						text = '按钮文字'
-						:btn-style = "btnStyle"
-						@hoverBtnClick = "hoverBtnClick()">
-				
-			</j-hover-btn>
-		  </div>
-		</template>
-		<template v-slot:right-p>
-			<j-table :title="tableTitle"
-					 :tableData="tableData"
-					 style="height: 500px;">
-			</j-table>
-		</template>
-		<template v-slot:footer-p>
-			<j-code-height-light :code="code"
-								class="footer">
-				
-			</j-code-height-light>
-		</template>
-	</split-horizontal>
+    <split-horizontal>
+        <template v-slot:header-p>
+            <div class="title">
+                悬浮按钮（JHoverBtn）
+                <div class="detail">
+                    可拖拽悬浮按钮组件
+                </div>
+            </div>
+        </template>
+        <template v-slot:left-p>
+            <div class="content">
+                <j-hover-btn
+                    bgColor="pink"
+                    width="80"
+                    text="按钮文字"
+                    :btn-style="btnStyle"
+                    @hoverBtnClick="hoverBtnClick()"
+                >
+                </j-hover-btn>
+            </div>
+        </template>
+        <template v-slot:right-p>
+            <j-table
+                :title="tableTitle"
+                :tableData="tableData"
+                style="height: 500px;"
+            >
+            </j-table>
+        </template>
+        <template v-slot:footer-p>
+            <j-code-height-light :code="code" class="footer">
+            </j-code-height-light>
+        </template>
+    </split-horizontal>
 </template>
 <script>
-import splitHorizontal from '@/components/pages/splitHorizontal.vue'
+import splitHorizontal from "@/components/pages/splitHorizontal.vue";
 export default {
-  name:'JHoverBtnView',
-  components:{
-	splitHorizontal,
-  },
-  data(){
-    return {
-		code:'',
-		btnStyle:{
-			"fontSize":'small',
-			"top":'60vh',
-			"left":'90vw'
-		},
-		tableTitle:[
-			{
-				title:'参数',//展示列名
-				key:'parameter',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'20vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			},
-			{
-				title:'字段名',//展示列名
-				key:'field',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'30vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			},
-			{
-				title:'数据类型',//展示列名
-				key:'type',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'15vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			},
-			{
-				title:'描述',//展示列名
-				key:'describe',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'35vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			}
-		],
-		tableData:[
-			{
-				'parameter':'bgColor',
-				'field':'按钮背景颜色',
-				'type':'String',
-				'describe':'默认为deepskyblue'
-			},
-			{
-				'parameter':'autoHide',
-				'field':'贴边隐藏',
-				'type':'Boolean',
-				'describe':'按钮移动到左右两侧会自动缩进两边，默认为true'
-			},
-			{
-				'parameter':'clickDis',
-				'field':'判断是否点击事件距离（px）',
-				'type':'Number',
-				'describe':'移动距离小于该值则为点击事件，默认为10'
-			},
-			{
-				'parameter':'showWidth',
-				'field':'贴边隐藏后露出宽度（px）',
-				'type':'Number',
-				'describe':'数字保留小数点，默认为15'
-			},
-			{
-				'parameter':'width',
-				'field':'按钮宽高（px）',
-				'type':'Number',
-				'describe':'默认为80'
-			},
-			{
-				'parameter':'radius',
-				'field':'是否圆角',
-				'type':'Boolean',
-				'describe':'默认为true'
-			},
-			{
-				'parameter':'btnStyle',
-				'field':'自定义样式',
-				'type':'Object',
-				'describe':'键值对形式，支持驼峰命名和-命名'
-			},
-			{
-				'parameter':'text',
-				'field':'按钮显示文字',
-				'type':'String',
-				'describe':"默认为'悬浮按钮'"
-			},
-			{
-				'parameter':'zIndex',
-				'field':'按钮层级',
-				'type':'Number',
-				'describe':'默认为999'
-			}
-		],
-	}
-  },
-  created() {
-  	this.code = `
+    name: "JHoverBtnView",
+    components: {
+        splitHorizontal
+    },
+    data() {
+        return {
+            code: "",
+            btnStyle: {
+                fontSize: "small",
+                top: "60vh",
+                left: "90vw"
+            },
+            tableTitle: [
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "字段名", //展示列名
+                    key: "field", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "30vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "数据类型", //展示列名
+                    key: "type", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "15vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "描述", //展示列名
+                    key: "describe", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "35vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData: [
+                {
+                    parameter: "bgColor",
+                    field: "按钮背景颜色",
+                    type: "String",
+                    describe: "默认为deepskyblue"
+                },
+                {
+                    parameter: "autoHide",
+                    field: "贴边隐藏",
+                    type: "Boolean",
+                    describe: "按钮移动到左右两侧会自动缩进两边，默认为true"
+                },
+                {
+                    parameter: "clickDis",
+                    field: "判断是否点击事件距离（px）",
+                    type: "Number",
+                    describe: "移动距离小于该值则为点击事件，默认为10"
+                },
+                {
+                    parameter: "showWidth",
+                    field: "贴边隐藏后露出宽度（px）",
+                    type: "Number",
+                    describe: "数字保留小数点，默认为15"
+                },
+                {
+                    parameter: "width",
+                    field: "按钮宽高（px）",
+                    type: "Number",
+                    describe: "默认为80"
+                },
+                {
+                    parameter: "radius",
+                    field: "是否圆角",
+                    type: "Boolean",
+                    describe: "默认为true"
+                },
+                {
+                    parameter: "btnStyle",
+                    field: "自定义样式",
+                    type: "Object",
+                    describe: "键值对形式，支持驼峰命名和-命名"
+                },
+                {
+                    parameter: "text",
+                    field: "按钮显示文字",
+                    type: "String",
+                    describe: "默认为'悬浮按钮'"
+                },
+                {
+                    parameter: "zIndex",
+                    field: "按钮层级",
+                    type: "Number",
+                    describe: "默认为999"
+                }
+            ]
+        };
+    },
+    created() {
+        this.code = `
 		<j-hover-btn bgColor = 'pink' 
-			width = '80' 
-			text = '按钮文字' 
-			:btn-style = "btnStyle" 
-			@hoverBtnClick = "hoverBtnClick()">
+					width = '80' 
+					text = '按钮文字' 
+					:btn-style = "btnStyle" 
+					@hoverBtnClick = "hoverBtnClick()">
 			
 		</j-hover-btn>
 		export default {
@@ -173,40 +174,40 @@ export default {
 			  }
 			}
 		}
-	`
-  },
-  mounted() {
-  	this.autoChange();
-  },
-  methods:{
-    hoverBtnClick(){
-		alert('触发点击事件');
-	}
-  }
-}
+	`;
+    },
+    mounted() {
+        this.autoChange();
+    },
+    methods: {
+        hoverBtnClick() {
+            alert("触发点击事件");
+        }
+    }
+};
 </script>
 <style scoped lang="scss">
-	.title{
-		font-size: x-large;
-		text-align: left;
-		margin-bottom: 1rem;
-		.detail{
-			font-size: medium;
-			color: dimgrey;
-			margin-top: 1rem;
-		}
-	}
-  .content{
-    margin:auto auto;
+.title {
+    font-size: x-large;
+    text-align: left;
+    margin-bottom: 1rem;
+    .detail {
+        font-size: medium;
+        color: dimgrey;
+        margin-top: 1rem;
+    }
+}
+.content {
+    margin: auto auto;
     // width: 50%;
-  }
-  .header{
-  	min-height: 4rem;
-  	text-align: center;
-  }
-  .footer{
-  	margin-top: 2rem;
-  	margin-left: 2%;
-  	width:95%;
-  }
+}
+.header {
+    min-height: 4rem;
+    text-align: center;
+}
+.footer {
+    margin-top: 2rem;
+    margin-left: 2%;
+    width: 95%;
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/JNumRollingView.vue b/JYeontuComponentWarehouse/examples/views/JNumRollingView.vue
index 4944411c3c546e3cf61c8c446d9a72a4cdb74d5b..71f4e7cc7bd4bbbd6e067d679f88d9e2ceef3ee9 100644
--- a/JYeontuComponentWarehouse/examples/views/JNumRollingView.vue
+++ b/JYeontuComponentWarehouse/examples/views/JNumRollingView.vue
@@ -1,145 +1,142 @@
 <template>
-	<split-horizontal>
-		<template v-slot:header-p>
-			<div class="title">
-				数字滚动变化效果（JNumRolling）
-				<div class="detail">
-					数字滚动变化效果组件
-				</div>
-			</div>
-		</template>
-		<template v-slot:left-p>
-		  <div class="content">
-			<j-num-rolling :nums = "nums"
-						:fixNum = "2"
-						:stepTime = "200"
-						:refreshTime = "2"
-						:fontSize = "4"
-						:numStyle = "numStyle">
-				
-			</j-num-rolling>
-		  </div>
-		</template>
-		<template v-slot:right-p>
-			<j-table :title="tableTitle"
-					 :tableData="tableData">
-			</j-table>
-		</template>
-		<template v-slot:footer-p>
-			<j-code-height-light :code="code"
-								class="footer">
-				
-			</j-code-height-light>
-		</template>
-	</split-horizontal>
+    <split-horizontal>
+        <template v-slot:header-p>
+            <div class="title">
+                数字滚动变化效果（JNumRolling）
+                <div class="detail">
+                    数字滚动变化效果组件
+                </div>
+            </div>
+        </template>
+        <template v-slot:left-p>
+            <div class="content">
+                <j-num-rolling
+                    :nums="nums"
+                    :fixNum="2"
+                    :stepTime="200"
+                    :refreshTime="2"
+                    :fontSize="4"
+                    :numStyle="numStyle"
+                >
+                </j-num-rolling>
+            </div>
+        </template>
+        <template v-slot:right-p>
+            <j-table :title="tableTitle" :tableData="tableData"> </j-table>
+        </template>
+        <template v-slot:footer-p>
+            <j-code-height-light :code="code" class="footer">
+            </j-code-height-light>
+        </template>
+    </split-horizontal>
 </template>
 <script>
-import splitHorizontal from '@/components/pages/splitHorizontal.vue'
+import splitHorizontal from "@/components/pages/splitHorizontal.vue";
 export default {
-  name:'JNumRollingView',
-  components:{
-	splitHorizontal,
-  },
-  data(){
-    return {
-		nums:'999999',
-		numStyle:{
-			border:'2px solid skyblue',
-			boxShadow:'10px 10px 5px #185D8C',
-			marginLeft:'0.5rem',
-		},
-		code:'',
-		tableTitle:[
-			{
-				title:'参数',//展示列名
-				key:'parameter',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'20vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			},
-			{
-				title:'字段名',//展示列名
-				key:'field',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'30vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			},
-			{
-				title:'数据类型',//展示列名
-				key:'type',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'15vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			},
-			{
-				title:'描述',//展示列名
-				key:'describe',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'35vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			}
-		],
-		tableData:[
-			{
-				'parameter':'nums',
-				'field':'数字',
-				'type':'String',
-				'describe':'需要滚动的数字'
-			},
-			{
-				'parameter':'fontSize',
-				'field':'数字尺寸，行高',
-				'type':'Number',
-				'describe':'默认为4，fone-size为参数除于3'
-			},
-			{
-				'parameter':'stepTime',
-				'field':'滚动速度',
-				'type':'Number',
-				'describe':'每走一步的时间(ms)，默认值为200'
-			},
-			{
-				'parameter':'fixNum',
-				'field':'保留小数点',
-				'type':'Number',
-				'describe':'数字保留小数点，默认为2'
-			},
-			{
-				'parameter':'numStyle',
-				'field':'自定义数字格子样式',
-				'type':'Object',
-				'describe':''
-			},
-			{
-				'parameter':'refreshTime',
-				'field':'数字刷新间隔',
-				'type':'Number',
-				'describe':'数字刷新间隔(s)，默认为3'
-			}
-		],
-	}
-  },
-  created() {
-  	this.code = `
+    name: "JNumRollingView",
+    components: {
+        splitHorizontal
+    },
+    data() {
+        return {
+            nums: "999999",
+            numStyle: {
+                border: "2px solid skyblue",
+                boxShadow: "10px 10px 5px #185D8C",
+                marginLeft: "0.5rem"
+            },
+            code: "",
+            tableTitle: [
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "字段名", //展示列名
+                    key: "field", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "30vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "数据类型", //展示列名
+                    key: "type", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "15vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "描述", //展示列名
+                    key: "describe", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "35vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData: [
+                {
+                    parameter: "nums",
+                    field: "数字",
+                    type: "String",
+                    describe: "需要滚动的数字"
+                },
+                {
+                    parameter: "fontSize",
+                    field: "数字尺寸，行高",
+                    type: "Number",
+                    describe: "默认为4，fone-size为参数除于3"
+                },
+                {
+                    parameter: "stepTime",
+                    field: "滚动速度",
+                    type: "Number",
+                    describe: "每走一步的时间(ms)，默认值为200"
+                },
+                {
+                    parameter: "fixNum",
+                    field: "保留小数点",
+                    type: "Number",
+                    describe: "数字保留小数点，默认为2"
+                },
+                {
+                    parameter: "numStyle",
+                    field: "自定义数字格子样式",
+                    type: "Object",
+                    describe: ""
+                },
+                {
+                    parameter: "refreshTime",
+                    field: "数字刷新间隔",
+                    type: "Number",
+                    describe: "数字刷新间隔(s)，默认为3"
+                }
+            ]
+        };
+    },
+    created() {
+        this.code = `
 		<j-num-rolling :nums = "nums" 
-			:fixNum = "2" 
-			:stepTime = "200" 
-			:refreshTime = "2" 
-			:fontSize = "4" 
-			:numStyle = "numStyle">
-			
+					:fixNum = "2" 
+					:stepTime = "200" 
+					:refreshTime = "2" 
+					:fontSize = "4" 
+					:numStyle = "numStyle">
+				
 		</j-num-rolling>
 		
 		data(){
@@ -164,44 +161,44 @@ export default {
 		  	},5000);
 		  },
 		}
-	`
-  },
-  mounted() {
-  	this.autoChange();
-  },
-  methods:{
-    //自动增加数字，测试
-    autoChange(){
-    	this.nums = parseFloat(this.nums) + 12345.67;
-    	setTimeout(()=>{
-    		this.autoChange();
-    	},5000);
+	`;
     },
-  }
-}
+    mounted() {
+        this.autoChange();
+    },
+    methods: {
+        //自动增加数字，测试
+        autoChange() {
+            this.nums = parseFloat(this.nums) + 12345.67;
+            setTimeout(() => {
+                this.autoChange();
+            }, 5000);
+        }
+    }
+};
 </script>
 <style scoped lang="scss">
-	.title{
-		font-size: x-large;
-		text-align: left;
-		margin-bottom: 1rem;
-		.detail{
-			font-size: medium;
-			color: dimgrey;
-			margin-top: 1rem;
-		}
-	}
-  .content{
-    margin:auto auto;
+.title {
+    font-size: x-large;
+    text-align: left;
+    margin-bottom: 1rem;
+    .detail {
+        font-size: medium;
+        color: dimgrey;
+        margin-top: 1rem;
+    }
+}
+.content {
+    margin: auto auto;
     // width: 50%;
-  }
-  .header{
-  	min-height: 4rem;
-  	text-align: center;
-  }
-  .footer{
-  	margin-top: 2rem;
-  	margin-left: 2%;
-  	width:95%;
-  }
+}
+.header {
+    min-height: 4rem;
+    text-align: center;
+}
+.footer {
+    margin-top: 2rem;
+    margin-left: 2%;
+    width: 95%;
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/JStepsView.vue b/JYeontuComponentWarehouse/examples/views/JStepsView.vue
index af62b18efdbec9c4488927b852056d8cbea413c1..b6e1f4d82ce14cc3a5fd5bdf8ae877f49b7891fa 100644
--- a/JYeontuComponentWarehouse/examples/views/JStepsView.vue
+++ b/JYeontuComponentWarehouse/examples/views/JStepsView.vue
@@ -1,202 +1,256 @@
 <template>
-	<split-horizontal>
-		<template v-slot:header-p>
-			<div class="title">
-				步骤条（JSteps）
-				<div class="detail">
-					用于引导用户按照流程完成任务的导航条，显示当前所在步骤
-				</div>
-			</div>
-		</template>
-		<template v-slot:left-p>
-		  <div class="content">
-			<j-steps>
-				
-			</j-steps>
-		  </div>
-		</template>
-		<template v-slot:right-p>
-			<j-table :title="tableTitle"
-					 :tableData="tableData">
-			</j-table>
-		</template>
-		<template v-slot:footer-p>
-			<j-code-height-light :code="code"
-								class="footer">
-				
-			</j-code-height-light>
-		</template>
-	</split-horizontal>
+    <split-horizontal>
+        <template v-slot:header-p>
+            <div class="title">
+                步骤条（JSteps）
+                <div class="detail">
+                    用于引导用户按照流程完成任务的导航条，显示当前所在步骤
+                </div>
+            </div>
+        </template>
+        <template v-slot:left-p>
+            <div class="content">
+                <j-steps :dataList="dataList" :lineStyle="lineStyle"> </j-steps>
+            </div>
+        </template>
+        <template v-slot:right-p>
+            <j-table :title="tableTitle" :tableData="tableData"> </j-table>
+        </template>
+        <template v-slot:footer-p>
+            <j-code-height-light :code="code" class="footer">
+            </j-code-height-light>
+        </template>
+    </split-horizontal>
 </template>
 <script>
-import splitHorizontal from '@/components/pages/splitHorizontal.vue'
+import splitHorizontal from "@/components/pages/splitHorizontal.vue";
 export default {
-  name:'JStepsView',
-  components:{
-	splitHorizontal,
-  },
-  data(){
-    return {
-		nums:'999999',
-		numStyle:{
-			border:'2px solid skyblue',
-			boxShadow:'10px 10px 5px #185D8C',
-			marginLeft:'0.5rem',
-		},
-		code:'',
-		tableTitle:[
-			{
-				title:'参数',//展示列名
-				key:'parameter',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'20vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			},
-			{
-				title:'字段名',//展示列名
-				key:'field',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'30vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			},
-			{
-				title:'数据类型',//展示列名
-				key:'type',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'15vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			},
-			{
-				title:'描述',//展示列名
-				key:'describe',//字段名
-				type: '', // 列类型
-				readOnly:true,//是否只读
-				width:'35vw',//列宽度
-				columnStyle: '', // 列样式
-				fixed: false,//是否固定
-				sort: false, // 是否支持排序
-			}
-		],
-		tableData:[
-			{
-				'parameter':'nums',
-				'field':'数字',
-				'type':'String',
-				'describe':'需要滚动的数字'
-			},
-			{
-				'parameter':'fontSize',
-				'field':'数字尺寸，行高',
-				'type':'Number',
-				'describe':'默认为4，fone-size为参数除于3'
-			},
-			{
-				'parameter':'stepTime',
-				'field':'滚动速度',
-				'type':'Number',
-				'describe':'每走一步的时间(ms)，默认值为200'
-			},
-			{
-				'parameter':'fixNum',
-				'field':'保留小数点',
-				'type':'Number',
-				'describe':'数字保留小数点，默认为2'
-			},
-			{
-				'parameter':'numStyle',
-				'field':'自定义数字格子样式',
-				'type':'Object',
-				'describe':''
-			},
-			{
-				'parameter':'refreshTime',
-				'field':'数字刷新间隔',
-				'type':'Number',
-				'describe':'数字刷新间隔(s)，默认为3'
-			}
-		],
-	}
-  },
-  created() {
-  	this.code = `
-		<j-num-rolling :nums = "nums" 
-			:fixNum = "2" 
-			:stepTime = "200" 
-			:refreshTime = "2" 
-			:fontSize = "4" 
-			:numStyle = "numStyle">
-			
-		</j-num-rolling>
-		
-		data(){
-		  return {
-			nums:'999999',
-			numStyle:{
-				border:'2px solid skyblue',
-				boxShadow:'10px 10px 5px #185D8C',
-				marginLeft:'0.5rem',
-			},
-		  }
-		},
-		mounted() {
-			this.autoChange();
-		},
-		methods:{
-		  //自动增加数字，测试
-		  autoChange(){
-		  	this.nums = parseFloat(this.nums) + 12345.67;
-		  	setTimeout(()=>{
-		  		this.autoChange();
-		  	},5000);
-		  },
-		}
-	`
-  },
-  mounted() {
-  	this.autoChange();
-  },
-  methods:{
-    //自动增加数字，测试
-    autoChange(){
-    	this.nums = parseFloat(this.nums) + 12345.67;
-    	setTimeout(()=>{
-    		this.autoChange();
-    	},5000);
+    name: "JStepsView",
+    components: {
+        splitHorizontal
     },
-  }
-}
+    data() {
+        return {
+            iconWidth: 50,
+            lineStyle: {
+                color: "skyblue",
+                height: "100px"
+            },
+            code: "",
+            dataList: [
+                {
+                    title: "版本0.1.5（待发布）",
+                    descript:
+                        "优化：代码高亮组件、表格组件增加展开行；增加：步骤图组件",
+                    time: "未定",
+                    icon: "图标"
+                },
+                {
+                    title: "版本0.1.4（已发布）",
+                    descript: "优化：代码高亮组件",
+                    time: "2021-12-01",
+                    icon: "图标"
+                },
+                {
+                    title: "版本0.1.3（已发布）",
+                    descript: "增加：悬浮按钮组件、弹窗组件",
+                    time: "2021-11-28",
+                    icon: "图标"
+                },
+                {
+                    title: "版本0.1.2（已发布）",
+                    descript: "增加：数字滚动变化效果组件；工具函数",
+                    time: "2021-11-26",
+                    icon: "图标"
+                },
+                {
+                    title: "版本0.1.1（已发布）",
+                    descript:
+                        "项目搭建，导入：日历组件、电子屏数字组件、流程图组件、表格组件、代码高亮组件、canvas画板组件",
+                    time: "2021-11-24",
+                    icon: "图标"
+                },
+                {
+                    title: "版本0.1.0（已发布）",
+                    descript: "初始化npm库",
+                    time: "2021-11-22",
+                    icon: "图标"
+                }
+            ],
+            tableTitle: [
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "字段名", //展示列名
+                    key: "field", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "30vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "数据类型", //展示列名
+                    key: "type", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "15vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "描述", //展示列名
+                    key: "describe", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "35vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData: [
+                {
+                    parameter: "direction",
+                    field: "方向",
+                    type: "String",
+                    describe: "默认为纵向"
+                },
+                {
+                    parameter: "iconWidth",
+                    field: "icon宽",
+                    type: "Number",
+                    describe: "icon宽度，默认值为50"
+                },
+                {
+                    parameter: "sortBy",
+                    field: "排序字段",
+                    type: "String",
+                    describe: "指定进行排序的字段"
+                },
+                {
+                    parameter: "lineStyle",
+                    field: "连接线样式",
+                    type: "Object",
+                    describe: "icon之间连接线样式"
+                },
+                {
+                    parameter: "titleStyle",
+                    field: "title字段样式",
+                    type: "Object",
+                    describe: "title字段样式"
+                },
+                {
+                    parameter: "descriptStyle",
+                    field: "descript字段样式",
+                    type: "Object",
+                    describe: "descript字段样式"
+                },
+                {
+                    parameter: "timeStyle",
+                    field: "time字段样式",
+                    type: "Object",
+                    describe: "time字段样式"
+                },
+                {
+                    parameter: "dataList",
+                    field: "详细数据",
+                    type: "Array",
+                    describe: "具体数据结构如下"
+                }
+            ]
+        };
+    },
+    created() {
+        this.code = `
+        <j-steps :dataList="dataList" :lineStyle="lineStyle">
+        </j-steps>
+
+        data(){
+            return {
+                iconWidth:50,
+                lineStyle:{
+                    color:'skyblue',
+                    height:'100px'
+                },
+                dataList:[{
+                    title:'版本0.1.5（待发布）',
+                    descript:'优化：代码高亮组件；增加：步骤图组件',
+                    time:'未定',
+                    icon:'图标',
+                },{
+                    title:'版本0.1.4（已发布）',
+                    descript:'优化：代码高亮组件',
+                    time:'2021-12-01',
+                    icon:'图标',
+                },{
+                    title:'版本0.1.3（已发布）',
+                    descript:'增加：悬浮按钮组件、弹窗组件',
+                    time:'2021-11-28',
+                    icon:'图标',
+                },{
+                    title:'版本0.1.2（已发布）',
+                    descript:'增加：数字滚动变化效果组件；工具函数',
+                    time:'2021-11-26',
+                    icon:'图标',
+                },{
+                    title:'版本0.1.1（已发布）',
+                    descript:'项目搭建，导入：日历组件、电子屏数字组件、流程图组件、表格组件、代码高亮组件、canvas画板组件',
+                    time:'2021-11-24',
+                    icon:'图标',
+                },{
+                    title:'版本0.1.0（已发布）',
+                    descript:'初始化npm库',
+                    time:'2021-11-22',
+                    icon:'图标',
+                }],
+            }
+        },
+    mounted() {
+
+    },
+    methods:{
+
+    }
+	`;
+    },
+    mounted() {},
+    methods: {}
+};
 </script>
 <style scoped lang="scss">
-	.title{
-		font-size: x-large;
-		text-align: left;
-		margin-bottom: 1rem;
-		.detail{
-			font-size: medium;
-			color: dimgrey;
-			margin-top: 1rem;
-		}
-	}
-  .content{
-    margin:auto auto;
+.title {
+    font-size: x-large;
+    text-align: left;
+    margin-bottom: 1rem;
+    .detail {
+        font-size: medium;
+        color: dimgrey;
+        margin-top: 1rem;
+    }
+}
+.content {
+    margin: auto auto;
+    width: 100%;
     // width: 50%;
-  }
-  .header{
-  	min-height: 4rem;
-  	text-align: center;
-  }
-  .footer{
-  	margin-top: 2rem;
-  	margin-left: 2%;
-  	width:95%;
-  }
+}
+.header {
+    min-height: 4rem;
+    text-align: center;
+}
+.footer {
+    margin-top: 2rem;
+    margin-left: 2%;
+    width: 95%;
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/JTableView.vue b/JYeontuComponentWarehouse/examples/views/JTableView.vue
index 3ae82a9a72edd4211c3a88ddb2049ac3d89af53a..d2bf341f5681e136f87197f3616d32f27fe9d6c6 100644
--- a/JYeontuComponentWarehouse/examples/views/JTableView.vue
+++ b/JYeontuComponentWarehouse/examples/views/JTableView.vue
@@ -1,275 +1,438 @@
 <template>
-	<split-horizontal>
-		<template v-slot:header-p>
-			<div class="title">
-				表格组件（JTable）
-				<div class="detail">
-					表格组件
-				</div>
-			</div>
-		</template>
-		<template v-slot:left-p>
-			<j-table :title="title"
-					 :tableData="tableData">
-			</j-table>
-		</template>
-		<template v-slot:right-p>
-			<j-table :title="title1"
-					 :tableData="tableData1">
-			</j-table>
-		</template>
-		<template v-slot:footer-p>
-			<j-code-height-light :code="code"
-								class="footer">
-				
-			</j-code-height-light>
-		</template>
-	</split-horizontal>
+    <split-horizontal>
+        <template v-slot:header-p>
+            <div class="title">
+                表格组件（JTable）
+                <div class="detail">
+                    表格组件,支持指定行排序，展开行
+                </div>
+            </div>
+        </template>
+        <template v-slot:left-p>
+            <j-table :tableId="'t1'" ref="t1" :title="title" :tableData="tableData">
+            </j-table>
+        </template>
+        <template v-slot:right-p>
+            <j-table
+                :tableId="'t2'"
+                ref="t2"
+                :title="title1"
+                :tableData="tableData1"
+            >
+            </j-table>
+        </template>
+        <template v-slot:footer-p>
+            <j-code-height-light :code="code" class="footer">
+            </j-code-height-light>
+        </template>
+    </split-horizontal>
 </template>
 
 <script>
-import splitHorizontal from '@/components/pages/splitHorizontal.vue'
+import splitHorizontal from "@/components/pages/splitHorizontal.vue";
 export default {
-  name: "JTableView",
-  //import引入的组件需要注入到对象中才能使用",
-  components: {
-	splitHorizontal
-  },
-  data() {
-    //这里存放数据",
-    return {
-      title:[
-        {
-          title:'姓名',//展示列名
-          key:'name',//字段名
-          type: '', // 列类型
-          readOnly:true,//是否只读
-          width:'25vw',//列宽度
-          columnStyle: '', // 列样式
-          fixed: false,//是否固定
-          sort: false, // 是否支持排序
-        },
-        {
-          title:'年龄',//展示列名
-          key:'age',//字段名
-          type: '', // 列类型
-          readOnly:false,//是否只读
-          width:'15vw',//列宽度
-          columnStyle: '', // 列样式
-          fixed: false,//是否固定
-          sort: true, // 是否支持排序
-        },
-        {
-          title:'职业',//展示列名
-          key:'work',//字段名
-          type: '', // 列类型
-          readOnly:true,//是否只读
-          width:'50vw',//列宽度
-          columnStyle: '', // 列样式
-          fixed: false,//是否固定
-          sort: false, // 是否支持排序
+    name: "JTableView",
+    //import引入的组件需要注入到对象中才能使用",
+    components: {
+        splitHorizontal
+    },
+    data() {
+        //这里存放数据",
+        return {
+            title: [
+                {
+                    title: "姓名", //展示列名
+                    key: "name", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "25vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "年龄", //展示列名
+                    key: "age", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "25vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: true // 是否支持排序
+                },
+                {
+                    title: "职业", //展示列名
+                    key: "work", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "50vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData: [
+                {
+                    name: "张三",
+                    age: "68",
+                    work: "法外狂徒",
+                    children: {
+                        title: [
+                            {
+                                title: "姓名", //展示列名
+                                key: "name", //字段名
+                                type: "", // 列类型
+                                readOnly: true, //是否只读
+                                width: "25vw", //列宽度
+                                columnStyle: "", // 列样式
+                                fixed: false, //是否固定
+                                sort: false // 是否支持排序
+                            },
+                            {
+                                title: "年龄", //展示列名
+                                key: "age", //字段名
+                                type: "", // 列类型
+                                readOnly: true, //是否只读
+                                width: "25vw", //列宽度
+                                columnStyle: "", // 列样式
+                                fixed: false, //是否固定
+                                sort: true // 是否支持排序
+                            },
+                            {
+                                title: "关系", //展示列名
+                                key: "relation", //字段名
+                                type: "", // 列类型
+                                readOnly: true, //是否只读
+                                width: "50vw", //列宽度
+                                columnStyle: "", // 列样式
+                                fixed: false, //是否固定
+                                sort: false // 是否支持排序
+                            }
+                        ],
+                        data: [
+                            {
+                                name: "张小三",
+                                age: "40",
+                                relation: "儿子",
+                                children: {
+                                    data: [
+                                        {
+                                            name: "张小四",
+                                            age: "测试",
+                                            relation: "测试",
+                                            test: "测试"
+                                        }
+                                    ]
+                                }
+                            }
+                        ]
+                    }
+                },
+                {
+                    name: "李四",
+                    age: "18",
+                    work: "学生"
+                },
+                {
+                    name: "王五",
+                    age: "22",
+                    work: "工程师"
+                }
+            ],
+            title1: [
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "字段名", //展示列名
+                    key: "field", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "30vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "数据类型", //展示列名
+                    key: "type", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "15vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "描述", //展示列名
+                    key: "describe", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "35vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData1: [
+                {
+                    parameter: "title",
+                    field: "表头",
+                    type: "Array",
+                    describe: "详细参数请展开"
+                },
+                {
+                    parameter: "tableData",
+                    field: "表数据",
+                    type: "Array",
+                    describe: "对应title参数的key字段，具体使用如下代码"
+                }
+            ],
+            chatData: {},
+            code: ""
+        };
+    },
+    //监听属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+        initData() {
+            let tableData = this.tableData1;
+            const titleObj = [
+                {
+                    parameter: "title",
+                    field: "展示列名",
+                    type: "String",
+                    describe: "表头展示的列名"
+                },
+                {
+                    parameter: "key",
+                    field: "字段名",
+                    type: "String",
+                    describe: "对应展示的字段名"
+                },
+                {
+                    parameter: "type",
+                    field: "列类型",
+                    type: "String",
+                    describe: "列的类型(text，input)"
+                },
+                {
+                    parameter: "readOnly",
+                    field: "是否只读",
+                    type: "Boolean",
+                    describe: "限制是否可读"
+                },
+                {
+                    parameter: "width",
+                    field: "列宽度",
+                    type: "String",
+                    describe: "设置列宽度"
+                },
+                {
+                    parameter: "columnStyle",
+                    field: "列样式",
+                    type: "Object",
+                    describe: "设置列样式"
+                },
+                {
+                    parameter: "sort",
+                    field: "排序",
+                    type: "Boolean",
+                    describe: "是否支持排序"
+                },
+                {
+                    parameter: "sortWay",
+                    field: "排序方式",
+                    type: "String",
+                    describe: "asc:升序,desc:降序"
+                }
+            ];
+            const title1 = [...this.title1];
+            title1[0].width = "15vw";
+            title1[1].width = "15vw";
+            title1[2].width = "15vw";
+            title1[3].width = "55vw";
+            for (let i = 0; i < tableData.length; i++) {
+                // tableData[i].children
+                if (tableData[i].parameter === "title") {
+                    tableData[i].children = {
+                        title: title1,
+                        data: titleObj
+                    };
+                }
+            }
         }
-      ],
-      tableData:[
-        {
-          name:'张三',
-          age:'18',
-          work:'法外狂徒'
-        },
-        {
-          name:'李四',
-          age:'18',
-          work:'学生'
-        },
-        {
-          name:'王五',
-          age:'22',
-          work:'工程师'
-        }
-      ],
-	  title1:[
-	    {
-	      title:'参数',//展示列名
-	      key:'parameter',//字段名
-	      type: '', // 列类型
-	      readOnly:true,//是否只读
-	      width:'20vw',//列宽度
-	      columnStyle: '', // 列样式
-	      fixed: false,//是否固定
-	      sort: false, // 是否支持排序
-	    },
-	    {
-	      title:'字段名',//展示列名
-	      key:'field',//字段名
-	      type: '', // 列类型
-	      readOnly:true,//是否只读
-	      width:'30vw',//列宽度
-	      columnStyle: '', // 列样式
-	      fixed: false,//是否固定
-	      sort: false, // 是否支持排序
-	    },
-	    {
-	      title:'数据类型',//展示列名
-	      key:'type',//字段名
-	      type: '', // 列类型
-	      readOnly:true,//是否只读
-	      width:'15vw',//列宽度
-	      columnStyle: '', // 列样式
-	      fixed: false,//是否固定
-	      sort: false, // 是否支持排序
-	    },
-	    {
-	      title:'描述',//展示列名
-	      key:'describe',//字段名
-	      type: '', // 列类型
-	      readOnly:true,//是否只读
-	      width:'35vw',//列宽度
-	      columnStyle: '', // 列样式
-	      fixed: false,//是否固定
-	      sort: false, // 是否支持排序
-	    }
-	  ],
-        tableData1:[
-          {
-            'parameter':'title',
-            'field':'表头',
-            'type':'Array',
-            'describe':'详细参数如下'
-          },
-          {
-            'parameter':'tableData',
-            'field':'表数据',
-            'type':'Array',
-            'describe':'详细参数如下'
-          }
-        ],
-	  chatData:{},
-	  code:''
-    };
-  },
-  //监听属性 类似于data概念",
-  computed: {},
-  //监控data中的数据变化",
-  watch: {},
-  //方法集合",
-  methods: {},
-  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
-  beforeCreate() {
-  },
-
-  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
-  created() {
-	  this.code = `
-			<j-table :title="title" 
-				:tableData="tableData">
-			</j-table>
-			  
-			  /**
-			   * title中的title字段会作为表头显示
-			   * title中key值代表列名 与 tableData中数据属性对应
-			   */
-	  		  title:[
-	  		    {
-	  		      title:'姓名',//展示列名
-	  		      key:'name',//字段名
-	  		      type: '', // 列类型
-	  		      readOnly:true,//是否只读
-	  		      width:'35vw',//列宽度
-	  		      columnStyle: '', // 列样式
-	  		      fixed: false,//是否固定
-	  		      sort: false, // 是否支持排序
-	  		    },
-	  		    {
-	  		      title:'年龄',//展示列名
-	  		      key:'age',//字段名
-	  		      type: '', // 列类型
-	  		      readOnly:false,//是否只读
-	  		      width:'25vw',//列宽度
-	  		      columnStyle: '', // 列样式
-	  		      fixed: false,//是否固定
-	  		      sort: true, // 是否支持排序
-	  		    },
-	  		    {
-	  		      title:'职业',//展示列名
-	  		      key:'work',//字段名
-	  		      type: '', // 列类型
-	  		      readOnly:true,//是否只读
-	  		      width:'40vw',//列宽度
-	  		      columnStyle: '', // 列样式
-	  		      fixed: false,//是否固定
-	  		      sort: false, // 是否支持排序
-	  		    }
-	  		  ],
-	  		  tableData:[
-	  		    {
-	  		      name:'张三',
-	  		      age:'18',
-	  		      work:'法外狂徒'
-	  		    },
-	  		    {
-	  		      name:'李四',
-	  		      age:'18',
-	  		      work:'学生'
-	  		    },
-	  		    {
-	  		      name:'王五',
-	  		      age:'22',
-	  		      work:'工程师'
-	  		    }
-	  		  ],
-	  		 `
-  },
-  //生命周期 - 挂载之前",html模板未渲染
-  beforeMount() {
-
-  },
-
-  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
-  mounted() {
-	  
-  },
-
-  //生命周期 - 更新之前",数据模型已更新,html模板未更新
-  beforeUpdate() {
-
-  },
-  //生命周期 - 更新之后",数据模型已更新,html模板已更新
-  updated() {
-
-  },
-  //生命周期 - 销毁之前",
-  beforeDestroy() {
-
-  },
-  destroyed() {
-
-  },
-  //生命周期 - 销毁完成",
-  //如果页面有keep-alive缓存功能，这个函数会触发",
-  activated() {
-
-  },
-}
+    },
+    //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
+    beforeCreate() {},
+    //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
+    created() {
+        this.initData();
+        this.code = `
+            <template>
+                <j-table :tableId="t" ref="t" :title="title" :tableData="tableData" >
+                </j-table>
+            </template>
+            export default {
+                name: "JTableView",
+                data() {
+                    return {
+                        /**
+                         * title中的title字段会作为表头显示
+                         * title中key值代表列名 与 tableData中数据属性对应 
+                         * tableData的属性由title的key集合加children组成 children为下级数据,同样包含title(可空)和data属性
+                         * 可以递归嵌套
+                         */
+                        title:[
+                        {
+                            title:'姓名',//展示列名
+                            key:'name',//字段名
+                            type: '', // 列类型
+                            readOnly:true,//是否只读
+                            width:'35vw',//列宽度
+                            columnStyle: '', // 列样式
+                            fixed: false,//是否固定
+                            sort: false, // 是否支持排序
+                        },
+                        {
+                            title:'年龄',//展示列名
+                            key:'age',//字段名
+                            type: '', // 列类型
+                            readOnly:false,//是否只读
+                            width:'25vw',//列宽度
+                            columnStyle: '', // 列样式
+                            fixed: false,//是否固定
+                            sort: true, // 是否支持排序
+                        },
+                        {
+                            title:'职业',//展示列名
+                            key:'work',//字段名
+                            type: '', // 列类型
+                            readOnly:true,//是否只读
+                            width:'40vw',//列宽度
+                            columnStyle: '', // 列样式
+                            fixed: false,//是否固定
+                            sort: false, // 是否支持排序
+                        }
+                        ],
+                        tableData: [
+                            {
+                                name: "张三",
+                                age: "68",
+                                work: "法外狂徒",
+                                children: {
+                                    title: [
+                                        {
+                                            title: "姓名", //展示列名
+                                            key: "name", //字段名
+                                            type: "", // 列类型
+                                            readOnly: true, //是否只读
+                                            width: "25vw", //列宽度
+                                            columnStyle: "", // 列样式
+                                            fixed: false, //是否固定
+                                            sort: false // 是否支持排序
+                                        },
+                                        {
+                                            title: "年龄", //展示列名
+                                            key: "age", //字段名
+                                            type: "", // 列类型
+                                            readOnly: true, //是否只读
+                                            width: "25vw", //列宽度
+                                            columnStyle: "", // 列样式
+                                            fixed: false, //是否固定
+                                            sort: true // 是否支持排序
+                                        },
+                                        {
+                                            title: "关系", //展示列名
+                                            key: "relation", //字段名
+                                            type: "", // 列类型
+                                            readOnly: true, //是否只读
+                                            width: "50vw", //列宽度
+                                            columnStyle: "", // 列样式
+                                            fixed: false, //是否固定
+                                            sort: false // 是否支持排序
+                                        }
+                                    ],
+                                    data: [
+                                        {
+                                            name: "张小三",
+                                            age: "40",
+                                            relation: "儿子",
+                                            children: {
+                                                data: [
+                                                    {
+                                                        name: "张小四",
+                                                        age: "测试",
+                                                        relation: "测试",
+                                                        test: "测试"
+                                                    }
+                                                ]
+                                            }
+                                        }
+                                    ]
+                                }
+                            },
+                            {
+                                name: "李四",
+                                age: "18",
+                                work: "学生"
+                            },
+                            {
+                                name: "王五",
+                                age: "22",
+                                work: "工程师"
+                            }
+                        ],
+                    }
+                },
+            }
+        `;
+    },
+    //生命周期 - 挂载之前",html模板未渲染
+    beforeMount() {},
+    //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
+    mounted() {},
+    //生命周期 - 更新之前",数据模型已更新,html模板未更新
+    beforeUpdate() {},
+    //生命周期 - 更新之后",数据模型已更新,html模板已更新
+    updated() {},
+    //生命周期 - 销毁之前",
+    beforeDestroy() {},
+    //生命周期 - 销毁完成",
+    destroyed() {},
+    //如果页面有keep-alive缓存功能，这个函数会触发",
+    activated() {}
+};
 </script>
 
 <style lang="scss" scoped>
-	.title{
-		font-size: x-large;
-		text-align: left;
-		margin-bottom: 1rem;
-		.detail{
-			font-size: medium;
-			color: dimgrey;
-			margin-top: 1rem;
-		}
-	}
-	.header{
-		min-height: 4rem;
-		text-align: center;
-	}
-	.footer{
-		margin-top: 2rem;
-		margin-left: 2%;
-		width:95%;
-	}
+.title {
+    font-size: x-large;
+    text-align: left;
+    margin-bottom: 1rem;
+    .detail {
+        font-size: medium;
+        color: dimgrey;
+        margin-top: 1rem;
+    }
+}
+.header {
+    min-height: 4rem;
+    text-align: center;
+}
+.footer {
+    margin-top: 2rem;
+    margin-left: 2%;
+    width: 95%;
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/calendar.vue b/JYeontuComponentWarehouse/examples/views/calendar.vue
index 0af310de2629e6e150e5bd1e7d2056fdce38f8c8..a950f4e93d5928a048a84258d7790b1f5366da8b 100644
--- a/JYeontuComponentWarehouse/examples/views/calendar.vue
+++ b/JYeontuComponentWarehouse/examples/views/calendar.vue
@@ -1,125 +1,121 @@
 <template>
-	<split-horizontal>
-		<template v-slot:header-p>
-			<div class="title">
-				日历组件（JCalendar）
-				<div class="detail">
-					日历组件
-				</div>
-			</div>
-		</template>
-		<template v-slot:left-p>
-		  <div class="content">
-			<j-calendar
-				:title="title"
-				:bgSrc="bgSrc"
-				@selectDay="selectDay"
-				@changeMonth="changeMonth"
-			>
-			</j-calendar>
-		  </div>
-		</template>
-		<template v-slot:right-p>
-			<j-table :title="tableTitle"
-					 :tableData="tableData">
-			</j-table>
-		</template>
-		<template v-slot:footer-p>
-			<j-code-height-light :code="code"
-								class="footer">
-				
-			</j-code-height-light>
-		</template>
-	</split-horizontal>
+    <split-horizontal>
+        <template v-slot:header-p>
+            <div class="title">
+                日历组件（JCalendar）
+                <div class="detail">
+                    日历组件
+                </div>
+            </div>
+        </template>
+        <template v-slot:left-p>
+            <div class="content">
+                <j-calendar
+                    :title="title"
+                    :bgSrc="bgSrc"
+                    @selectDay="selectDay"
+                    @changeMonth="changeMonth"
+                >
+                </j-calendar>
+            </div>
+        </template>
+        <template v-slot:right-p>
+            <j-table :title="tableTitle" :tableData="tableData"> </j-table>
+        </template>
+        <template v-slot:footer-p>
+            <j-code-height-light :code="code" class="footer">
+            </j-code-height-light>
+        </template>
+    </split-horizontal>
 </template>
 <script>
-import splitHorizontal from '@/components/pages/splitHorizontal.vue'
+import splitHorizontal from "@/components/pages/splitHorizontal.vue";
 export default {
-  name:'calendar',
-  components:{
-	splitHorizontal,
-  },
-  data(){
-    return {
-      title:"JYeontu的日历",
-      bgSrc:"https://images8.alphacoders.com/992/992329.jpg",
-	  code:'',
-	  tableTitle:[
-	   {
-	     title:'参数',//展示列名
-	     key:'parameter',//字段名
-	     type: '', // 列类型
-	     readOnly:true,//是否只读
-	     width:'20vw',//列宽度
-	     columnStyle: '', // 列样式
-	     fixed: false,//是否固定
-	     sort: false, // 是否支持排序
-	   },
-	   {
-	     title:'字段名',//展示列名
-	     key:'field',//字段名
-	     type: '', // 列类型
-	     readOnly:true,//是否只读
-	     width:'30vw',//列宽度
-	     columnStyle: '', // 列样式
-	     fixed: false,//是否固定
-	     sort: false, // 是否支持排序
-	   },
-	   {
-	     title:'数据类型',//展示列名
-	     key:'type',//字段名
-	     type: '', // 列类型
-	     readOnly:true,//是否只读
-	     width:'15vw',//列宽度
-	     columnStyle: '', // 列样式
-	     fixed: false,//是否固定
-	     sort: false, // 是否支持排序
-	   },
-	   {
-	     title:'描述',//展示列名
-	     key:'describe',//字段名
-	     type: '', // 列类型
-	     readOnly:true,//是否只读
-	     width:'35vw',//列宽度
-	     columnStyle: '', // 列样式
-	     fixed: false,//是否固定
-	     sort: false, // 是否支持排序
-	   }
-	   ],
-	  tableData:[
-	    {
-	      'parameter':'title',
-	      'field':'标题',
-	      'type':'String',
-	      'describe':'日历上方显示标题'
-	    },
-	    {
-	      'parameter':'bgSrc',
-	      'field':'背景图',
-	      'type':'String/require请求图片',
-	      'describe':'在线链接/require请求本地图片'
-	    },
-	    {
-	      'parameter':'selectDay',
-	      'field':'选择日期',
-	      'type':'function',
-	      'describe':'点击日期时回调'
-	    },
-	    {
-	      'parameter':'changeMonth',
-	      'field':'月份修改',
-	      'type':'function',
-	      'describe':'月份修改时回调'
-	    }
-	  ],
-    }
-  },
-  created() {
-  	this.code = `
+    name: "calendar",
+    components: {
+        splitHorizontal
+    },
+    data() {
+        return {
+            title: "JYeontu的日历",
+            bgSrc: "https://images8.alphacoders.com/992/992329.jpg",
+            code: "",
+            tableTitle: [
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "字段名", //展示列名
+                    key: "field", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "30vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "数据类型", //展示列名
+                    key: "type", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "15vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "描述", //展示列名
+                    key: "describe", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "35vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData: [
+                {
+                    parameter: "title",
+                    field: "标题",
+                    type: "String",
+                    describe: "日历上方显示标题"
+                },
+                {
+                    parameter: "bgSrc",
+                    field: "背景图",
+                    type: "String/require请求图片",
+                    describe: "在线链接/require请求本地图片"
+                },
+                {
+                    parameter: "selectDay",
+                    field: "选择日期",
+                    type: "function",
+                    describe: "点击日期时回调"
+                },
+                {
+                    parameter: "changeMonth",
+                    field: "月份修改",
+                    type: "function",
+                    describe: "月份修改时回调"
+                }
+            ]
+        };
+    },
+    created() {
+        this.code = `
 		<j-calendar :title="title" 
-			:bgSrc="bgSrc" 
-			@selectDay="selectDay" 
-			@changeMonth="changeMonth">
+					:bgSrc="bgSrc" 
+					@selectDay="selectDay" 
+					@changeMonth="changeMonth">
 		</j-calendar>
 		
 		data(){
@@ -136,40 +132,40 @@ export default {
 			// console.log(e);
 		  }
 		}
-	`
-  },
-  methods:{
-    selectDay(e){
-      // console.log(e);
+	`;
     },
-    changeMonth(e){
-      // console.log(e);
+    methods: {
+        selectDay(e) {
+            // console.log(e);
+        },
+        changeMonth(e) {
+            // console.log(e);
+        }
     }
-  }
-}
+};
 </script>
 <style scoped lang="scss">
-	.title{
-		font-size: x-large;
-		text-align: left;
-		margin-bottom: 1rem;
-		.detail{
-			font-size: medium;
-			color: dimgrey;
-			margin-top: 1rem;
-		}
-	}
-  .content{
-    margin:auto auto;
+.title {
+    font-size: x-large;
+    text-align: left;
+    margin-bottom: 1rem;
+    .detail {
+        font-size: medium;
+        color: dimgrey;
+        margin-top: 1rem;
+    }
+}
+.content {
+    margin: auto auto;
     // width: 50%;
-  }
-  .header{
-  	min-height: 4rem;
-  	text-align: center;
-  }
-  .footer{
-  	margin-top: 2rem;
-  	margin-left: 2%;
-  	width:95%;
-  }
+}
+.header {
+    min-height: 4rem;
+    text-align: center;
+}
+.footer {
+    margin-top: 2rem;
+    margin-left: 2%;
+    width: 95%;
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/canvasBroadView.vue b/JYeontuComponentWarehouse/examples/views/canvasBroadView.vue
index 55b659f835a17a6c8770a73432a83927919e77bf..1c85f55b963d6f7a15c0488221305c2c9de90c73 100644
--- a/JYeontuComponentWarehouse/examples/views/canvasBroadView.vue
+++ b/JYeontuComponentWarehouse/examples/views/canvasBroadView.vue
@@ -1,140 +1,138 @@
 <template>
-	<split-horizontal>
-		<template v-slot:header-p>
-			<div class="title">
-				canvas画板组件（JCanvasBroad）
-				<div class="detail">
-					canvas画板组件
-				</div>
-			</div>
-		</template>
-		<template v-slot:left-p>
-			<div class="broad-title">
-				我的画板
-			</div>
-			<div class="broad-contain">
-				<j-canvas-broad class="canvas-baroad"
-							:toolsTabList="true"
-							:height="height"
-							:width="width">
-				</j-canvas-broad>
-			</div>
-		</template>
-		<template v-slot:right-p>
-			<j-table :title="title1"
-					 :tableData="tableData1">
-			</j-table>
-		</template>
-		<template v-slot:footer-p>
-			<j-code-height-light :code="code"
-								class="footer">
-				
-			</j-code-height-light>
-		</template>
-	</split-horizontal>
+    <split-horizontal>
+        <template v-slot:header-p>
+            <div class="title">
+                canvas画板组件（JCanvasBroad）
+                <div class="detail">
+                    canvas画板组件
+                </div>
+            </div>
+        </template>
+        <template v-slot:left-p>
+            <div class="broad-title">
+                我的画板
+            </div>
+            <div class="broad-contain">
+                <j-canvas-broad
+                    class="canvas-baroad"
+                    :toolsTabList="true"
+                    :height="height"
+                    :width="width"
+                >
+                </j-canvas-broad>
+            </div>
+        </template>
+        <template v-slot:right-p>
+            <j-table :title="title1" :tableData="tableData1"> </j-table>
+        </template>
+        <template v-slot:footer-p>
+            <j-code-height-light :code="code" class="footer">
+            </j-code-height-light>
+        </template>
+    </split-horizontal>
 </template>
 
 <script>
-	import splitHorizontal from '@/components/pages/splitHorizontal.vue'
-	export default{
-		name:'canvasBroadView',
-		components:{
-			splitHorizontal,
-		},
-		data() {
-			return{
-				width:-1,
-				height:-1, 
-				title1:[
-					{
-					  title:'参数',//展示列名
-					  key:'parameter',//字段名
-					  type: '', // 列类型
-					  readOnly:true,//是否只读
-					  width:'20vw',//列宽度
-					  columnStyle: '', // 列样式
-					  fixed: false,//是否固定
-					  sort: false, // 是否支持排序
-					},
-					{
-					  title:'字段名',//展示列名
-					  key:'field',//字段名
-					  type: '', // 列类型
-					  readOnly:true,//是否只读
-					  width:'30vw',//列宽度
-					  columnStyle: '', // 列样式
-					  fixed: false,//是否固定
-					  sort: false, // 是否支持排序
-					},
-					{
-					  title:'数据类型',//展示列名
-					  key:'type',//字段名
-					  type: '', // 列类型
-					  readOnly:true,//是否只读
-					  width:'15vw',//列宽度
-					  columnStyle: '', // 列样式
-					  fixed: false,//是否固定
-					  sort: false, // 是否支持排序
-					},
-					{
-					  title:'描述',//展示列名
-					  key:'describe',//字段名
-					  type: '', // 列类型
-					  readOnly:true,//是否只读
-					  width:'35vw',//列宽度
-					  columnStyle: '', // 列样式
-					  fixed: false,//是否固定
-					  sort: false, // 是否支持排序
-					}
-				  ],
-				tableData1:[
-					  {
-						'parameter':'height',
-						'field':'画板高度',
-						'type':'Number',
-						'describe':'默认为父元素高度*0.7'
-					  },
-					  {
-						'parameter':'width',
-						'field':'画板宽度',
-						'type':'Number',
-						'describe':'默认为父元素宽度*0.9'
-					  },
-					  {
-						'parameter':'defaultPenColor',
-						'field':'默认画笔颜色',
-						'type':'String',
-						'describe':'默认为#000000'
-					  },
-					  {
-						'parameter':'defaultPenSize',
-						'field':'默认画笔尺寸',
-						'type':'Number',
-						'describe':'默认为4px'
-					  },
-					  {
-						'parameter':'defaultBackGroundColor',
-						'field':'默认背景颜色',
-						'type':'String',
-						'describe':'默认为#ffffff'
-					  },
-					  {
-						'parameter':'toolsTabList',
-						'field':'工具栏tabbar显示',
-						'type':'Boolean',
-						'describe':'默认为false'
-					  }
-					],
-				  chatData:{},
-				  code:''
-			}
-		},
-		created() {
-			this.code = `
+import splitHorizontal from "@/components/pages/splitHorizontal.vue";
+export default {
+    name: "canvasBroadView",
+    components: {
+        splitHorizontal
+    },
+    data() {
+        return {
+            width: -1,
+            height: -1,
+            title1: [
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "字段名", //展示列名
+                    key: "field", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "30vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "数据类型", //展示列名
+                    key: "type", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "15vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "描述", //展示列名
+                    key: "describe", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "35vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData1: [
+                {
+                    parameter: "height",
+                    field: "画板高度",
+                    type: "Number",
+                    describe: "默认为父元素高度*0.7"
+                },
+                {
+                    parameter: "width",
+                    field: "画板宽度",
+                    type: "Number",
+                    describe: "默认为父元素宽度*0.9"
+                },
+                {
+                    parameter: "defaultPenColor",
+                    field: "默认画笔颜色",
+                    type: "String",
+                    describe: "默认为#000000"
+                },
+                {
+                    parameter: "defaultPenSize",
+                    field: "默认画笔尺寸",
+                    type: "Number",
+                    describe: "默认为4px"
+                },
+                {
+                    parameter: "defaultBackGroundColor",
+                    field: "默认背景颜色",
+                    type: "String",
+                    describe: "默认为#ffffff"
+                },
+                {
+                    parameter: "toolsTabList",
+                    field: "工具栏tabbar显示",
+                    type: "Boolean",
+                    describe: "默认为false"
+                }
+            ],
+            chatData: {},
+            code: ""
+        };
+    },
+    created() {
+        this.code = `
 			<j-canvas-broad class="canvas-baroad" 
-					:toolsTabList="true" 
-					:height="height" 
-					:width="width">
+						:toolsTabList="true" 
+						:height="height" 
+						:width="width">
 			</j-canvas-broad>
 			
 			data(){
@@ -143,41 +141,39 @@
 					height:-1,
 				}
 			}
-			`
-		},
-		methods:{
-			
-		}
-	}
+			`;
+    },
+    methods: {}
+};
 </script>
 
 <style lang="scss" scoped="scoped">
-	.broad-title{
-		line-height: 3rem;
-	}
-	.broad-contain{
-		.canvas-baroad{
-			// height: 300px;
-			// width: 600px;
-		}
-	}
-	.title{
-		font-size: x-large;
-		text-align: left;
-		margin-bottom: 1rem;
-		.detail{
-			font-size: medium;
-			color: dimgrey;
-			margin-top: 1rem;
-		}
-	}
-	.header{
-		min-height: 4rem;
-		text-align: center;
-	}
-	.footer{
-		margin-top: 2rem;
-		margin-left: 2%;
-		width:95%;
-	}
+.broad-title {
+    line-height: 3rem;
+}
+.broad-contain {
+    .canvas-baroad {
+        // height: 300px;
+        // width: 600px;
+    }
+}
+.title {
+    font-size: x-large;
+    text-align: left;
+    margin-bottom: 1rem;
+    .detail {
+        font-size: medium;
+        color: dimgrey;
+        margin-top: 1rem;
+    }
+}
+.header {
+    min-height: 4rem;
+    text-align: center;
+}
+.footer {
+    margin-top: 2rem;
+    margin-left: 2%;
+    width: 95%;
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/codeHeightLightView.vue b/JYeontuComponentWarehouse/examples/views/codeHeightLightView.vue
index acce47d780baec0fdd359d3062068a9cf9bd4c96..0fa616c3a2947412b088777ba684816c48d7bff1 100644
--- a/JYeontuComponentWarehouse/examples/views/codeHeightLightView.vue
+++ b/JYeontuComponentWarehouse/examples/views/codeHeightLightView.vue
@@ -1,120 +1,124 @@
 <template>
-	<split-horizontal>
-		<template v-slot:header-p>
-			<div class="title">
-				代码高亮组件（JCodeHeightLight）
-				<div class="detail">
-					自定义代码关键字高亮组件
-				</div>
-			</div>
-		</template>
-		<template v-slot:mid-p>
-			<j-table :title="title1"
-					 :tableData="tableData1"
-					  class="middle">
-			</j-table>
-		</template>
-		<template v-slot:footer-p>
-			<j-code-height-light :code="code"
-								class="footer">
-			</j-code-height-light>
-		</template>
-	</split-horizontal>
+    <split-horizontal>
+        <template v-slot:header-p>
+            <div class="title">
+                代码高亮组件（JCodeHeightLight）
+                <div class="detail">
+                    自定义代码关键字高亮组件
+                </div>
+            </div>
+        </template>
+        <template v-slot:mid-p>
+            <j-table :title="title1" :tableData="tableData1" class="middle">
+            </j-table>
+        </template>
+        <template v-slot:footer-p>
+            <j-code-height-light :code="code" class="footer">
+            </j-code-height-light>
+        </template>
+    </split-horizontal>
 </template>
 
 <script>
-import splitHorizontal from '@/components/pages/splitHorizontal.vue'
+import splitHorizontal from "@/components/pages/splitHorizontal.vue";
 export default {
-  name: "codeHeightLightView",
-  //import引入的组件需要注入到对象中才能使用",
-  components: {
-	splitHorizontal,
-  },
-  data() {
-    //这里存放数据",
-    return {
-	  title1:[
-	    {
-	      title:'参数',//展示列名
-	      key:'parameter',//字段名
-	      type: '', // 列类型
-	      readOnly:true,//是否只读
-	      width:'20vw',//列宽度
-	      columnStyle: '', // 列样式
-	      fixed: false,//是否固定
-	      sort: false, // 是否支持排序
-	    },
-	    {
-	      title:'字段名',//展示列名
-	      key:'field',//字段名
-	      type: '', // 列类型
-	      readOnly:true,//是否只读
-	      width:'30vw',//列宽度
-	      columnStyle: '', // 列样式
-	      fixed: false,//是否固定
-	      sort: false, // 是否支持排序
-	    },
-	    {
-	      title:'数据类型',//展示列名
-	      key:'type',//字段名
-	      type: '', // 列类型
-	      readOnly:true,//是否只读
-	      width:'15vw',//列宽度
-	      columnStyle: '', // 列样式
-	      fixed: false,//是否固定
-	      sort: false, // 是否支持排序
-	    },
-	    {
-	      title:'描述',//展示列名
-	      key:'describe',//字段名
-	      type: '', // 列类型
-	      readOnly:true,//是否只读
-	      width:'35vw',//列宽度
-	      columnStyle: '', // 列样式
-	      fixed: false,//是否固定
-	      sort: false, // 是否支持排序
-	    }
-	  ],
-        tableData1:[
-          {
-            'parameter':'code',
-            'field':'代码串',
-            'type':'String',
-            'describe':'需要展示的代码串，可以使用模板字符串定义传入'
-          },
-          {
-            'parameter':'color',
-            'field':'关键字颜色配置',
-            'type':'Object',
-            'describe':'详细参数如下'
-          },
-          {
-            'parameter':'keyWords',
-            'field':'自定义高亮关键字',
-            'type':'Array',
-            'describe':"如：keyWords:[{value:'numsFormat',color:'green'}]"
-          }
-        ],
-	  code:''
-    };
-  },
-  //监听属性 类似于data概念",
-  computed: {},
-  //监控data中的数据变化",
-  watch: {},
-  //方法集合",
-  methods: {},
-  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
-  beforeCreate() {
-  },
+    name: "codeHeightLightView",
+    //import引入的组件需要注入到对象中才能使用",
+    components: {
+        splitHorizontal
+    },
+    data() {
+        //这里存放数据",
+        return {
+            title1: [
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "字段名", //展示列名
+                    key: "field", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "30vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "数据类型", //展示列名
+                    key: "type", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "15vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "描述", //展示列名
+                    key: "describe", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "35vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData1: [
+                {
+                    parameter: "code",
+                    field: "代码串",
+                    type: "String",
+                    describe: "需要展示的代码串，可以使用模板字符串定义传入"
+                },
+                {
+                    parameter: "color",
+                    field: "关键字颜色配置",
+                    type: "Object",
+                    describe: "详细参数如下"
+                },
+                {
+                    parameter: "keyWords",
+                    field: "自定义高亮关键字",
+                    type: "Array",
+                    describe:
+                        "如：keyWords:[{value:'numsFormat',color:'green'}]"
+                }
+            ],
+            code: ""
+        };
+    },
+    //监听属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {},
+    //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
+    beforeCreate() {},
 
-  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
-  created() {
-	  this.code = `
+    //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
+    created() {
+        this.code = `
 		<j-code-height-light :code = "code" 
 				:keyWords = "keyWords" 
 				:color = "color">
 		</j-code-height-light>
+		<!-- 注释 -->
+		<div class = 'body'>
+			<div class = 'title'>标题</div>
+			<div class = 'main'>
+				<span>内容</span>
+			</div>
+		</div>
 		
 		/**
 		 * 组件参数配置如下
@@ -152,63 +156,57 @@ export default {
 				}
 			}
 		},
-		 `
-  },
-  //生命周期 - 挂载之前",html模板未渲染
-  beforeMount() {
-
-  },
-
-  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
-  mounted() {
-	  
-  },
-
-  //生命周期 - 更新之前",数据模型已更新,html模板未更新
-  beforeUpdate() {
-
-  },
-  //生命周期 - 更新之后",数据模型已更新,html模板已更新
-  updated() {
-
-  },
-  //生命周期 - 销毁之前",
-  beforeDestroy() {
-
-  },
-  destroyed() {
+		methods:{
+			test(){
+				console.log('test');
+			},
+			testP(p1,p2){
+				console.log(p1,p2);
+			}
+		}
+		 `;
+    },
+    //生命周期 - 挂载之前",html模板未渲染
+    beforeMount() {},
 
-  },
-  //生命周期 - 销毁完成",
-  //如果页面有keep-alive缓存功能，这个函数会触发",
-  activated() {
+    //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
+    mounted() {},
 
-  },
-}
+    //生命周期 - 更新之前",数据模型已更新,html模板未更新
+    beforeUpdate() {},
+    //生命周期 - 更新之后",数据模型已更新,html模板已更新
+    updated() {},
+    //生命周期 - 销毁之前",
+    beforeDestroy() {},
+    destroyed() {},
+    //生命周期 - 销毁完成",
+    //如果页面有keep-alive缓存功能，这个函数会触发",
+    activated() {}
+};
 </script>
 
 <style lang="scss" scoped>
-	.title{
-		font-size: x-large;
-		text-align: left;
-		margin-bottom: 1rem;
-		.detail{
-			font-size: medium;
-			color: dimgrey;
-			margin-top: 1rem;
-		}
-	}
-	.header{
-		min-height: 4rem;
-		text-align: center;
-	}
-	.middle{
-		width: 80%;
-		margin: auto auto;
-	}
-	.footer{
-		margin-top: 2rem;
-		margin-left: 2%;
-		width:95%;
-	}
+.title {
+    font-size: x-large;
+    text-align: left;
+    margin-bottom: 1rem;
+    .detail {
+        font-size: medium;
+        color: dimgrey;
+        margin-top: 1rem;
+    }
+}
+.header {
+    min-height: 4rem;
+    text-align: center;
+}
+.middle {
+    width: 80%;
+    margin: auto auto;
+}
+.footer {
+    margin-top: 2rem;
+    margin-left: 2%;
+    width: 95%;
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/electronicNumber.vue b/JYeontuComponentWarehouse/examples/views/electronicNumber.vue
index f08476d25d71f46b2f318b70134cdabe92308d8d..3a2a8dc5d4fec89b6b72903b3ad1c7d8acfd20a5 100644
--- a/JYeontuComponentWarehouse/examples/views/electronicNumber.vue
+++ b/JYeontuComponentWarehouse/examples/views/electronicNumber.vue
@@ -1,120 +1,116 @@
 <template>
-	<split-horizontal>
-		<template v-slot:header-p>
-			<div class="title">
-				电子屏数字（JElectronicNumber）
-				<div class="detail">
-					电子屏风格数字组件
-				</div>
-			</div>
-			<div class="header"></div>
-		</template>
-		<template v-slot:left-p>
-			<div class="content">
-			  <j-electronic-number
-			      :numbers="numbers"
-			      :number-color="numberColor"
-			      :number-size="numberSize"
-			  >
-			  </j-electronic-number>
-			</div>
-		</template>
-		<template v-slot:right-p>
-			<j-table :title="title"
-					 :tableData="tableData">
-			</j-table>
-		</template>
-		<template v-slot:footer-p>
-			<j-code-height-light :code="code"
-								class="footer">
-
-			</j-code-height-light>
-		</template>
-	</split-horizontal>
+    <split-horizontal>
+        <template v-slot:header-p>
+            <div class="title">
+                电子屏数字（JElectronicNumber）
+                <div class="detail">
+                    电子屏风格数字组件
+                </div>
+            </div>
+            <div class="header"></div>
+        </template>
+        <template v-slot:left-p>
+            <div class="content">
+                <j-electronic-number
+                    :numbers="numbers"
+                    :number-color="numberColor"
+                    :number-size="numberSize"
+                >
+                </j-electronic-number>
+            </div>
+        </template>
+        <template v-slot:right-p>
+            <j-table :title="title" :tableData="tableData"> </j-table>
+        </template>
+        <template v-slot:footer-p>
+            <j-code-height-light :code="code" class="footer">
+            </j-code-height-light>
+        </template>
+    </split-horizontal>
 </template>
 <script>
-import splitHorizontal from '@/components/pages/splitHorizontal.vue'
-import { getToday } from '@/utils/dateTool'
+import splitHorizontal from "@/components/pages/splitHorizontal.vue";
+import { getToday } from "@/utils/dateTool";
 export default {
-  name:'electronicNumbers',
-  components:{
-	splitHorizontal
-  },
-  data(){
-    return {
-      numbers:[],
-      numberColor:'#8076a3',
-      numberSize:'2rem',
-	  code:'',
-	  title:[
-	   {
-	     title:'参数',//展示列名
-	     key:'parameter',//字段名
-	     type: '', // 列类型
-	     readOnly:true,//是否只读
-	     width:'20vw',//列宽度
-	     columnStyle: '', // 列样式
-	     fixed: false,//是否固定
-	     sort: false, // 是否支持排序
-	   },
-	   {
-	     title:'字段名',//展示列名
-	     key:'field',//字段名
-	     type: '', // 列类型
-	     readOnly:true,//是否只读
-	     width:'30vw',//列宽度
-	     columnStyle: '', // 列样式
-	     fixed: false,//是否固定
-	     sort: false, // 是否支持排序
-	   },
-	   {
-	     title:'数据类型',//展示列名
-	     key:'type',//字段名
-	     type: '', // 列类型
-	     readOnly:true,//是否只读
-	     width:'15vw',//列宽度
-	     columnStyle: '', // 列样式
-	     fixed: false,//是否固定
-	     sort: false, // 是否支持排序
-	   },
-	   {
-	     title:'描述',//展示列名
-	     key:'describe',//字段名
-	     type: '', // 列类型
-	     readOnly:true,//是否只读
-	     width:'35vw',//列宽度
-	     columnStyle: '', // 列样式
-	     fixed: false,//是否固定
-	     sort: false, // 是否支持排序
-	   }
-	   ],
-	  tableData:[
-	    {
-	      'parameter':'numbers',
-	      'field':'数字数组',
-	      'type':'Array',
-	      'describe':'需要展示的数字，如:["2021-11-11 10:57:52"]'
-	    },
-	    {
-	      'parameter':'numberColor',
-	      'field':'数字颜色',
-	      'type':'String',
-	      'describe':'如："#000000" 或 "pink"'
-	    },
-	    {
-	      'parameter':'numberSize',
-	      'field':'数字大小',
-	      'type':'String',
-	      'describe':'如："1rem"'
-	    }
-	  ],
-    }
-  },
-  created() {
-  	this.code = `
+    name: "electronicNumbers",
+    components: {
+        splitHorizontal
+    },
+    data() {
+        return {
+            numbers: [],
+            numberColor: "#8076a3",
+            numberSize: "2rem",
+            code: "",
+            title: [
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "字段名", //展示列名
+                    key: "field", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "30vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "数据类型", //展示列名
+                    key: "type", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "15vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "描述", //展示列名
+                    key: "describe", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "35vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData: [
+                {
+                    parameter: "numbers",
+                    field: "数字数组",
+                    type: "Array",
+                    describe: '需要展示的数字，如:["2021-11-11 10:57:52"]'
+                },
+                {
+                    parameter: "numberColor",
+                    field: "数字颜色",
+                    type: "String",
+                    describe: '如："#000000" 或 "pink"'
+                },
+                {
+                    parameter: "numberSize",
+                    field: "数字大小",
+                    type: "String",
+                    describe: '如："1rem"'
+                }
+            ]
+        };
+    },
+    created() {
+        this.code = `
             <j-electronic-number :numbers="numbers" 
-			:number-color="numberColor" 
-			:number-size="numberSize" >
+								:number-color="numberColor" 
+								:number-size="numberSize" >
             </j-electronic-number>
 
             numbers:[],
@@ -133,44 +129,44 @@ export default {
                 },1000);
               }
             }
-	`
-  },
-  mounted(){
-    this.getTime();
-  },
-  methods:{
-    getTime(){
-      let day = getToday('yyyy-mm-dd hh:MM:ss');
-      this.numbers = [day];
-      setTimeout(()=>{
+	`;
+    },
+    mounted() {
         this.getTime();
-      },1000);
+    },
+    methods: {
+        getTime() {
+            let day = getToday("yyyy-mm-dd hh:MM:ss");
+            this.numbers = [day];
+            setTimeout(() => {
+                this.getTime();
+            }, 1000);
+        }
     }
-  }
-}
+};
 </script>
 <style scoped lang="scss">
-	.title{
-		font-size: x-large;
-		text-align: left;
-		margin-bottom: 1rem;
-		.detail{
-			font-size: medium;
-			color: dimgrey;
-			margin-top: 1rem;
-		}
-	}
-  .content{
-    margin:auto auto;
+.title {
+    font-size: x-large;
+    text-align: left;
+    margin-bottom: 1rem;
+    .detail {
+        font-size: medium;
+        color: dimgrey;
+        margin-top: 1rem;
+    }
+}
+.content {
+    margin: auto auto;
     width: 50%;
-  }
-  .header{
-  	min-height: 4rem;
-  	text-align: center;
-  }
-  .footer{
-  	margin-top: 2rem;
-  	margin-left: 2%;
-  	width:95%;
-  }
+}
+.header {
+    min-height: 4rem;
+    text-align: center;
+}
+.footer {
+    margin-top: 2rem;
+    margin-left: 2%;
+    width: 95%;
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/flowChartView.vue b/JYeontuComponentWarehouse/examples/views/flowChartView.vue
index ba5299f8386f56416d448e144e9b75ef7074c910..7ff0f9b4d7c25c4a200502bdfb6d134c571ed295 100644
--- a/JYeontuComponentWarehouse/examples/views/flowChartView.vue
+++ b/JYeontuComponentWarehouse/examples/views/flowChartView.vue
@@ -1,183 +1,178 @@
 <template>
-	<div>
-		<div class="title">
-			流程图组件（JFlowchart）
-			<div class="detail">
-				可拖拽流程图组件
-			</div>
-		</div>
-		<div class="view-body">
-			<div class="flowchart-body">
-				<!-- <flowchart :chartData = "chartData"></flowchart> -->
-				<j-flow-chart :chartData = "chartData"></j-flow-chart>
-			</div>
-			<div class="table-body">
-				<div>流程图chartData配置表</div>
-				<j-table :title="title"
-						 :tableData="tableData">
-				</j-table>
-				<div style="margin-top: 2rem;">流程项data配置表</div>
-				<j-table :title="title"
-						 :tableData="tableData1">
-				</j-table>
-			</div>
-		</div>
-		<j-code-height-light :code="code"></j-code-height-light>
-	</div>
+    <div>
+        <div class="title">
+            流程图组件（JFlowchart）
+            <div class="detail">
+                可拖拽流程图组件
+            </div>
+        </div>
+        <div class="view-body">
+            <div class="flowchart-body">
+                <!-- <flowchart :chartData = "chartData"></flowchart> -->
+                <j-flow-chart :chartData="chartData"></j-flow-chart>
+            </div>
+            <div class="table-body">
+                <div>流程图chartData配置表</div>
+                <j-table :title="title" :tableData="tableData"> </j-table>
+                <div style="margin-top: 2rem;">流程项data配置表</div>
+                <j-table :title="title" :tableData="tableData1"> </j-table>
+            </div>
+        </div>
+        <j-code-height-light :code="code"></j-code-height-light>
+    </div>
 </template>
 
 <script>
-	export default {
-		name:'flowChartView',
-		components:{
-		},
-		data(){
-			return {
-				chartData:{
-					title:'可拖拽流程图',
-					dragAble:true,
-					width:50,
-					radius:true,
-					data:[
-						{
-							icon:require('@/assets/logo.png'),
-							text:'准备'
-						},
-						{
-							icon:require('@/assets/1.png'),
-							text:'开始'
-						},
-						{
-							icon:require('@/assets/test.jpg'),
-							text:'开发'
-						},
-						{
-							icon:require('@/assets/1.png'),
-							text:'测试'
-						},
-						{
-							icon:require('@/assets/logo.png'),
-							text:'完成'
-						},
-						{
-							icon:require('@/assets/1.png'),
-							text:'开始'
-						},
-						{
-							icon:require('@/assets/test.jpg'),
-							text:'开发'
-						},
-						{
-							icon:require('@/assets/1.png'),
-							text:'测试'
-						},
-						{
-							icon:'',
-							text:'完成'
-						}
-					]
-				},
-        title:[
-          {
-            title:'参数',//展示列名
-            key:'parameter',//字段名
-            type: '', // 列类型
-            readOnly:true,//是否只读
-            width:'20vw',//列宽度
-            columnStyle: '', // 列样式
-            fixed: false,//是否固定
-            sort: false, // 是否支持排序
-          },
-          {
-            title:'字段名',//展示列名
-            key:'field',//字段名
-            type: '', // 列类型
-            readOnly:true,//是否只读
-            width:'30vw',//列宽度
-            columnStyle: '', // 列样式
-            fixed: false,//是否固定
-            sort: false, // 是否支持排序
-          },
-          {
-            title:'数据类型',//展示列名
-            key:'type',//字段名
-            type: '', // 列类型
-            readOnly:true,//是否只读
-            width:'15vw',//列宽度
-            columnStyle: '', // 列样式
-            fixed: false,//是否固定
-            sort: false, // 是否支持排序
-          },
-          {
-            title:'描述',//展示列名
-            key:'describe',//字段名
-            type: '', // 列类型
-            readOnly:true,//是否只读
-            width:'35vw',//列宽度
-            columnStyle: '', // 列样式
-            fixed: false,//是否固定
-            sort: false, // 是否支持排序
-          }
-        ],
-        tableData:[
-          {
-            'parameter':'title',
-            'field':'标题',
-            'type':'String',
-            'describe':'顶部显示标题'
-          },
-          {
-            'parameter':'dragAble',
-            'field':'拖拽',
-            'type':'Boolean',
-            'describe':'是否可拖拽，默认为false'
-          },
-          {
-            'parameter':'width',
-            'field':'宽度',
-            'type':'Number',
-            'describe':'每个流程的宽度'
-          },
-          {
-            'parameter':'data',
-            'field':'流程数据',
-            'type':'Array',
-            'describe':'定义流程配置信息，具体如下表'
-          },
-          {
-            'parameter':'radius',
-            'field':'圆角',
-            'type':'Boolean',
-            'describe':'流程icon是否为圆角'
-          }
-        ],
-        tableData1:[
-          {
-            'parameter':'icon',
-            'field':'图标',
-            'type':'require图片数据',
-            'describe':'注意要使用require，组件才可以接收到图片'
-          },
-          {
-            'parameter':'text',
-            'field':'显示文字',
-            'type':'String',
-            'describe':'icon下方显示的文字'
-          }
-        ],
-        code:'',
-        cmOptions: {
-          mode: "text/javascript",
-          theme: "base16-dark",
-        },
-			}
-		},
-	  created() {
-		  // let chartData = this.chartData;
-      let data = this.chartData.data;
-      this.chartData.data = this.chartData.data.concat([...data]);
-      this.chartData.data = this.chartData.data.concat([...data]);
-      this.code = `
+export default {
+    name: "flowChartView",
+    components: {},
+    data() {
+        return {
+            chartData: {
+                title: "可拖拽流程图",
+                dragAble: true,
+                width: 50,
+                radius: true,
+                data: [
+                    {
+                        icon: require("@/assets/logo.png"),
+                        text: "准备"
+                    },
+                    {
+                        icon: require("@/assets/1.png"),
+                        text: "开始"
+                    },
+                    {
+                        icon: require("@/assets/test.jpg"),
+                        text: "开发"
+                    },
+                    {
+                        icon: require("@/assets/1.png"),
+                        text: "测试"
+                    },
+                    {
+                        icon: require("@/assets/logo.png"),
+                        text: "完成"
+                    },
+                    {
+                        icon: require("@/assets/1.png"),
+                        text: "开始"
+                    },
+                    {
+                        icon: require("@/assets/test.jpg"),
+                        text: "开发"
+                    },
+                    {
+                        icon: require("@/assets/1.png"),
+                        text: "测试"
+                    },
+                    {
+                        icon: "",
+                        text: "完成"
+                    }
+                ]
+            },
+            title: [
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "字段名", //展示列名
+                    key: "field", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "30vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "数据类型", //展示列名
+                    key: "type", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "15vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "描述", //展示列名
+                    key: "describe", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "35vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData: [
+                {
+                    parameter: "title",
+                    field: "标题",
+                    type: "String",
+                    describe: "顶部显示标题"
+                },
+                {
+                    parameter: "dragAble",
+                    field: "拖拽",
+                    type: "Boolean",
+                    describe: "是否可拖拽，默认为false"
+                },
+                {
+                    parameter: "width",
+                    field: "宽度",
+                    type: "Number",
+                    describe: "每个流程的宽度"
+                },
+                {
+                    parameter: "data",
+                    field: "流程数据",
+                    type: "Array",
+                    describe: "定义流程配置信息，具体如下表"
+                },
+                {
+                    parameter: "radius",
+                    field: "圆角",
+                    type: "Boolean",
+                    describe: "流程icon是否为圆角"
+                }
+            ],
+            tableData1: [
+                {
+                    parameter: "icon",
+                    field: "图标",
+                    type: "require图片数据",
+                    describe: "注意要使用require，组件才可以接收到图片"
+                },
+                {
+                    parameter: "text",
+                    field: "显示文字",
+                    type: "String",
+                    describe: "icon下方显示的文字"
+                }
+            ],
+            code: "",
+            cmOptions: {
+                mode: "text/javascript",
+                theme: "base16-dark"
+            }
+        };
+    },
+    created() {
+        // let chartData = this.chartData;
+        let data = this.chartData.data;
+        this.chartData.data = this.chartData.data.concat([...data]);
+        this.chartData.data = this.chartData.data.concat([...data]);
+        this.code = `
           <j-flow-chart :chartData="chartData"></j-flow-chart>
 
           chartData:{
@@ -224,45 +219,45 @@
               }
             ]
           },
-      `
+      `;
     }
-  }
+};
 </script>
 
 <style lang="scss" scoped>
-	.title{
-		font-size: x-large;
-		text-align: left;
-		margin-bottom: 1rem;
-		.detail{
-			font-size: medium;
-			color: dimgrey;
-			margin-top: 1rem;
-		}
-	}
-  .view-body{
+.title {
+    font-size: x-large;
+    text-align: left;
+    margin-bottom: 1rem;
+    .detail {
+        font-size: medium;
+        color: dimgrey;
+        margin-top: 1rem;
+    }
+}
+.view-body {
     display: flex;
     flex-direction: row;
-    .flowchart-body{
-      width: 40%;
+    .flowchart-body {
+        width: 40%;
     }
-    .table-body{
-      width: 40%;
-      margin-top: 2rem;
-      margin-left: 10%;
+    .table-body {
+        width: 40%;
+        margin-top: 2rem;
+        margin-left: 10%;
     }
-  }
-  @media screen and (max-width:1000px) {
-    .view-body{
-      display: flex;
-      flex-direction: column;
-      .flowchart-body{
-        width: 100%;
-      }
-      .table-body{
-        width: 80%;
-        margin: 2rem auto;
-      }
+}
+@media screen and (max-width: 1000px) {
+    .view-body {
+        display: flex;
+        flex-direction: column;
+        .flowchart-body {
+            width: 100%;
+        }
+        .table-body {
+            width: 80%;
+            margin: 2rem auto;
+        }
     }
-  }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/homePage/homePage.vue b/JYeontuComponentWarehouse/examples/views/homePage/homePage.vue
index c8f1de101fd5e6b97df353078f9bb41969214e46..87a9cf31559b396a1ba03cadc0ab11063c5394eb 100644
--- a/JYeontuComponentWarehouse/examples/views/homePage/homePage.vue
+++ b/JYeontuComponentWarehouse/examples/views/homePage/homePage.vue
@@ -1,60 +1,64 @@
 <template>
     <div>
-      <img class="head-img" src="@/assets/logo.png"/>
-      <div class="per-link" v-for="(item,index) in myLink" :key="item.name">
-        <span class="link-name">{{item.name}}：</span>
-        <span class="link-address" @click="toAddress(item.address)">{{item.address}}</span>
-      </div>
+        <img class="head-img" src="@/assets/logo.png" />
+        <div class="per-link" v-for="(item, index) in myLink" :key="item.name">
+            <span class="link-name">{{ item.name }}：</span>
+            <span class="link-address" @click="toAddress(item.address)">{{
+                item.address
+            }}</span>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-  name: 'homePage',
-  components: {
-
-  },
-  data () {
-    return {
-      myLink: [{
-        name: 'CSDN',
-        address: 'https://blog.csdn.net/Twinkle_sone'
-      }, {
-        name: 'Gitee',
-        address: 'https://gitee.com/zheng_yongtao'
-      }, {
-        name: 'GitHub',
-        address: 'https://github.com/yongtaozheng'
-      }, {
-        name: '掘金',
-        address: 'https://juejin.cn/user/440244290727294'
-      }]
-    }
-  },
-  methods: {
-    toAddress (url) {
-      window.open(url)
+    name: "homePage",
+    components: {},
+    data() {
+        return {
+            myLink: [
+                {
+                    name: "CSDN",
+                    address: "https://blog.csdn.net/Twinkle_sone"
+                },
+                {
+                    name: "Gitee",
+                    address: "https://gitee.com/zheng_yongtao"
+                },
+                {
+                    name: "GitHub",
+                    address: "https://github.com/yongtaozheng"
+                },
+                {
+                    name: "掘金",
+                    address: "https://juejin.cn/user/440244290727294"
+                }
+            ]
+        };
+    },
+    methods: {
+        toAddress(url) {
+            window.open(url);
+        }
     }
-  }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-  .head-img{
+.head-img {
     border-radius: 50% 50%;
     margin-top: 1rem;
-  }
-  .per-link{
+}
+.per-link {
     margin-top: 1rem;
     font-size: larger;
-    .link-name{
-
+    .link-name {
     }
-    .link-address{
-      text-decoration: underline;
-      text-underline: blue;
-      color: blue;
-      cursor: pointer;
+    .link-address {
+        text-decoration: underline;
+        text-underline: blue;
+        color: blue;
+        cursor: pointer;
     }
-  }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/installView.vue b/JYeontuComponentWarehouse/examples/views/installView.vue
index e2df01e23303064a85c9c16f53627b9172be6190..d658cdcee87a12c8d84c5328cf20917ac0dacc7e 100644
--- a/JYeontuComponentWarehouse/examples/views/installView.vue
+++ b/JYeontuComponentWarehouse/examples/views/installView.vue
@@ -1,59 +1,59 @@
 <template>
-	<split-horizontal>
-		<template v-slot:header-p>
-			<div class="title">
-				安装（jvuewheel）
-				<div class="detail">
-					
-				</div>
-			</div>
-			<div style="margin-top: 3rem;" class="title">
-				npm 安装
-				<div class="detail">
-					推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
-				</div>
-				<div class="code">
-					<span>npm i @jyeontu/jvuewheel -S</span>
-				</div>
-			</div>
-			<div style="margin-top: 3rem;" class="title">
-				main.js引入
-				<div class="detail">
-					引入后便可以在项目中直接使用
-				</div>
-				<div class="code">
-					<div>//引入组件库</div>
-					<div>import jvuewheel from '@jyeontu/jvuewheel'</div>
-					<div>//引入样式</div>
-					<div>import '@jyeontu/jvuewheel/lib/jvuewhell.css'</div>
-					<div>Vue.use(jvuewheel);</div>
-				</div>
-			</div>
-			<div style="margin-top: 3rem;" class="title">
-				项目地址
-				<div class="detail">
-					欢迎大家一起造轮子，期待您宝贵的意见
-				</div>
-				<div class="code">
-					<span>Gitee：</span>
-					<a href="https://gitee.com/zheng_yongtao/jyeontu-component-warehouse"
-						target="_blank"
-					>https://gitee.com/zheng_yongtao/jyeontu-component-warehouse</a>
-				</div>
-			</div>
-		</template>
-	</split-horizontal>
+    <split-horizontal>
+        <template v-slot:header-p>
+            <div class="title">
+                安装（jvuewheel）
+                <div class="detail"></div>
+            </div>
+            <div style="margin-top: 3rem;" class="title">
+                npm 安装
+                <div class="detail">
+                    推荐使用 npm 的方式安装，它能更好地和 webpack
+                    打包工具配合使用。
+                </div>
+                <div class="code">
+                    <span>npm i @jyeontu/jvuewheel -S</span>
+                </div>
+            </div>
+            <div style="margin-top: 3rem;" class="title">
+                main.js引入
+                <div class="detail">
+                    引入后便可以在项目中直接使用
+                </div>
+                <div class="code">
+                    <div>//引入组件库</div>
+                    <div>import jvuewheel from '@jyeontu/jvuewheel'</div>
+                    <div>//引入样式</div>
+                    <div>import '@jyeontu/jvuewheel/lib/jvuewhell.css'</div>
+                    <div>Vue.use(jvuewheel);</div>
+                </div>
+            </div>
+            <div style="margin-top: 3rem;" class="title">
+                项目地址
+                <div class="detail">
+                    欢迎大家一起造轮子，期待您宝贵的意见
+                </div>
+                <div class="code">
+                    <span>Gitee：</span>
+                    <a
+                        href="https://gitee.com/zheng_yongtao/jyeontu-component-warehouse"
+                        target="_blank"
+                        >https://gitee.com/zheng_yongtao/jyeontu-component-warehouse</a
+                    >
+                </div>
+            </div>
+        </template>
+    </split-horizontal>
 </template>
 
 <script>
-	import splitHorizontal from '@/components/pages/splitHorizontal.vue'
-	export default{
-		name:'installView',
-		components:{
-			splitHorizontal
-		}
-	}
+import splitHorizontal from "@/components/pages/splitHorizontal.vue";
+export default {
+    name: "installView",
+    components: {
+        splitHorizontal
+    }
+};
 </script>
 
-<style>
-</style>
+<style></style>
diff --git a/JYeontuComponentWarehouse/examples/views/utilsTools/dateToolView.vue b/JYeontuComponentWarehouse/examples/views/utilsTools/dateToolView.vue
index 599b5108f7a02b4866e92863bbd5c8b24fc20f3f..f4d50a938a033199b85683d77dfd8377d4da989b 100644
--- a/JYeontuComponentWarehouse/examples/views/utilsTools/dateToolView.vue
+++ b/JYeontuComponentWarehouse/examples/views/utilsTools/dateToolView.vue
@@ -1,193 +1,192 @@
 <template>
-	<div class="dateToolView">
-		<div class="title">
-			日期处理函数（dateTool）
-			<div class="detail">
-				日期格式转换及常用日期获取
-			</div>
-		</div>
-		<div class="explain">
-			<div class="title">说明</div>
-			<j-table :title="title"
-					 :tableData="tableData"
-					 >
-			</j-table>
-		</div>
-		<div class="test">
-			<div class="title">测试</div>
-			<method-test :methodData = "methodData"
-						:util="'dateTool'"></method-test>
-		</div>
-		<div class="code-content">
-			<div class="title">代码</div>
-			<j-code-height-light :code = "code"
-							:keyWords = "keyWords">
-			</j-code-height-light>
-		</div>
-	</div>
-	
+    <div class="dateToolView">
+        <div class="title">
+            日期处理函数（dateTool）
+            <div class="detail">
+                日期格式转换及常用日期获取
+            </div>
+        </div>
+        <div class="explain">
+            <div class="title">说明</div>
+            <j-table :title="title" :tableData="tableData"> </j-table>
+        </div>
+        <div class="test">
+            <div class="title">测试</div>
+            <method-test
+                :methodData="methodData"
+                :util="'dateTool'"
+            ></method-test>
+        </div>
+        <div class="code-content">
+            <div class="title">代码</div>
+            <j-code-height-light :code="code" :keyWords="keyWords">
+            </j-code-height-light>
+        </div>
+    </div>
 </template>
 
 <script>
-	var dateTool = require('@/utils/dateTool.js');
-	import methodTest from '@/components/common/methodTest.vue'
-	export default {
-		name:"dateToolView",
-		components:{
-			methodTest,
-		},
-		data() {
-			return {
-				testMethod:"dateFormat('2021-11-15 22:22:22','yyyy-mm-dd')",
-				testResult:'',
-				methodData:[
-					{
-						name:'dateFormat',
-						params:[
-							{
-								name:'日期(必填)',
-								value:dateTool.getToday(),
-								required:true,
-							},
-							{
-								name:'格式(默认yyyy-mm-dd)',
-								value:'',
-								required:false,
-								options:[
-									'yyyy-mm-dd',
-									'mm-dd-yyyy',
-									'yyyy-mm-dd hh:MM:ss',
-									'hh:MM:ss',
-									'yyyy',
-									'mm',
-									'dd',
-									'hh',
-									'MM',
-									'ss',
-									'mm-dd'
-								]
-							}
-						]
-					},
-					{
-						name:'getToday',
-						params:[
-							{
-								name:'格式(默认yyyy-mm-dd)',
-								value:'',
-								required:false,
-								options:[
-									'yyyy-mm-dd',
-									'mm-dd-yyyy',
-									'yyyy-mm-dd hh:MM:ss',
-									'hh:MM:ss',
-									'yyyy',
-									'mm',
-									'dd',
-									'hh',
-									'MM',
-									'ss',
-									'mm-dd'
-								]
-							}
-						]
-					},
-					{
-						name:'beforeDay',
-						params:[
-							{
-								name:'日期(必填)',
-								value:dateTool.getToday(),
-								required:true,
-							},
-							{
-								name:'前n天(必填)',
-								value:15,
-								required:true,
-							},
-						]
-					},
-					{
-						name:'afterDay',
-						params:[
-							{
-								name:'日期(必填)',
-								value:dateTool.getToday(),
-								required:true,
-							},
-							{
-								name:'后n天(必填)',
-								value:15,
-								required:true,
-							},
-						]
-					}],
-				code:'',
-				title:[
-					{
-						title:'方法',//展示列名
-						key:'method',//字段名
-						type: '', // 列类型
-						readOnly:true,//是否只读
-						width:'20vw',//列宽度
-						columnStyle: '', // 列样式
-						fixed: false,//是否固定
-						sort: false, // 是否支持排序
-					},
-					{
-						title:'说明',//展示列名
-						key:'explain',//字段名
-						type: '', // 列类型
-						readOnly:true,//是否只读
-						width:'40vw',//列宽度
-						columnStyle: '', // 列样式
-						fixed: false,//是否固定
-						sort: false, // 是否支持排序
-					},
-					{
-						title:'参数',//展示列名
-						key:'parameter',//字段名
-						type: '', // 列类型
-						readOnly:true,//是否只读
-						width:'40vw',//列宽度
-						columnStyle: '', // 列样式
-						fixed: false,//是否固定
-						sort: false, // 是否支持排序
-					}
-				],
-				tableData:[
-					{
-						'method':'dateFormat(value: String,formatStr: string)',
-						'explain':'将时间按照所传入的时间格式进行转换',
-						'parameter':"value:日期(必填)，formatStr:格式(默认值：'yyyy-mm-dd')",
-					},
-					{
-						'method':'getToday(str: String)',
-						'explain':'获取当前时间并按照所传入的时间格式进行转换',
-						'parameter':"str:格式(默认值：'yyyy-mm-dd')",
-					},
-					{
-						'method':'beforeDay(date:String,n:Number)',
-						'explain':'获取前n天日期',
-						'parameter':"date:日期，n:前n天",
-					},
-					{
-						'method':'afterDay(date:String,n:Number)',
-						'explain':'获取后n天日期',
-						'parameter':"date:日期，n:后n天",
-					},
-				],
-				keyWords:[
-					{
-						value:'dateTool',
-						color:'green'
-					}
-				]
-			}
-		},
-		created() {
-			// console.log(dateTool.getToday());
-			this.code = `
+var dateTool = require("@/utils/dateTool.js");
+import methodTest from "@/components/common/methodTest.vue";
+export default {
+    name: "dateToolView",
+    components: {
+        methodTest
+    },
+    data() {
+        return {
+            testMethod: "dateFormat('2021-11-15 22:22:22','yyyy-mm-dd')",
+            testResult: "",
+            methodData: [
+                {
+                    name: "dateFormat",
+                    params: [
+                        {
+                            name: "日期(必填)",
+                            value: dateTool.getToday(),
+                            required: true
+                        },
+                        {
+                            name: "格式(默认yyyy-mm-dd)",
+                            value: "",
+                            required: false,
+                            options: [
+                                "yyyy-mm-dd",
+                                "mm-dd-yyyy",
+                                "yyyy-mm-dd hh:MM:ss",
+                                "hh:MM:ss",
+                                "yyyy",
+                                "mm",
+                                "dd",
+                                "hh",
+                                "MM",
+                                "ss",
+                                "mm-dd"
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: "getToday",
+                    params: [
+                        {
+                            name: "格式(默认yyyy-mm-dd)",
+                            value: "",
+                            required: false,
+                            options: [
+                                "yyyy-mm-dd",
+                                "mm-dd-yyyy",
+                                "yyyy-mm-dd hh:MM:ss",
+                                "hh:MM:ss",
+                                "yyyy",
+                                "mm",
+                                "dd",
+                                "hh",
+                                "MM",
+                                "ss",
+                                "mm-dd"
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: "beforeDay",
+                    params: [
+                        {
+                            name: "日期(必填)",
+                            value: dateTool.getToday(),
+                            required: true
+                        },
+                        {
+                            name: "前n天(必填)",
+                            value: 15,
+                            required: true
+                        }
+                    ]
+                },
+                {
+                    name: "afterDay",
+                    params: [
+                        {
+                            name: "日期(必填)",
+                            value: dateTool.getToday(),
+                            required: true
+                        },
+                        {
+                            name: "后n天(必填)",
+                            value: 15,
+                            required: true
+                        }
+                    ]
+                }
+            ],
+            code: "",
+            title: [
+                {
+                    title: "方法", //展示列名
+                    key: "method", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "说明", //展示列名
+                    key: "explain", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "40vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "40vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData: [
+                {
+                    method: "dateFormat(value: String,formatStr: string)",
+                    explain: "将时间按照所传入的时间格式进行转换",
+                    parameter:
+                        "value:日期(必填)，formatStr:格式(默认值：'yyyy-mm-dd')"
+                },
+                {
+                    method: "getToday(str: String)",
+                    explain: "获取当前时间并按照所传入的时间格式进行转换",
+                    parameter: "str:格式(默认值：'yyyy-mm-dd')"
+                },
+                {
+                    method: "beforeDay(date:String,n:Number)",
+                    explain: "获取前n天日期",
+                    parameter: "date:日期，n:前n天"
+                },
+                {
+                    method: "afterDay(date:String,n:Number)",
+                    explain: "获取后n天日期",
+                    parameter: "date:日期，n:后n天"
+                }
+            ],
+            keyWords: [
+                {
+                    value: "dateTool",
+                    color: "green"
+                }
+            ]
+        };
+    },
+    created() {
+        // console.log(dateTool.getToday());
+        this.code = `
 		/*
 		*日期处理函数
 		*/
@@ -199,51 +198,48 @@
 		dateTool.getToday('yyyy-mm-dd');//获取今天日期并格式化
 		dateTool.beforeDay('2021-11-15',10);//获取2021-11-15前10天的日期
 		dateTool.afterDay('2021-11-15',10);//获取2021-11-15后10天的日期
-			`
-		},
-		methods:{
-			
-		}
-		
-	}
+			`;
+    },
+    methods: {}
+};
 </script>
 
 <style lang="scss" scoped>
-	.dateToolView{
-		padding: 0.2rem;
-		.title{
-			font-size: x-large;
-			text-align: left;
-			margin-bottom: 1rem;
-			.detail{
-				font-size: medium;
-				color: dimgrey;
-				margin-top: 1rem;
-			}
-		}
-		.explain{
-			margin-top: 3rem;
-		}
-		.test{
-			margin-top: 3rem;
-			.test-method{
-				display: flex;
-				.method{
-					min-width: 30rem;
-					text-align: center;
-				}
-				.btn{
-					margin-left: 0.8rem;
-					margin-right: 1rem;
-				}
-			}
-			.result{
-				min-width: 20rem;
-				border-bottom: 1px solid dimgrey;
-			}
-		}
-		.code-content{
-			margin-top: 3rem;
-		}
-	}
+.dateToolView {
+    padding: 0.2rem;
+    .title {
+        font-size: x-large;
+        text-align: left;
+        margin-bottom: 1rem;
+        .detail {
+            font-size: medium;
+            color: dimgrey;
+            margin-top: 1rem;
+        }
+    }
+    .explain {
+        margin-top: 3rem;
+    }
+    .test {
+        margin-top: 3rem;
+        .test-method {
+            display: flex;
+            .method {
+                min-width: 30rem;
+                text-align: center;
+            }
+            .btn {
+                margin-left: 0.8rem;
+                margin-right: 1rem;
+            }
+        }
+        .result {
+            min-width: 20rem;
+            border-bottom: 1px solid dimgrey;
+        }
+    }
+    .code-content {
+        margin-top: 3rem;
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/utilsTools/numsFormatView.vue b/JYeontuComponentWarehouse/examples/views/utilsTools/numsFormatView.vue
index e8cd4362b5106dd681458345d25951946e878de1..623d67767beccea847a03864a690415aab00e125 100644
--- a/JYeontuComponentWarehouse/examples/views/utilsTools/numsFormatView.vue
+++ b/JYeontuComponentWarehouse/examples/views/utilsTools/numsFormatView.vue
@@ -1,168 +1,167 @@
 <template>
-	<div class="numsFormatView">
-		<div class="title">
-			数字处理函数（numsFormat）
-			<div class="detail">
-				数字格式转换及常用数字处理
-			</div>
-		</div>
-		<div class="explain">
-			<div class="title">说明</div>
-			<j-table :title="title"
-					 :tableData="tableData">
-			</j-table>
-		</div>
-		<div class="test">
-			<div class="title">测试</div>
-			<method-test :methodData = "methodData"
-						:util="'numsFormat'"></method-test>
-		</div>
-		<div class="code-content">
-			<div class="title">代码</div>
-			<j-code-height-light :code = "code"
-							:keyWords = "keyWords">
-			</j-code-height-light>
-		</div>
-	</div>
+    <div class="numsFormatView">
+        <div class="title">
+            数字处理函数（numsFormat）
+            <div class="detail">
+                数字格式转换及常用数字处理
+            </div>
+        </div>
+        <div class="explain">
+            <div class="title">说明</div>
+            <j-table :title="title" :tableData="tableData"> </j-table>
+        </div>
+        <div class="test">
+            <div class="title">测试</div>
+            <method-test
+                :methodData="methodData"
+                :util="'numsFormat'"
+            ></method-test>
+        </div>
+        <div class="code-content">
+            <div class="title">代码</div>
+            <j-code-height-light :code="code" :keyWords="keyWords">
+            </j-code-height-light>
+        </div>
+    </div>
 </template>
 
 <script>
-	var numsFormat = require('@/utils/numsFormat.js');
-	import methodTest from '@/components/common/methodTest.vue'
-	export default {
-		name:"numsFormatView",
-		components:{
-			methodTest,
-		},
-		data() {
-			return {
-				methodData:[
-					{
-						name:'numberToWords',
-						params:[
-							{
-								name:'数字(必填)',
-								value:12345,
-								required:true,
-							}
-						]
-					},
-					{
-						name:'numberToChineseWords',
-						params:[
-							{
-								name:'数字字符串(必填)',
-								value:'12345',
-								required:true,
-							}
-						]
-					},
-					{
-						name:'numberToSplitWords',
-						params:[
-							{
-								name:'数字字符串(必填)',
-								value:'12345',
-								required:true,
-							},
-							{
-								name:"分隔符(默认为',')",
-								value:'',
-								required:false,
-							}
-						]
-					},
-					{
-						name:'intToRoman',
-						params:[
-							{
-								name:'整数数字(必填)[1:3999]',
-								value:345,
-								required:true,
-							}
-						]
-					},
-					{
-						name:'romanToInt',
-						params:[
-							{
-								name:'罗马数字(必填)',
-								value:'CCCXLV',
-								required:true,
-							}
-						]
-					},
-				],
-				title:[
-					{
-						title:'方法',//展示列名
-						key:'method',//字段名
-						type: '', // 列类型
-						readOnly:true,//是否只读
-						width:'20vw',//列宽度
-						columnStyle: '', // 列样式
-						fixed: false,//是否固定
-						sort: false, // 是否支持排序
-					},
-					{
-						title:'说明',//展示列名
-						key:'explain',//字段名
-						type: '', // 列类型
-						readOnly:true,//是否只读
-						width:'40vw',//列宽度
-						columnStyle: '', // 列样式
-						fixed: false,//是否固定
-						sort: false, // 是否支持排序
-					},
-					{
-						title:'参数',//展示列名
-						key:'parameter',//字段名
-						type: '', // 列类型
-						readOnly:true,//是否只读
-						width:'40vw',//列宽度
-						columnStyle: '', // 列样式
-						fixed: false,//是否固定
-						sort: false, // 是否支持排序
-					}
-				],
-				tableData:[
-					{
-						'method':'numberToWords(num: Number)',
-						'explain':'数字转换为英文表示',
-						'parameter':"num:数字",
-					},
-					{
-						'method':'numberToChineseWords(str: String)',
-						'explain':'数字转换为大写中文表示',
-						'parameter':"str:数字字符串",
-					},
-					{
-						'method':'numberToSplitWords(num:String,separator:String)',
-						'explain':'数字千分位分隔',
-						'parameter':"num:数字字符串,separator:分隔符(默认为',')",
-					},
-					{
-						'method':'intToRoman(num:Number)',
-						'explain':'整数转罗马数字',
-						'parameter':"num:整数",
-					},
-					{
-						'method':'romanToInt(s:String)',
-						'explain':'罗马数字转整数',
-						'parameter':"s:罗马数字",
-					}
-				],
-				keyWords:[
-					{
-						value:'numsFormat',
-						color:'green'
-					}
-				],
-				code:'',
-			}
-		},
-		created() {
-			this.code = `
+var numsFormat = require("@/utils/numsFormat.js");
+import methodTest from "@/components/common/methodTest.vue";
+export default {
+    name: "numsFormatView",
+    components: {
+        methodTest
+    },
+    data() {
+        return {
+            methodData: [
+                {
+                    name: "numberToWords",
+                    params: [
+                        {
+                            name: "数字(必填)",
+                            value: 12345,
+                            required: true
+                        }
+                    ]
+                },
+                {
+                    name: "numberToChineseWords",
+                    params: [
+                        {
+                            name: "数字字符串(必填)",
+                            value: "12345",
+                            required: true
+                        }
+                    ]
+                },
+                {
+                    name: "numberToSplitWords",
+                    params: [
+                        {
+                            name: "数字字符串(必填)",
+                            value: "12345",
+                            required: true
+                        },
+                        {
+                            name: "分隔符(默认为',')",
+                            value: "",
+                            required: false
+                        }
+                    ]
+                },
+                {
+                    name: "intToRoman",
+                    params: [
+                        {
+                            name: "整数数字(必填)[1:3999]",
+                            value: 345,
+                            required: true
+                        }
+                    ]
+                },
+                {
+                    name: "romanToInt",
+                    params: [
+                        {
+                            name: "罗马数字(必填)",
+                            value: "CCCXLV",
+                            required: true
+                        }
+                    ]
+                }
+            ],
+            title: [
+                {
+                    title: "方法", //展示列名
+                    key: "method", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "说明", //展示列名
+                    key: "explain", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "40vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "40vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData: [
+                {
+                    method: "numberToWords(num: Number)",
+                    explain: "数字转换为英文表示",
+                    parameter: "num:数字"
+                },
+                {
+                    method: "numberToChineseWords(str: String)",
+                    explain: "数字转换为大写中文表示",
+                    parameter: "str:数字字符串"
+                },
+                {
+                    method: "numberToSplitWords(num:String,separator:String)",
+                    explain: "数字千分位分隔",
+                    parameter: "num:数字字符串,separator:分隔符(默认为',')"
+                },
+                {
+                    method: "intToRoman(num:Number)",
+                    explain: "整数转罗马数字",
+                    parameter: "num:整数"
+                },
+                {
+                    method: "romanToInt(s:String)",
+                    explain: "罗马数字转整数",
+                    parameter: "s:罗马数字"
+                }
+            ],
+            keyWords: [
+                {
+                    value: "numsFormat",
+                    color: "green"
+                }
+            ],
+            code: ""
+        };
+    },
+    created() {
+        this.code = `
 		/*
 		*数字处理函数
 		*/
@@ -175,51 +174,48 @@
 		numsFormat.numberToSplitWords('321123',',');//数字千分位分隔
 		numsFormat.intToRoman('123');//整数转罗马数字
 		numsFormat.romanToInt('CCCXII');//罗马数字转整数
-			`
-		},
-		methods:{
-			
-		}
-		
-	}
+			`;
+    },
+    methods: {}
+};
 </script>
 
 <style lang="scss" scoped>
-	.numsFormatView{
-		padding: 0.2rem;
-		.title{
-			font-size: x-large;
-			text-align: left;
-			margin-bottom: 1rem;
-			.detail{
-				font-size: medium;
-				color: dimgrey;
-				margin-top: 1rem;
-			}
-		}
-		.explain{
-			margin-top: 3rem;
-		}
-		.test{
-			margin-top: 3rem;
-			.test-method{
-				display: flex;
-				.method{
-					min-width: 30rem;
-					text-align: center;
-				}
-				.btn{
-					margin-left: 0.8rem;
-					margin-right: 1rem;
-				}
-			}
-			.result{
-				min-width: 20rem;
-				border-bottom: 1px solid dimgrey;
-			}
-		}
-		.code-content{
-			margin-top: 3rem;
-		}
-	}
+.numsFormatView {
+    padding: 0.2rem;
+    .title {
+        font-size: x-large;
+        text-align: left;
+        margin-bottom: 1rem;
+        .detail {
+            font-size: medium;
+            color: dimgrey;
+            margin-top: 1rem;
+        }
+    }
+    .explain {
+        margin-top: 3rem;
+    }
+    .test {
+        margin-top: 3rem;
+        .test-method {
+            display: flex;
+            .method {
+                min-width: 30rem;
+                text-align: center;
+            }
+            .btn {
+                margin-left: 0.8rem;
+                margin-right: 1rem;
+            }
+        }
+        .result {
+            min-width: 20rem;
+            border-bottom: 1px solid dimgrey;
+        }
+    }
+    .code-content {
+        margin-top: 3rem;
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/utilsTools/strToolView.vue b/JYeontuComponentWarehouse/examples/views/utilsTools/strToolView.vue
index b3b62195eb9b65c2990170f37880316f6add7ddb..def005516bb56e01bda5354a75ed6f3a1957957c 100644
--- a/JYeontuComponentWarehouse/examples/views/utilsTools/strToolView.vue
+++ b/JYeontuComponentWarehouse/examples/views/utilsTools/strToolView.vue
@@ -1,136 +1,133 @@
 <template>
-	<div class="strToolView">
-		<div class="title">
-			字符串处理函数（strTool）
-			<div class="detail">
-				字符串格式转换及常用字符串处理
-			</div>
-		</div>
-		<div class="explain">
-			<div class="title">说明</div>
-			<j-table :title="title"
-					 :tableData="tableData"
-					 >
-			</j-table>
-		</div>
-		<div class="test">
-			<div class="title">测试</div>
-			<method-test :methodData = "methodData"
-						:util="'strTool'"></method-test>
-		</div>
-		<div class="code-content">
-			<div class="title">代码</div>
-			<j-code-height-light :code = "code"
-							:keyWords = "keyWords">
-			</j-code-height-light>
-		</div>
-	</div>
-	
+    <div class="strToolView">
+        <div class="title">
+            字符串处理函数（strTool）
+            <div class="detail">
+                字符串格式转换及常用字符串处理
+            </div>
+        </div>
+        <div class="explain">
+            <div class="title">说明</div>
+            <j-table :title="title" :tableData="tableData"> </j-table>
+        </div>
+        <div class="test">
+            <div class="title">测试</div>
+            <method-test
+                :methodData="methodData"
+                :util="'strTool'"
+            ></method-test>
+        </div>
+        <div class="code-content">
+            <div class="title">代码</div>
+            <j-code-height-light :code="code" :keyWords="keyWords">
+            </j-code-height-light>
+        </div>
+    </div>
 </template>
 
 <script>
-	var strTool = require('@/utils/strTool.js');
-	import methodTest from '@/components/common/methodTest.vue'
-	export default {
-		name:"strToolView",
-		components:{
-			methodTest,
-		},
-		data() {
-			return {
-				methodData:[
-					{
-						name:'_toLittleCamel',
-						params:[
-							{
-								name:'-连接的字符串',
-								value:'my-test-div',
-								required:true,
-							}
-						]
-					},
-					{
-						name:'_toBigCamel',
-						params:[
-							{
-								name:'-连接的字符串',
-								value:'my-test-div',
-								required:true,
-							}
-						]
-					},
-					{
-						name:'camelTo_',
-						params:[
-							{
-								name:'驼峰命名字符串',
-								value:'myTestDiv',
-								required:true,
-							}
-						]
-					},
-					],
-				code:'',
-				title:[
-					{
-						title:'方法',//展示列名
-						key:'method',//字段名
-						type: '', // 列类型
-						readOnly:true,//是否只读
-						width:'20vw',//列宽度
-						columnStyle: '', // 列样式
-						fixed: false,//是否固定
-						sort: false, // 是否支持排序
-					},
-					{
-						title:'说明',//展示列名
-						key:'explain',//字段名
-						type: '', // 列类型
-						readOnly:true,//是否只读
-						width:'40vw',//列宽度
-						columnStyle: '', // 列样式
-						fixed: false,//是否固定
-						sort: false, // 是否支持排序
-					},
-					{
-						title:'参数',//展示列名
-						key:'parameter',//字段名
-						type: '', // 列类型
-						readOnly:true,//是否只读
-						width:'40vw',//列宽度
-						columnStyle: '', // 列样式
-						fixed: false,//是否固定
-						sort: false, // 是否支持排序
-					}
-				],
-				tableData:[
-					{
-						'method':'_toLittleCamel(str: String)',
-						'explain':"'-'连接命名转换成小驼峰命名",
-						'parameter':"str:字符串",
-					},
-					{
-						'method':'_toBigCamel(str: String)',
-						'explain':"'-'连接命名转换成大驼峰命名",
-						'parameter':"str:字符串",
-					},
-					{
-						'method':'camelTo_(str:String)',
-						'explain':"驼峰命名转换成'-'连接命名",
-						'parameter':"str:字符串",
-					}
-				],
-				keyWords:[
-					{
-						value:'strTool',
-						color:'green'
-					}
-				]
-			}
-		},
-		created() {
-			// console.log(strTool.getToday());
-			this.code = `
+var strTool = require("@/utils/strTool.js");
+import methodTest from "@/components/common/methodTest.vue";
+export default {
+    name: "strToolView",
+    components: {
+        methodTest
+    },
+    data() {
+        return {
+            methodData: [
+                {
+                    name: "_toLittleCamel",
+                    params: [
+                        {
+                            name: "-连接的字符串",
+                            value: "my-test-div",
+                            required: true
+                        }
+                    ]
+                },
+                {
+                    name: "_toBigCamel",
+                    params: [
+                        {
+                            name: "-连接的字符串",
+                            value: "my-test-div",
+                            required: true
+                        }
+                    ]
+                },
+                {
+                    name: "camelTo_",
+                    params: [
+                        {
+                            name: "驼峰命名字符串",
+                            value: "myTestDiv",
+                            required: true
+                        }
+                    ]
+                }
+            ],
+            code: "",
+            title: [
+                {
+                    title: "方法", //展示列名
+                    key: "method", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "20vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "说明", //展示列名
+                    key: "explain", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "40vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                },
+                {
+                    title: "参数", //展示列名
+                    key: "parameter", //字段名
+                    type: "", // 列类型
+                    readOnly: true, //是否只读
+                    width: "40vw", //列宽度
+                    columnStyle: "", // 列样式
+                    fixed: false, //是否固定
+                    sort: false // 是否支持排序
+                }
+            ],
+            tableData: [
+                {
+                    method: "_toLittleCamel(str: String)",
+                    explain: "'-'连接命名转换成小驼峰命名",
+                    parameter: "str:字符串"
+                },
+                {
+                    method: "_toBigCamel(str: String)",
+                    explain: "'-'连接命名转换成大驼峰命名",
+                    parameter: "str:字符串"
+                },
+                {
+                    method: "camelTo_(str:String)",
+                    explain: "驼峰命名转换成'-'连接命名",
+                    parameter: "str:字符串"
+                }
+            ],
+            keyWords: [
+                {
+                    value: "strTool",
+                    color: "green"
+                }
+            ]
+        };
+    },
+    created() {
+        // console.log(strTool.getToday());
+        this.code = `
 		/*
 		*日期处理函数
 		*/
@@ -141,51 +138,48 @@
 		strTool._toLittleCamel('my-test-div');//-连接命名转换成小驼峰命名 myTestDiv
 		strTool._toBigCamel('my-test-div');//-连接命名转换成大驼峰命名 MyTestDiv
 		strTool.camelTo_('littleCamel');//驼峰命名转换成-连接命名 little-camel
-			`
-		},
-		methods:{
-			
-		}
-		
-	}
+			`;
+    },
+    methods: {}
+};
 </script>
 
 <style lang="scss" scoped>
-	.strToolView{
-		padding: 0.2rem;
-		.title{
-			font-size: x-large;
-			text-align: left;
-			margin-bottom: 1rem;
-			.detail{
-				font-size: medium;
-				color: dimgrey;
-				margin-top: 1rem;
-			}
-		}
-		.explain{
-			margin-top: 3rem;
-		}
-		.test{
-			margin-top: 3rem;
-			.test-method{
-				display: flex;
-				.method{
-					min-width: 30rem;
-					text-align: center;
-				}
-				.btn{
-					margin-left: 0.8rem;
-					margin-right: 1rem;
-				}
-			}
-			.result{
-				min-width: 20rem;
-				border-bottom: 1px solid dimgrey;
-			}
-		}
-		.code-content{
-			margin-top: 3rem;
-		}
-	}
+.strToolView {
+    padding: 0.2rem;
+    .title {
+        font-size: x-large;
+        text-align: left;
+        margin-bottom: 1rem;
+        .detail {
+            font-size: medium;
+            color: dimgrey;
+            margin-top: 1rem;
+        }
+    }
+    .explain {
+        margin-top: 3rem;
+    }
+    .test {
+        margin-top: 3rem;
+        .test-method {
+            display: flex;
+            .method {
+                min-width: 30rem;
+                text-align: center;
+            }
+            .btn {
+                margin-left: 0.8rem;
+                margin-right: 1rem;
+            }
+        }
+        .result {
+            min-width: 20rem;
+            border-bottom: 1px solid dimgrey;
+        }
+    }
+    .code-content {
+        margin-top: 3rem;
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/examples/views/versionInfo.vue b/JYeontuComponentWarehouse/examples/views/versionInfo.vue
new file mode 100644
index 0000000000000000000000000000000000000000..00dbd8f9aa2dfe9b39b7f39d155ad124ad41cbcd
--- /dev/null
+++ b/JYeontuComponentWarehouse/examples/views/versionInfo.vue
@@ -0,0 +1,100 @@
+<template>
+    <div>
+        <split-horizontal>
+            <template v-slot:header-p>
+                <div class="title">
+                    版本介绍（jvuewheel）
+                    <div class="detail">
+                        目前最新版本为0.1.4
+                    </div>
+                </div>
+            </template>
+        </split-horizontal>
+        <div class="content">
+            <j-steps
+                :dataList="dataList"
+                :iconWidth="iconWidth"
+                :titleStyle="titleStyle"
+                :timeStyle="timeStyle"
+                :descriptStyle="dataList"
+                :lineStyle="lineStyle"
+            >
+            </j-steps>
+        </div>
+    </div>
+</template>
+
+<script>
+import splitHorizontal from "@/components/pages/splitHorizontal.vue";
+export default {
+    name: "versionInfo",
+    components: {
+        splitHorizontal
+    },
+    data() {
+        return {
+            iconWidth: 50,
+            lineStyle: {
+                color: "skyblue",
+                height: "100px"
+            },
+            titleStyle: {
+                color: "black",
+                fontWeight: "bold"
+            },
+            descriptStyle: {},
+            timeStyle: {
+                color: "orange",
+                fontWeight: "bold"
+            },
+            dataList: [
+                {
+                    title: "版本0.1.5（待发布）",
+                    descript:
+                        "优化：代码高亮组件、表格组件增加展开行功能；增加：步骤图组件",
+                    time: "未定",
+                    icon: "未"
+                },
+                {
+                    title: "版本0.1.4（已发布）",
+                    descript: "优化：代码高亮组件",
+                    time: "2021-12-01",
+                    icon: "01"
+                },
+                {
+                    title: "版本0.1.3（已发布）",
+                    descript: "增加：悬浮按钮组件、弹窗组件",
+                    time: "2021-11-28",
+                    icon: "28"
+                },
+                {
+                    title: "版本0.1.2（已发布）",
+                    descript: "增加：数字滚动变化效果组件；工具函数",
+                    time: "2021-11-26",
+                    icon: "26"
+                },
+                {
+                    title: "版本0.1.1（已发布）",
+                    descript:
+                        "项目搭建，导入：日历组件、电子屏数字组件、流程图组件、表格组件、代码高亮组件、canvas画板组件",
+                    time: "2021-11-24",
+                    icon: "图标"
+                },
+                {
+                    title: "版本0.1.0（已发布）",
+                    descript: "初始化npm库",
+                    time: "2021-11-22",
+                    icon: "22"
+                }
+            ]
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+    width: 70%;
+    margin-left: 15%;
+}
+</style>
diff --git a/JYeontuComponentWarehouse/jsconfig.json b/JYeontuComponentWarehouse/jsconfig.json
index c6ca8ba62451796bc77878372c2b0d1976614806..0e1486fd2bfe7caff004b8f2ace9df916c156abe 100644
--- a/JYeontuComponentWarehouse/jsconfig.json
+++ b/JYeontuComponentWarehouse/jsconfig.json
@@ -1,9 +1,9 @@
-{ 
-  "compilerOptions": {
-    "baseUrl": "./",
-    "paths": {
-        "@/*": ["examples/*"]
-    }
-  },
-  "exclude": ["node_modules", "dist"]
-}
\ No newline at end of file
+{
+    "compilerOptions": {
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["examples/*"]
+        }
+    },
+    "exclude": ["node_modules", "dist"]
+}
diff --git a/JYeontuComponentWarehouse/package.json b/JYeontuComponentWarehouse/package.json
index 38f505f66dee4eaa83e69d2a8e4778f7521e7f1e..3d2a3914cc116331517939b63407570440d8e07f 100644
--- a/JYeontuComponentWarehouse/package.json
+++ b/JYeontuComponentWarehouse/package.json
@@ -1,39 +1,52 @@
 {
-  "name": "@jyeontu/jvuewheel",
-  "version": "0.1.4",
-  "license": "MIT",
-  "keyword": "vue components",
-  "description":"vue组件库封装",
-  "main": "lib/jvuewhell.umd.min.js",
-  "scripts": {
-    "serve": "set port=8081 && vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-	"lib": "vue-cli-service build --target lib --name jvuewhell --dest lib packages/index.js"
-  },
-  "dependencies": {
-	"@typescript-eslint/eslint-plugin": "^4.28.2",
-	"@typescript-eslint/parser": "^4.28.2",
-    "core-js": "^2.6.5",
-    "element-ui": "^2.15.3",
-    "highlight.js": "^11.3.1",
-    "node-sass": "^4.14.1",
-    "sass": "^1.37.5",
-    "scss": "^0.2.4",
-    "scss-loader": "0.0.1",
-    "vue": "^2.6.10",
-    "vue-codemirror": "^4.0.6",
-    "vue-highlightjs": "^1.3.3",
-    "vue-router": "^3.5.2"
-  },
-  "devDependencies": {
-	"eslint-config-standard": "12.0.0",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^3.2.1",
-    "vue-style-loader": "^4.1.3",
-    "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-service": "^3.8.0",
-    "vue-template-compiler": "^2.6.10",
-    "compression-webpack-plugin": "^8.0.1"
-  }
+    "name": "@jyeontu/jvuewheel",
+    "version": "0.1.4",
+    "license": "MIT",
+    "keyword": "vue components",
+    "description": "vue组件库封装",
+    "main": "lib/jvuewhell.umd.min.js",
+    "scripts": {
+        "serve": "set port=8081 && vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "eslint --ext .js,.vue packages",
+        "lib": "vue-cli-service build --target lib --name jvuewhell --dest lib packages/index.js"
+    },
+    "lint-staged": {
+        "*.{ts,tsx,js,vue}": "eslint --fix"
+    },
+    "dependencies": {
+        "@typescript-eslint/eslint-plugin": "^4.28.2",
+        "@typescript-eslint/parser": "^4.28.2",
+        "eslint": "^3.19.0",
+        "eslint-config-standard": "^10.2.1",
+        "eslint-friendly-formatter": "^3.0.0",
+        "eslint-loader": "^1.7.1",
+        "eslint-plugin-html": "^3.0.0",
+        "eslint-plugin-import": "^2.7.0",
+        "eslint-plugin-node": "^5.2.0",
+        "eslint-plugin-promise": "^3.4.0",
+        "eslint-plugin-standard": "^3.0.1",
+        "babel-eslint": "^7.1.1",
+        "core-js": "^2.6.5",
+        "element-ui": "^2.15.3",
+        "highlight.js": "^11.3.1",
+        "node-sass": "^4.14.1",
+        "sass": "^1.37.5",
+        "scss": "^0.2.4",
+        "scss-loader": "0.0.1",
+        "vue": "^2.6.10",
+        "vue-codemirror": "^4.0.6",
+        "vue-highlightjs": "^1.3.3",
+        "vue-router": "^3.5.2"
+    },
+    "devDependencies": {
+        "eslint-config-standard": "12.0.0",
+        "sass-loader": "^8.0.2",
+        "style-loader": "^3.2.1",
+        "vue-style-loader": "^4.1.3",
+        "@vue/cli-plugin-babel": "^3.8.0",
+        "@vue/cli-service": "^3.8.0",
+        "vue-template-compiler": "^2.6.10",
+        "compression-webpack-plugin": "^8.0.1"
+    }
 }
diff --git a/JYeontuComponentWarehouse/packages/JCalendar/index.js b/JYeontuComponentWarehouse/packages/JCalendar/index.js
index 7a0f0ea3d0c481b4d2e0b058c9ec144f8e49399f..394151b8bcd4c528c797d91f2d08276c5fc88100 100644
--- a/JYeontuComponentWarehouse/packages/JCalendar/index.js
+++ b/JYeontuComponentWarehouse/packages/JCalendar/index.js
@@ -1,5 +1,5 @@
-import JCalendar from './src/JCalendar.vue';
+import JCalendar from "./src/JCalendar.vue";
 
-JCalendar.install = Vue => Vue.component(JCalendar.name, JCalendar);//注册组件
+JCalendar.install = Vue => Vue.component(JCalendar.name, JCalendar); //注册组件
 
-export default JCalendar
\ No newline at end of file
+export default JCalendar;
diff --git a/JYeontuComponentWarehouse/packages/JCalendar/src/JCalendar.vue b/JYeontuComponentWarehouse/packages/JCalendar/src/JCalendar.vue
index 66eee9382d570a46ed36bf24daad7150e2bd3782..e7a1d30e575dbeb51846c7399c7c73ef4dfa6c5b 100644
--- a/JYeontuComponentWarehouse/packages/JCalendar/src/JCalendar.vue
+++ b/JYeontuComponentWarehouse/packages/JCalendar/src/JCalendar.vue
@@ -1,295 +1,313 @@
 <template>
-	<div class="template">
-		<div id="header" class="header">
-			<div class="header-title">{{title}}</div>
-			<div class="btn-list">
-        <div class="btn-list-left">
-          <div class="btn-pre" @click="toPreMonth()"><</div>
-          <div class="select-month">{{selectMonth}}</div>
-          <div class="btn-next" @click="toNextMonth()">></div>
+    <div class="template">
+        <div id="header" class="header">
+            <div class="header-title">{{ title }}</div>
+            <div class="btn-list">
+                <div class="btn-list-left">
+                    <div class="btn-pre" @click="toPreMonth()"><</div>
+                    <div class="select-month">{{ selectMonth }}</div>
+                    <div class="btn-next" @click="toNextMonth()">></div>
+                </div>
+                <div class="btn-today" @click="toNowDay()">回到今天</div>
+            </div>
         </div>
-				<div class="btn-today" @click="toNowDay()">回到今天</div>
-			</div>
-		</div>
-		<div class="content" id="content">
-		  <div class="calendar-content">
-			 <div class="grid-week grid" v-for="(item,index) in weeks" :key="index">
-				 周{{item}}
-			 </div>
-			 <div @click="clickDay(item)"
-				  class="grid-day grid"
-          :class="gridClass(item)"
-				  v-for="(item,index) in days"
-				  :key="index">
-				 {{item.split('-')[2]}}
-			 </div>
-		  </div>
-		</div>
-	</div>
+        <div class="content" id="content">
+            <div class="calendar-content">
+                <div
+                    class="grid-week grid"
+                    v-for="(item, index) in weeks"
+                    :key="index"
+                >
+                    周{{ item }}
+                </div>
+                <div
+                    @click="clickDay(item)"
+                    class="grid-day grid"
+                    :class="gridClass(item)"
+                    v-for="(item, index) in days"
+                    :key="index"
+                >
+                    {{ item.split("-")[2] }}
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
 export default {
-  name: 'JCalendar',
-  props: {
-    title: {
-      type: String,
-      default: '日历'
-    },
-    bgSrc: {
-      type: String,
-      default: 'https://images8.alphacoders.com/992/992329.jpg'
-    }
-  },
-  data () {
-    return {
-      weeks: ['日', '一', '二', '三', '四', '五', '六'],
-      days: [],
-      selectDay: '',
-      selectMonth: ''
-    }
-  },
-  methods: {
-    gridClass(item){
-      if(item == this.selectDay){
-        return 'selected'
-      }
-      if(item.split('-')[1] != this.selectMonth.split('-')[1]){
-        return 'gray'
-      }
-      return '';
-    },
-    setBg () {
-      let src = this.bgSrc
-      let box = document.getElementById('header')
-      box.style.backgroundImage = 'url(' + src + ')'
-      box.style.backgroundRepeat = 'no-repeat'
-      box.style.backgroundSize = '100%'
-    },
-    /**
-    * 判断润年
-    * @param {string} year 需要判断的年份
-    * @return {Boolean}
-    */
-    isLeap (year) {
-      if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
-        return true
-      }
-      return false
-    },
-    /**
-     * 获取星期
-     * @param {string} date 需要获取星期的日期
-     * @return {string}
-     */
-    getWeek (date) {
-      let Stamp = new Date(date)
-      // return weeks[Stamp.getDay()];
-      return Stamp.getDay()
-    },
-    /**
-     * 获取月份天数
-     * @param {string} year  年份
-     * @param {string} month 月份
-     * @return {string}
-     */
-    getMonthDays (year, month) {
-      month = parseInt(month) - 1
-      if (month < 0 || month > 11) return ''
-      let months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
-      if (this.isLeap(year)) {
-        months[1] = 29
-      }
-      return months[month]
+    name: "JCalendar",
+    props: {
+        title: {
+            type: String,
+            default: "日历"
+        },
+        bgSrc: {
+            type: String,
+            default: "https://images8.alphacoders.com/992/992329.jpg"
+        }
     },
-    zero (str) {
-      str = parseInt(str)
-      return str > 9 ? str : '0' + str
+    data() {
+        return {
+            weeks: ["日", "一", "二", "三", "四", "五", "六"],
+            days: [],
+            selectDay: "",
+            selectMonth: ""
+        };
     },
-    /**
-     * 补充满天数
-     * @param {string} year  年份
-     * @param {string} month 月份
-     * @return {string}
-     */
-    fillDays (year, month) {
-      const months = this.getMonthDays(year, month)
-      const startWeek = this.getWeek(year + '-' + month + '-' + '01')
-      const endWeek = this.getWeek(year + '-' + month + '-' + months)
-      this.selectMonth = year + '-' + this.zero(month)
+    methods: {
+        gridClass(item) {
+            if (item == this.selectDay) {
+                return "selected";
+            }
+            if (item.split("-")[1] != this.selectMonth.split("-")[1]) {
+                return "gray";
+            }
+            return "";
+        },
+        setBg() {
+            let src = this.bgSrc;
+            let box = document.getElementById("header");
+            box.style.backgroundImage = "url(" + src + ")";
+            box.style.backgroundRepeat = "no-repeat";
+            box.style.backgroundSize = "100%";
+        },
+        /**
+         * 判断润年
+         * @param {string} year 需要判断的年份
+         * @return {Boolean}
+         */
+        isLeap(year) {
+            if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+                return true;
+            }
+            return false;
+        },
+        /**
+         * 获取星期
+         * @param {string} date 需要获取星期的日期
+         * @return {string}
+         */
+        getWeek(date) {
+            let Stamp = new Date(date);
+            // return weeks[Stamp.getDay()];
+            return Stamp.getDay();
+        },
+        /**
+         * 获取月份天数
+         * @param {string} year  年份
+         * @param {string} month 月份
+         * @return {string}
+         */
+        getMonthDays(year, month) {
+            month = parseInt(month) - 1;
+            if (month < 0 || month > 11) return "";
+            let months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+            if (this.isLeap(year)) {
+                months[1] = 29;
+            }
+            return months[month];
+        },
+        zero(str) {
+            str = parseInt(str);
+            return str > 9 ? str : "0" + str;
+        },
+        /**
+         * 补充满天数
+         * @param {string} year  年份
+         * @param {string} month 月份
+         * @return {string}
+         */
+        fillDays(year, month) {
+            const months = this.getMonthDays(year, month);
+            const startWeek = this.getWeek(year + "-" + month + "-" + "01");
+            const endWeek = this.getWeek(year + "-" + month + "-" + months);
+            this.selectMonth = year + "-" + this.zero(month);
 
-      year = parseInt(year)
-      month = parseInt(month)
-      let preYear = year
-      let preMonth = month - 1
-      if (preMonth === 0) {
-        preMonth = 12
-        preYear = parseInt(year) - 1
-      }
-      const preMonths = this.getMonthDays(preYear, preMonth)
-      let nextYear = year
-      let nextMonth = month + 1
-      if (nextMonth === 13) {
-        nextMonth = 1
-        nextYear = parseInt(year) + 1
-      }
-      // const nextMonths = this.getMonthDays(nextYear, nextMonth)
-      let days = []
-      for (let i = 0; i < startWeek; i++) {
-        days.unshift(preYear + '-' + this.zero(preMonth) + '-' + this.zero(preMonths - i))
-      }
-      for (let i = 1; i <= months; i++) {
-        days.push(year + '-' + this.zero(month) + '-' + this.zero(i))
-      }
-      for (let i = 0; i < (6 - endWeek); i++) {
-        days.push(nextYear + '-' + this.zero(nextMonth) + '-' + this.zero(i + 1))
-      }
-      return days
-    },
-    clickDay (day) {
-      let clickMonth = parseInt(day.split('-')[1]),
-          selectMonth = parseInt(this.selectMonth.split('-')[1]);
-      if(clickMonth == selectMonth - 1){
-        this.toPreMonth();
-      }
-      if(clickMonth == selectMonth + 1){
-        this.toNextMonth();
-      }
-      this.selectDay = day
-      this.$emit('selectDay', day)
-    },
-    toNowDay () {
-      let tempDate = new Date()
-      let year = tempDate.getFullYear()
-      let month = this.zero(tempDate.getMonth() + 1)
-      let day = this.zero(tempDate.getDate())
-      this.days = this.fillDays(year, month)
-      this.clickDay(year + '-' + month + '-' + day)
-    },
-    toPreMonth () {
-      let year = this.selectMonth.split('-')[0]
-      let month = this.selectMonth.split('-')[1]
-      month = parseInt(month) - 1
-      if (month === 0) {
-        month = 12
-        year = parseInt(year) - 1
-      }
-      this.days = this.fillDays(year, month)
-      this.$emit('changeMonth', year + '-' + this.zero(month))
+            year = parseInt(year);
+            month = parseInt(month);
+            let preYear = year;
+            let preMonth = month - 1;
+            if (preMonth === 0) {
+                preMonth = 12;
+                preYear = parseInt(year) - 1;
+            }
+            const preMonths = this.getMonthDays(preYear, preMonth);
+            let nextYear = year;
+            let nextMonth = month + 1;
+            if (nextMonth === 13) {
+                nextMonth = 1;
+                nextYear = parseInt(year) + 1;
+            }
+            // const nextMonths = this.getMonthDays(nextYear, nextMonth)
+            let days = [];
+            for (let i = 0; i < startWeek; i++) {
+                days.unshift(
+                    preYear +
+                        "-" +
+                        this.zero(preMonth) +
+                        "-" +
+                        this.zero(preMonths - i)
+                );
+            }
+            for (let i = 1; i <= months; i++) {
+                days.push(year + "-" + this.zero(month) + "-" + this.zero(i));
+            }
+            for (let i = 0; i < 6 - endWeek; i++) {
+                days.push(
+                    nextYear +
+                        "-" +
+                        this.zero(nextMonth) +
+                        "-" +
+                        this.zero(i + 1)
+                );
+            }
+            return days;
+        },
+        clickDay(day) {
+            let clickMonth = parseInt(day.split("-")[1]),
+                selectMonth = parseInt(this.selectMonth.split("-")[1]);
+            if (clickMonth == selectMonth - 1) {
+                this.toPreMonth();
+            }
+            if (clickMonth == selectMonth + 1) {
+                this.toNextMonth();
+            }
+            this.selectDay = day;
+            this.$emit("selectDay", day);
+        },
+        toNowDay() {
+            let tempDate = new Date();
+            let year = tempDate.getFullYear();
+            let month = this.zero(tempDate.getMonth() + 1);
+            let day = this.zero(tempDate.getDate());
+            this.days = this.fillDays(year, month);
+            this.clickDay(year + "-" + month + "-" + day);
+        },
+        toPreMonth() {
+            let year = this.selectMonth.split("-")[0];
+            let month = this.selectMonth.split("-")[1];
+            month = parseInt(month) - 1;
+            if (month === 0) {
+                month = 12;
+                year = parseInt(year) - 1;
+            }
+            this.days = this.fillDays(year, month);
+            this.$emit("changeMonth", year + "-" + this.zero(month));
+        },
+        toNextMonth() {
+            let year = this.selectMonth.split("-")[0];
+            let month = this.selectMonth.split("-")[1];
+            month = parseInt(month) + 1;
+            if (month === 13) {
+                month = 1;
+                year = parseInt(year) + 1;
+            }
+            this.days = this.fillDays(year, month);
+            this.$emit("changeMonth", year + "-" + this.zero(month));
+        }
     },
-    toNextMonth () {
-      let year = this.selectMonth.split('-')[0]
-      let month = this.selectMonth.split('-')[1]
-      month = parseInt(month) + 1
-      if (month === 13) {
-        month = 1
-        year = parseInt(year) + 1
-      }
-      this.days = this.fillDays(year, month)
-      this.$emit('changeMonth', year + '-' + this.zero(month))
+    mounted() {
+        this.toNowDay();
+        this.setBg();
     }
-  },
-  mounted () {
-    this.toNowDay()
-    this.setBg()
-  }
-}
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-  @media screen and (max-width:500px) {
-    .header{
-      height: calc(100vw * 9 / 16);
+@media screen and (max-width: 500px) {
+    .header {
+        height: calc(100vw * 9 / 16);
     }
-    .select-month{
-      flex: 2;
-      font-size: medium !important;
-      font-weight: bold !important;
+    .select-month {
+        flex: 2;
+        font-size: medium !important;
+        font-weight: bold !important;
     }
-  }
-  .header{
+}
+.header {
     display: flex;
     flex-direction: column;
-    .header-title{
-      line-height: 5rem;
-      font-size: larger;
-      font-weight: bold;
+    .header-title {
+        line-height: 5rem;
+        font-size: larger;
+        font-weight: bold;
     }
-    .btn-list{
-      display: flex;
-      padding: 1rem;
-      margin-top: auto;
-      cursor: pointer;
-      .btn-list-left{
-        padding: 0.5rem;
-        width: 40%;
+    .btn-list {
         display: flex;
-        .select-month{
-          color: black;
-          flex: 2;
-          font-size: larger;
-          font-weight: bolder;
+        padding: 1rem;
+        margin-top: auto;
+        cursor: pointer;
+        .btn-list-left {
+            padding: 0.5rem;
+            width: 40%;
+            display: flex;
+            .select-month {
+                color: black;
+                flex: 2;
+                font-size: larger;
+                font-weight: bolder;
+            }
+            .btn-pre {
+                flex: 1;
+                background-color: #0080ff;
+            }
+            .btn-next {
+                flex: 1;
+                background-color: #0080ff;
+            }
         }
-        .btn-pre{
-          flex: 1;
-          background-color: #0080FF;
+        .btn-today {
+            padding: 0.5rem;
+            margin-left: auto;
+            margin-right: 1rem;
+            background-color: #076678;
+            color: white;
         }
-        .btn-next{
-          flex: 1;
-          background-color: #0080FF;
-        }
-      }
-      .btn-today{
-        padding: 0.5rem;
-        margin-left: auto;
-        margin-right: 1rem;
-        background-color: #076678;
-        color: white;
-      }
     }
-  }
-	.calendar-content{
-		display: flex;
-		flex-wrap: wrap;
-		width: 100%;
-    .selected{
-      background-color: #007FAA;
+}
+.calendar-content {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    .selected {
+        background-color: #007faa;
     }
-    .grid{
-      width: calc((100% - 9px)/7);
-      height: 3rem;
-      line-height: 3rem;
-      border-left: #005599 solid 1px;
-      border-bottom: #005599 solid 1px;
+    .grid {
+        width: calc((100% - 9px) / 7);
+        height: 3rem;
+        line-height: 3rem;
+        border-left: #005599 solid 1px;
+        border-bottom: #005599 solid 1px;
     }
-    .grid-week{
-      border-top: #005599 solid 1px;
-      background-color: skyblue;
+    .grid-week {
+        border-top: #005599 solid 1px;
+        background-color: skyblue;
     }
-    .grid-day{
-      cursor: pointer;
+    .grid-day {
+        cursor: pointer;
     }
-    .grid-week:nth-child(7){
-      border-right: #005599 solid 1px;
+    .grid-week:nth-child(7) {
+        border-right: #005599 solid 1px;
     }
-    .grid-day:nth-child(14){
-      border-right: #005599 solid 1px;
+    .grid-day:nth-child(14) {
+        border-right: #005599 solid 1px;
     }
-    .grid-day:nth-child(21){
-      border-right: #005599 solid 1px;
+    .grid-day:nth-child(21) {
+        border-right: #005599 solid 1px;
     }
-    .grid-day:nth-child(28){
-      border-right: #005599 solid 1px;
+    .grid-day:nth-child(28) {
+        border-right: #005599 solid 1px;
     }
-    .grid-day:nth-child(35){
-      border-right: #005599 solid 1px;
+    .grid-day:nth-child(35) {
+        border-right: #005599 solid 1px;
     }
-    .grid-day:nth-child(42){
-      border-right: #005599 solid 1px;
+    .grid-day:nth-child(42) {
+        border-right: #005599 solid 1px;
     }
-    .gray{
-      background-color: slategrey;
+    .gray {
+        background-color: slategrey;
     }
-	}
+}
 </style>
diff --git a/JYeontuComponentWarehouse/packages/JCanvasBroad/index.js b/JYeontuComponentWarehouse/packages/JCanvasBroad/index.js
index fd197d0aec220e7bb14ee8bddaaf491ffdbc0de7..32cee7ad40552b4b8c143056e708cf72c80d7487 100644
--- a/JYeontuComponentWarehouse/packages/JCanvasBroad/index.js
+++ b/JYeontuComponentWarehouse/packages/JCanvasBroad/index.js
@@ -1,5 +1,5 @@
-import JCanvasBroad from './src/JCanvasBroad.vue';
+import JCanvasBroad from "./src/JCanvasBroad.vue";
 
-JCanvasBroad.install = Vue => Vue.component(JCanvasBroad.name, JCanvasBroad);//注册组件
+JCanvasBroad.install = Vue => Vue.component(JCanvasBroad.name, JCanvasBroad); //注册组件
 
-export default JCanvasBroad
\ No newline at end of file
+export default JCanvasBroad;
diff --git a/JYeontuComponentWarehouse/packages/JCanvasBroad/src/JCanvasBroad.vue b/JYeontuComponentWarehouse/packages/JCanvasBroad/src/JCanvasBroad.vue
index 5d80e62145276660c0ed5e30ed1a06061f97911f..fd3aa704888a30c52e815f56b192f886f14f4068 100644
--- a/JYeontuComponentWarehouse/packages/JCanvasBroad/src/JCanvasBroad.vue
+++ b/JYeontuComponentWarehouse/packages/JCanvasBroad/src/JCanvasBroad.vue
@@ -1,304 +1,344 @@
 <template>
-	<div id="canvas-broad">
-	    <canvas id="canvas" :width="width" :height="height">浏览器不支持canvas<!-- 如果不支持会显示这段文字 --></canvas>
-	    <j-tab-bar v-if="toolsTabList"
-				:tabList="tabList"
-				:showTab="showTab">
-			<template v-slot:back-ground-color>
-				<div class="section">
-				    <span class="info">设置背景颜色：</span>
-					<input class="btn input-color" type="color" v-model="brackGroudColor" />
-				</div>
-			</template>
-			<template v-slot:pen-color>
-				<div class="section">
-				    <span class="info">选择画笔颜色：</span>
-					<input class="btn input-color" type="color" v-model="penColor" />
-				</div>
-			</template>
-			<template v-slot:eraser>
-				<div class="section">
-				    <span class="info">选择橡皮擦：</span>
-				    <button class="btn colorBtn" :style="'background-color:' + brackGroudColor + ';'" @click='setPenColor();'>{{brackGroudColor}}</button>
-				</div>
-				<div class="section">
-					<button class="btn" @click="setBackGround()">清空画布</button>
-				</div>
-			</template>
-			<template v-slot:pen-size>
-				<div class="section">
-					<span class="info">选择画笔大小：</span>
-					<progress :value="progressValue" 
-							style="cursor: pointer;"
-							id="progress"
-							max="1" 
-							:title="progressValue * 100 +'%'"
-							@click="setPenWidth">
-					</progress>
-					<span style="margin-left: 0.3125rem;">{{20 * progressValue}}px</span>
-				</div>
-			</template>
-			<template v-slot:export>
-				<div class="section">
-					<span class="info">输出画板内容到下面的图片：</span>
-					<button class="btn" @click="createImage();">EXPORT</button>
-				</div>
-				<img id="image_png">
-			</template>
-		</j-tab-bar>
-		<template v-if="!toolsTabList">
-			<div class="section">
-				<button class="btn" @click="setBackGround()">清空画布</button>
-			</div>
-			<div class="section">
-				<span class="info">选择画笔颜色：</span>
-				<input class="input-color" type="color" v-model="penColor" />
-			</div>
-			<div class="section">
-				<span class="info">设置背景颜色：</span>
-				<input class="input-color" type="color" v-model="brackGroudColor" />
-			</div>
-			<div class="section">
-				<span class="info">选择橡皮擦：</span>
-				<button class="btn colorBtn" :style="'background-color:' + brackGroudColor + ';'" @click='setPenColor();'>{{brackGroudColor}}</button>
-			</div>
-			<div class="section">
-				<span class="info">选择画笔大小：</span>
-				<progress :value="progressValue" 
-						style="cursor: pointer;"
-						id="progress"
-						max="1" 
-						:title="progressValue * 100 +'%'"
-						@click="setPenWidth">
-				</progress>
-				<span style="margin-left: 0.3125rem;">{{20 * progressValue}}px</span>
-			</div>
-			<div class="section">
-				<span class="info">输出画板内容到下面的图片：</span>
-				<button class="btn" @click="createImage();">EXPORT</button>
-			</div>
-			<img id="image_png">
-		</template>
-	</div>
+    <div id="canvas-broad">
+        <canvas id="canvas" :width="width" :height="height"
+            >浏览器不支持canvas<!-- 如果不支持会显示这段文字 --></canvas
+        >
+        <j-tab-bar v-if="toolsTabList" :tabList="tabList" :showTab="showTab">
+            <template v-slot:back-ground-color>
+                <div class="section">
+                    <span class="info">设置背景颜色：</span>
+                    <input
+                        class="btn input-color"
+                        type="color"
+                        v-model="brackGroudColor"
+                    />
+                </div>
+            </template>
+            <template v-slot:pen-color>
+                <div class="section">
+                    <span class="info">选择画笔颜色：</span>
+                    <input
+                        class="btn input-color"
+                        type="color"
+                        v-model="penColor"
+                    />
+                </div>
+            </template>
+            <template v-slot:eraser>
+                <div class="section">
+                    <span class="info">选择橡皮擦：</span>
+                    <button
+                        class="btn colorBtn"
+                        :style="'background-color:' + brackGroudColor + ';'"
+                        @click="setPenColor()"
+                    >
+                        {{ brackGroudColor }}
+                    </button>
+                </div>
+                <div class="section">
+                    <button class="btn" @click="setBackGround()">
+                        清空画布
+                    </button>
+                </div>
+            </template>
+            <template v-slot:pen-size>
+                <div class="section">
+                    <span class="info">选择画笔大小：</span>
+                    <progress
+                        :value="progressValue"
+                        style="cursor: pointer;"
+                        id="progress"
+                        max="1"
+                        :title="progressValue * 100 + '%'"
+                        @click="setPenWidth"
+                    >
+                    </progress>
+                    <span style="margin-left: 0.3125rem;"
+                        >{{ 20 * progressValue }}px</span
+                    >
+                </div>
+            </template>
+            <template v-slot:export>
+                <div class="section">
+                    <span class="info">输出画板内容到下面的图片：</span>
+                    <button class="btn" @click="createImage()">EXPORT</button>
+                </div>
+                <img id="image_png" />
+            </template>
+        </j-tab-bar>
+        <template v-if="!toolsTabList">
+            <div class="section">
+                <button class="btn" @click="setBackGround()">清空画布</button>
+            </div>
+            <div class="section">
+                <span class="info">选择画笔颜色：</span>
+                <input class="input-color" type="color" v-model="penColor" />
+            </div>
+            <div class="section">
+                <span class="info">设置背景颜色：</span>
+                <input
+                    class="input-color"
+                    type="color"
+                    v-model="brackGroudColor"
+                />
+            </div>
+            <div class="section">
+                <span class="info">选择橡皮擦：</span>
+                <button
+                    class="btn colorBtn"
+                    :style="'background-color:' + brackGroudColor + ';'"
+                    @click="setPenColor()"
+                >
+                    {{ brackGroudColor }}
+                </button>
+            </div>
+            <div class="section">
+                <span class="info">选择画笔大小：</span>
+                <progress
+                    :value="progressValue"
+                    style="cursor: pointer;"
+                    id="progress"
+                    max="1"
+                    :title="progressValue * 100 + '%'"
+                    @click="setPenWidth"
+                >
+                </progress>
+                <span style="margin-left: 0.3125rem;"
+                    >{{ 20 * progressValue }}px</span
+                >
+            </div>
+            <div class="section">
+                <span class="info">输出画板内容到下面的图片：</span>
+                <button class="btn" @click="createImage()">EXPORT</button>
+            </div>
+            <img id="image_png" />
+        </template>
+    </div>
 </template>
 
 <script>
-	import JTabBar from '../../pagesTools/JTabBar.vue';
-	export default{
-		name:'JCanvasBroad',
-		props:{
-			height:{
-				type:Number,
-				default:-1
-			},
-			width:{
-				type:Number,
-				default:-1
-			},
-			defaultPenColor:{
-				type:String,
-				default:'#000000'
-			},
-			defaultPenSize:{
-				type:Number,
-				default:4
-			},
-			defaultBackGroundColor:{
-				type:String,
-				default:"#ffffff"
-			},
-			toolsTabList:{
-				type:Boolean,
-				default:false
-			}
-		},
-		components:{
-			JTabBar
-		},
-		watch:{
-			brackGroudColor:{
-				handler(newVal,oldVal){
-					this.setBackGround();
-				}
-			}
-		},
-		data() {
-			return{
-				penColor:"#000000",
-				penWidth:4,
-				penClick:false,
-				startAxisX:0,
-				startAxisY:0,
-				brackGroudColor:"#ffffff",
-				progressValue:0.2,
-				tabList:[{
-					label:'背景颜色',
-					id:'back-ground-color'
-				},{
-					label:'画笔颜色',
-					id:'pen-color'
-				},{
-					label:'橡皮擦',
-					id:'eraser'
-				},{
-					label:'画笔大小',
-					id:'pen-size'
-				},{
-					label:'导出图片',
-					id:'export'
-				}],
-				showTab:0
-			}
-		},
-		created(){
-			
-		},
-		mounted() {
-			this.init();
-		},
-		methods:{
-			//页面初始化
-			init(){
-				let height = this.height;
-				let width = this.width;
-				if(width == -1){
-					const cbw = document.getElementById('canvas-broad');
-					width = cbw.offsetWidth * 0.9;
-					height = cbw.offsetHeight * 0.6;
-					this.width = width;
-					this.height = height;
-				}
-				this.penColor = this.defaultPenColor;
-				this.brackGroudColor = this.defaultBackGroundColor;
-				this.penWidth = this.defaultPenSize;
-				
-				let canvas = document.getElementById('canvas'); //获取canvas标签
-				let ctx = canvas.getContext("2d");//创建 context 对象
-				ctx.fillStyle = this.brackGroudColor;//画布背景色
-				ctx.fillRect(0,0,width,height);//在画布上绘制 width * height 的矩形，从左上角开始 (0,0)
-				canvas.addEventListener("mousemove",this.drawing); //鼠标移动事件
-				canvas.addEventListener("mousedown",this.penDown); //鼠标按下事件
-				canvas.addEventListener("mouseup",this.penUp); //鼠标弹起事件
-			},
-			getWidthSelect(width){
-				if(width == this.penWidth){
-					return "btn bg penBtn fw"
-				}
-				return "btn bg penBtn"
-			},
-			getColorSelect(color){
-				if(color == this.penColor){
-					return 'btn colorBtn fw'
-				}
-				return 'btn colorBtn';
-			},
-			setBackGround(){
-				const canvas = document.getElementById('canvas'); //获取canvas标签
-				const ctx = canvas.getContext("2d");//创建 context 对象
-				ctx.fillStyle = this.brackGroudColor;//画布背景色
-				ctx.fillRect(0,0,this.width,this.height);//在画布上绘制 600x300 的矩形，从左上角开始 (0,0)
-			},
-			setPenWidth(event){
-				const progress = document.getElementById('progress');
-				this.progressValue = (event.pageX - progress.offsetLeft) / progress.offsetWidth;
-				this.penWidth = 20 * this.progressValue;
-			},
-			//设置画笔颜色
-			setPenColor(color = ''){
-				if(color == '') this.penColor = this.brackGroudColor;
-			    else this.penColor = color;
-			},
-			penDown(event){
-			    this.penClick = true;
-			    this.startAxisX = event.pageX;
-			    this.startAxisY = event.pageY;
-			},
-			penUp(){
-			    this.penClick = false;
-			},
-			drawing(event){
-			    if(!this.penClick) return;
-				const canvas = document.getElementById('canvas'); //获取canvas标签
-				const ctx = canvas.getContext("2d");//创建 contextconst canvas = document.getElementById('canvas');  对象
-			    const stopAxisX = event.pageX;
-			    const stopAxisY = event.pageY;
-				const left = document.getElementById('leftMenu');
-				const lw = left && left.offsetWidth ? (left.offsetWidth || 0) / 2 : 0;
-			    ctx.beginPath();
-			    //由于整体设置了水平居中，因此需要做特殊处理：window.screen.availWidth/2 -300
-				const wsaW = window.screen.availWidth;
-				const cl = canvas.offsetLeft;
-				const ct = canvas.offsetTop;
-			    ctx.moveTo(this.startAxisX-cl,this.startAxisY - ct);//moveTo(x,y) 定义线条开始坐标
-			    ctx.lineTo(stopAxisX-cl,stopAxisY - ct	);//lineTo(x,y) 定义线条结束坐标
-			    ctx.strokeStyle = this.penColor;
-			    ctx.lineWidth = this.penWidth;
-			    ctx.lineCap = "round";
-			    ctx.stroke();// stroke() 方法来绘制线条
-			    this.startAxisX = stopAxisX;
-			    this.startAxisY = stopAxisY;
-			},
-			createImage() {
-				console.log('-------');
-				const canvas = document.getElementById('canvas'); //获取canvas标签
-			    const img_png_src = canvas.toDataURL("image/png"); //将画板保存为图片格式的函数
-			    // console.log('=====',img_png_src);//data:image/png;base64,iVBOR.....
-			    document.getElementById("image_png").src = img_png_src;
-			}
-		}
-	}
+import JTabBar from "../../pagesTools/JTabBar.vue";
+export default {
+    name: "JCanvasBroad",
+    props: {
+        height: {
+            type: Number,
+            default: -1
+        },
+        width: {
+            type: Number,
+            default: -1
+        },
+        defaultPenColor: {
+            type: String,
+            default: "#000000"
+        },
+        defaultPenSize: {
+            type: Number,
+            default: 4
+        },
+        defaultBackGroundColor: {
+            type: String,
+            default: "#ffffff"
+        },
+        toolsTabList: {
+            type: Boolean,
+            default: false
+        }
+    },
+    components: {
+        JTabBar
+    },
+    watch: {
+        brackGroudColor: {
+            handler(newVal, oldVal) {
+                this.setBackGround();
+            }
+        }
+    },
+    data() {
+        return {
+            penColor: "#000000",
+            penWidth: 4,
+            penClick: false,
+            startAxisX: 0,
+            startAxisY: 0,
+            brackGroudColor: "#ffffff",
+            progressValue: 0.2,
+            tabList: [
+                {
+                    label: "背景颜色",
+                    id: "back-ground-color"
+                },
+                {
+                    label: "画笔颜色",
+                    id: "pen-color"
+                },
+                {
+                    label: "橡皮擦",
+                    id: "eraser"
+                },
+                {
+                    label: "画笔大小",
+                    id: "pen-size"
+                },
+                {
+                    label: "导出图片",
+                    id: "export"
+                }
+            ],
+            showTab: 0
+        };
+    },
+    created() {},
+    mounted() {
+        this.init();
+    },
+    methods: {
+        //页面初始化
+        init() {
+            let height = this.height;
+            let width = this.width;
+            if (width == -1) {
+                const cbw = document.getElementById("canvas-broad");
+                width = cbw.offsetWidth * 0.9;
+                height = cbw.offsetHeight * 0.6;
+                this.width = width;
+                this.height = height;
+            }
+            this.penColor = this.defaultPenColor;
+            this.brackGroudColor = this.defaultBackGroundColor;
+            this.penWidth = this.defaultPenSize;
+
+            let canvas = document.getElementById("canvas"); //获取canvas标签
+            let ctx = canvas.getContext("2d"); //创建 context 对象
+            ctx.fillStyle = this.brackGroudColor; //画布背景色
+            ctx.fillRect(0, 0, width, height); //在画布上绘制 width * height 的矩形，从左上角开始 (0,0)
+            canvas.addEventListener("mousemove", this.drawing); //鼠标移动事件
+            canvas.addEventListener("mousedown", this.penDown); //鼠标按下事件
+            canvas.addEventListener("mouseup", this.penUp); //鼠标弹起事件
+        },
+        getWidthSelect(width) {
+            if (width == this.penWidth) {
+                return "btn bg penBtn fw";
+            }
+            return "btn bg penBtn";
+        },
+        getColorSelect(color) {
+            if (color == this.penColor) {
+                return "btn colorBtn fw";
+            }
+            return "btn colorBtn";
+        },
+        setBackGround() {
+            const canvas = document.getElementById("canvas"); //获取canvas标签
+            const ctx = canvas.getContext("2d"); //创建 context 对象
+            ctx.fillStyle = this.brackGroudColor; //画布背景色
+            ctx.fillRect(0, 0, this.width, this.height); //在画布上绘制 600x300 的矩形，从左上角开始 (0,0)
+        },
+        setPenWidth(event) {
+            const progress = document.getElementById("progress");
+            this.progressValue =
+                (event.pageX - progress.offsetLeft) / progress.offsetWidth;
+            this.penWidth = 20 * this.progressValue;
+        },
+        //设置画笔颜色
+        setPenColor(color = "") {
+            if (color == "") this.penColor = this.brackGroudColor;
+            else this.penColor = color;
+        },
+        penDown(event) {
+            this.penClick = true;
+            this.startAxisX = event.pageX;
+            this.startAxisY = event.pageY;
+        },
+        penUp() {
+            this.penClick = false;
+        },
+        drawing(event) {
+            if (!this.penClick) return;
+            const canvas = document.getElementById("canvas"); //获取canvas标签
+            const ctx = canvas.getContext("2d"); //创建 contextconst canvas = document.getElementById('canvas');  对象
+            const stopAxisX = event.pageX;
+            const stopAxisY = event.pageY;
+            const left = document.getElementById("leftMenu");
+            const lw =
+                left && left.offsetWidth ? (left.offsetWidth || 0) / 2 : 0;
+            ctx.beginPath();
+            //由于整体设置了水平居中，因此需要做特殊处理：window.screen.availWidth/2 -300
+            const wsaW = window.screen.availWidth;
+            const cl = canvas.offsetLeft;
+            const ct = canvas.offsetTop;
+            ctx.moveTo(this.startAxisX - cl, this.startAxisY - ct); //moveTo(x,y) 定义线条开始坐标
+            ctx.lineTo(stopAxisX - cl, stopAxisY - ct); //lineTo(x,y) 定义线条结束坐标
+            ctx.strokeStyle = this.penColor;
+            ctx.lineWidth = this.penWidth;
+            ctx.lineCap = "round";
+            ctx.stroke(); // stroke() 方法来绘制线条
+            this.startAxisX = stopAxisX;
+            this.startAxisY = stopAxisY;
+        },
+        createImage() {
+            console.log("-------");
+            const canvas = document.getElementById("canvas"); //获取canvas标签
+            const img_png_src = canvas.toDataURL("image/png"); //将画板保存为图片格式的函数
+            // console.log('=====',img_png_src);//data:image/png;base64,iVBOR.....
+            document.getElementById("image_png").src = img_png_src;
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped="scoped">
-	*{
-	    margin: 0;
-	    padding: 0;
-	}
-	#canvas-broad{
-	    margin: 0 auto;
-	    /*text-align: center;*/
-	}
-	#canvas{
-	    border: 2px solid #ff6700;
-	    cursor:crosshair;
-	    /*不能用这种方式给canvas设置宽高*/
-	    /*width: 600px;*/
-	    /*height: 300px;*/
-	}
-	.btn{
-	    width:70px;
-	    height: 40px;
-	    border-radius: 10px;
-	    border: 1px solid #aaa;/*去掉<button>默认边框*/
-	    outline:none;/*去掉<button>选中时的默认边框*/
-		cursor: pointer;
-	}
-	.input-color{
-	    width:70px;
-	    height: 40px;
-	    border-radius: 10px;
-	    border: 0;/*去掉<button>默认边框*/
-	    outline:none;/*去掉<button>选中时的默认边框*/
-	}
-	#image_png{
-	    width: 300px;
-	    height: 150px;
-	    border:  2px solid #ff6700;
-	    display: block;
-	    margin: 10px auto;
-	 }
-	.section{
-	    margin-top: 10px;
-	}
-	.info{
-	    color: #f0f;
-	    font-size: 14px;
-	    line-height: 40px;
-	}
-	.bg{
-	    background: #ff6700;
-	}
-	.fw{
-	    font-weight: 700;
-	}
+* {
+    margin: 0;
+    padding: 0;
+}
+#canvas-broad {
+    margin: 0 auto;
+    /*text-align: center;*/
+}
+#canvas {
+    border: 2px solid #ff6700;
+    cursor: crosshair;
+    /*不能用这种方式给canvas设置宽高*/
+    /*width: 600px;*/
+    /*height: 300px;*/
+}
+.btn {
+    width: 70px;
+    height: 40px;
+    border-radius: 10px;
+    border: 1px solid #aaa; /*去掉<button>默认边框*/
+    outline: none; /*去掉<button>选中时的默认边框*/
+    cursor: pointer;
+}
+.input-color {
+    width: 70px;
+    height: 40px;
+    border-radius: 10px;
+    border: 0; /*去掉<button>默认边框*/
+    outline: none; /*去掉<button>选中时的默认边框*/
+}
+#image_png {
+    width: 300px;
+    height: 150px;
+    border: 2px solid #ff6700;
+    display: block;
+    margin: 10px auto;
+}
+.section {
+    margin-top: 10px;
+}
+.info {
+    color: #f0f;
+    font-size: 14px;
+    line-height: 40px;
+}
+.bg {
+    background: #ff6700;
+}
+.fw {
+    font-weight: 700;
+}
 </style>
diff --git a/JYeontuComponentWarehouse/packages/JCodeHeightLight/index.js b/JYeontuComponentWarehouse/packages/JCodeHeightLight/index.js
index 9263964fea478382994aa6abc4481e09fcbb8e90..826eb7ee26f21543f4490ace7efdc3e4b8a74f1b 100644
--- a/JYeontuComponentWarehouse/packages/JCodeHeightLight/index.js
+++ b/JYeontuComponentWarehouse/packages/JCodeHeightLight/index.js
@@ -1,5 +1,6 @@
-import JCodeHeightLight from './src/JCodeHeightLight.vue';
+import JCodeHeightLight from "./src/JCodeHeightLight.vue";
 
-JCodeHeightLight.install = Vue => Vue.component(JCodeHeightLight.name, JCodeHeightLight);//注册组件
+JCodeHeightLight.install = Vue =>
+    Vue.component(JCodeHeightLight.name, JCodeHeightLight); //注册组件
 
-export default JCodeHeightLight
\ No newline at end of file
+export default JCodeHeightLight;
diff --git a/JYeontuComponentWarehouse/packages/JCodeHeightLight/src/JCodeHeightLight.vue b/JYeontuComponentWarehouse/packages/JCodeHeightLight/src/JCodeHeightLight.vue
index 23aafe0a93b6bb28726715381f2f0db6c808ebc7..56e647a46f05b19af0b1e5ddc8be54bddb5b5793 100644
--- a/JYeontuComponentWarehouse/packages/JCodeHeightLight/src/JCodeHeightLight.vue
+++ b/JYeontuComponentWarehouse/packages/JCodeHeightLight/src/JCodeHeightLight.vue
@@ -1,296 +1,408 @@
 <template>
-  <div id="code-height-light" class="code-height-light">
-    <input id="copy_content" type="text" value=""  style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"/>
-    <div class="content">
-      <div class="content-head" :icon="isCodeShow ? '∨' : '>'" @click="doShowCode()">
-        <span class="content-head-text">
-          {{isCodeShow ? "收起代码" : "查看代码"}}
-        </span>
-      </div>
-	<div class="code-copy" @click="copyCode()">复制代码</div>
-      <div class="content-body" v-show="isCodeShow">
-		<pre id="content-code-html" class="content-code-html"></pre>
-        <pre id="content-code" class="content-code"></pre>
-      </div>
+    <div id="code-height-light" class="code-height-light">
+        <input
+            id="copy_content"
+            type="text"
+            value=""
+            style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;"
+        />
+        <div class="content">
+            <div
+                class="content-head"
+                :icon="isCodeShow ? '∨' : '>'"
+                @click="doShowCode()"
+            >
+                <span class="content-head-text">
+                    {{ isCodeShow ? "收起代码" : "查看代码" }}
+                </span>
+            </div>
+            <div class="code-copy" @click="copyCode()">复制代码</div>
+            <div class="content-body" v-show="isCodeShow">
+                <pre id="content-code-html" class="content-code-html"></pre>
+                <pre id="content-code" class="content-code"></pre>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: "JCodeHeightLight",
-  //import引入的组件需要注入到对象中才能使用",
-  components: {},
-  props: {
-    code: {
-      type: String,
-      default: ""
+    name: "JCodeHeightLight",
+    //import引入的组件需要注入到对象中才能使用",
+    components: {},
+    props: {
+        code: {
+            type: String,
+            default: ""
+        },
+        keyWords: {
+            type: Array,
+            default: []
+        },
+        color: {
+            type: Object,
+            default: {
+                keyWord: "orange",
+                varWord: "purple",
+                tagWord: "#F9273F",
+                strWord: "green",
+                attrWord: "green",
+                attrValue: "yellow",
+                methodkeyWord: "#74759b",
+                functionkeyWord: "#2c9678",
+                note: "grey"
+            }
+        }
     },
-	keyWords:{
-		type:Array,
-		default:[]
-	},
-    color:{
-      type: Object,
-      default: {
-        keyWord:'orange',
-        varWord:'purple',
-        tagWord:'#F9273F',
-        strWord:'green',
-        attrWord:'green',
-        attrValue:'yellow',
-		methodkeyWord:'#74759b',
-		functionkeyWord:'#2c9678',
-		note:'grey'
-      }
-    }
-  },
-  data() {
-    //这里存放数据",
-    return {
-        icon:'>',
-        isCodeShow:true,
-        showCode:'',
-	    htmlCode:'',
-		jsKeyWord:['import','from','require','let',
-					'var','const','this','true','false',
-					'case','continue','double','for',
-					'package','try','catch','if','while',
-					'else','false','switch','export',
-					'return','null','break','delete','alert','default'],
-		jsKeyObj:['Array','Date','eval','function','hasOwnProperty',
-				'Infinity','isFinite','isNaN','isPrototypeOf','length',
-				'Math','NaN','name','Number','Object','prototype',
-				'String','toString','undefined','valueOf']
-    };
-  },
-  //监听属性 类似于data概念",
-  computed: {},
-  //监控data中的数据变化",
-  watch: {},
-  //方法集合",
-  methods: {
-    doShowCode(){
-      if(this.isCodeShow){
-        this.isCodeShow = false;
-        this.icon = ">";
-      }else{
-        this.isCodeShow = true;
-        this.icon = "∨";
-      }
-    },
-    copyCode(){
-      //获取点击的值
-      var clickContent = this.code;
-      //获取要赋值的input的元素
-      var inputElement =  document.getElementById("copy_content");
-      //给input框赋值
-      inputElement.value = clickContent;
-      //选中input框的内容
-      inputElement.select();
-      // 执行浏览器复制命令
-      document.execCommand("Copy");
-      //提示已复制
-      alter('已复制');
+    data() {
+        //这里存放数据",
+        return {
+            icon: ">",
+            isCodeShow: true,
+            showCode: "",
+            htmlCode: "",
+            jsKeyWord: [
+                "import",
+                "from",
+                "require",
+                "let",
+                "var",
+                "const",
+                "this",
+                "true",
+                "false",
+                "case",
+                "continue",
+                "double",
+                "for",
+                "package",
+                "try",
+                "catch",
+                "if",
+                "while",
+                "else",
+                "false",
+                "switch",
+                "export",
+                "return",
+                "null",
+                "break",
+                "delete",
+                "alert",
+                "default",
+                "console",
+                "log",
+                "error"
+            ],
+            jsKeyObj: [
+                "Array",
+                "Date",
+                "eval",
+                "function",
+                "hasOwnProperty",
+                "Infinity",
+                "isFinite",
+                "isNaN",
+                "isPrototypeOf",
+                "length",
+                "Math",
+                "NaN",
+                "name",
+                "Number",
+                "Object",
+                "prototype",
+                "String",
+                "toString",
+                "undefined",
+                "valueOf"
+            ],
+            methodKeyWord: ["setTimeout", "toString", "praseInt", "praseFloat"]
+        };
     },
-	t(str){
-		console.log('aaa'+str);
-		return 'aaa' + str;
-	},
-	getColor(type,str){
-		let res = '';
-		let color = this.color;
-		res = '<span style="color :'+ color[type] +'">'+ str +'</span>';
-		return res;
-	},
-    replaceKeyWord(){
-      let colors = this.color;
-	  const contentCodeHtml = document.getElementById('content-code-html');
-      let showCode = this.code;
-      //html标签
-      let htmlReg = /.*<(.|[\r\n])*>(.|[\r\n])*<.*>/g;
-	  let textCode = showCode.match(htmlReg);
-	  if(textCode != null){
-		textCode = textCode.join('\n');
-		textCode = textCode.replace(/[\r]/g,'tab缩进');
-		textCode = textCode.replace(/[\n]/g,'换行符');
-		let tagReg = /((<)([a-zA-Z](-*[a-zA-Z])+)(.*)(>))|((<\/)([a-zA-Z](-*[a-zA-Z])+)(>))/g
-		textCode = textCode.replace(tagReg,(s1,s2,s3,s4,s5,s6,s7,s8,s9,s10) => {
-				  let res = '';
-				  if(s4 == undefined) return '<span>' + s1 + '</span>';
-				  res += '<span><<span>' + this.getColor('tagWord',s4) + ' ';
-				  let text = s6.match(/>(.*)</);
-				  if(text && text.length > 1){
-					  text = text[1];
-				  }else{
-					  text = '';
-				  }
-				  s6 = s6.split(/>.*<\//);
-				  s6 = s6[0];
-				  s6 = s6.replace(/ *= */g,'=');
-				  s6 = s6.split(' ');
-				  for(let i = 0; i < s6.length; i++){
-					  if(s6[i] !== ''){
-						  let t = s6[i].split('=');
-						  if(t.length == 2){
-							  res += this.getColor('attrWord',t[0]);
-							  res += ' = ';
-							  res += this.getColor('attrValue',t[1]);
-							  if(i < s6.length - 1) res += ' ';
-						  }
-					  }
-				  }
-				  res += '<span>>' + text + '<</span>/' + this.getColor('tagWord',s4) + '<span>></span>';
-				  return(res);
-		})
-		textCode.replace(/(<!--)(.*)(-->)/g,"<pre ></pre>");
-		textCode = textCode.replace(/换行符/g,'<br/>');
-		contentCodeHtml.innerHTML = textCode;
-		
-		showCode = showCode.replace(new RegExp(htmlReg,'g'),"");
-	  }else{
-		contentCodeHtml.style.display='none';
-	  }
-	  
-	  // showCode = showCode.replace(/[\t]/g,'\t ')
-	  
-      //字符串
-      let regStr = '\'(.*)\'';
-      showCode = showCode.replace(new RegExp(regStr,'g'),"<span style='color : " + colors.strWord + "'>'$1'</span>");
-      
-      //js关键字
-      let keyWord = [...this.jsKeyWord];
-      keyWord = keyWord.concat([...this.jsKeyObj]);
-      for(let i = 0; i < keyWord.length; i++){
-        let regKeyWord = '((([\\t|\\r|\\n| ])*('+ keyWord[i] + '))( |,|\\.|\\(|;))';
-        showCode = showCode.replace(new RegExp(regKeyWord,'g'),"<span style='color : " + colors.keyWord + "'>$2</span>$5");
-        // console.log('------',reg,keyWord[i],code);
-      }
-	  
-	  //自定义关键字
-	  let keyWords = [...this.keyWords];
-	  for(let i = 0; i < keyWords.length; i++){
-	    let regKeyWord = '('+ keyWords[i].value + ')';
-	    showCode = showCode.replace(new RegExp(regKeyWord,'g'),"<span style='color : " + keyWords[i].color + " !important;'>$1</span>");
-	  }
-	  
-	  //js方法
-	  let functions = /([a-zA-Z0-9_]+)\(\)/g;
-	  let functionKeyWord = showCode.match(functions) || [];
-	  functionKeyWord = functionKeyWord.map((item) => {
-							return item.slice(0,item.length - 2)
-						})
-	  for(let i = 0; i < functionKeyWord.length; i++){
-	    let regFunctionKeyWord = '('+ functionKeyWord[i] + ')';
-	    showCode = showCode.replace(new RegExp(regFunctionKeyWord,'g'),"<span style='color : " + colors.functionkeyWord + "'>$1</span>");
-	  }
-	  
-	  let methodKeyWord = ['setTimeout','toString','praseInt','praseFloat'];
-	  for(let i = 0; i < methodKeyWord.length; i++){
-	    let regMethodKeyWord = '('+ methodKeyWord[i] + ')';
-	    showCode = showCode.replace(new RegExp(regMethodKeyWord,'g'),"<span style='color : " + colors.methodkeyWord + "'>$1</span>");
-	    // console.log('------',regMethodKeyWord,methodKeyWord[i]);
-	  }
-	  
-      //变量名
-      // let varReg = '( .+)(:)({|\[|<span style=)';
-	  let varReg = /([a-zA-Z]+):/g
-	  // console.log(showCode.match(varReg,'g'));
-      showCode = showCode.replace(varReg,"<span style='color : " + colors.varWord + "'>$1</span>:");
-	  //greyWords
-	  showCode = showCode.replace(/(\/\/.*)|(\/\*.*([\r\n].*)*\*\/)/g,"<span style='color :"+ colors.note +"'>$1$2</span>")
-
-      this.showCode = showCode;
-    }
-  },
-  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
-  beforeCreate() {
-  },
-
-  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
-  created() {
-
-  },
-  //生命周期 - 挂载之前",html模板未渲染
-  beforeMount() {
+    //监听属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+        doShowCode() {
+            if (this.isCodeShow) {
+                this.isCodeShow = false;
+                this.icon = ">";
+            } else {
+                this.isCodeShow = true;
+                this.icon = "∨";
+            }
+        },
+        copyCode() {
+            //获取点击的值
+            var clickContent = this.code;
+            //获取要赋值的input的元素
+            var inputElement = document.getElementById("copy_content");
+            //给input框赋值
+            inputElement.value = clickContent;
+            //选中input框的内容
+            inputElement.select();
+            // 执行浏览器复制命令
+            document.execCommand("Copy");
+            //提示已复制
+            alter("已复制");
+        },
+        getColor(type, str) {
+            let res = "";
+            let color = this.color;
+            res = '<span style="color :' + color[type] + '">' + str + "</span>";
+            return res;
+        },
+        findTag(text) {
+            let l = [],
+                r = [];
+            let res = [];
+            for (let i = 0; i < text.length; i++) {
+                if (text[i] == "<") {
+                    if (text[i + 1] == "!") continue;
+                    if (text[i + 1] == "/") {
+                        let j = i + 2;
+                        while (text[j] != ">") {
+                            j++;
+                        }
+                        res.push(text.slice(l.pop(), j + 1));
+                    } else {
+                        l.push(i);
+                    }
+                }
+            }
+            return res;
+        },
+        replaceDfs(tagReg, textCode) {
+            let res = textCode.replace(
+                tagReg,
+                (s1, s2, s3, s4, s5, s6, s7, s8, s9, s10) => {
+                    let res = "";
+                    if (s4 == undefined) return "<span>" + s1 + "</span>";
+                    res += "<span><<span>" + this.getColor("tagWord", s4) + " ";
+                    let text = s6.match(/>(.*)</);
+                    if (text && text.length > 1) {
+                        text = text[1];
+                    } else {
+                        text = "";
+                    }
+                    s6 = s6
+                        .split(/>.*<\//)[0]
+                        .replace(/ *= */g, "=")
+                        .split(" ");
+                    for (let i = 0; i < s6.length; i++) {
+                        if (s6[i] !== "") {
+                            let t = s6[i].split("=");
+                            if (t.length == 2) {
+                                res += this.getColor("attrWord", t[0]);
+                                res += " = ";
+                                res += this.getColor("attrValue", t[1]);
+                                if (i < s6.length - 1) res += " ";
+                            } else {
+                                t = s6[i].split(":");
+                                if (t.length == 2) {
+                                    res += this.getColor("attrWord", t[0]);
+                                    res += ":";
+                                    res += this.getColor("attrValue", t[1]);
+                                    if (i < s6.length - 1) res += " ";
+                                }
+                            }
+                        }
+                    }
+                    res +=
+                        "<span>>" +
+                        text +
+                        "<</span>/" +
+                        this.getColor("tagWord", s4) +
+                        "<span>></span>";
+                    return res;
+                }
+            );
+            return res;
+        },
+        replaceKeyWord() {
+            let colors = this.color;
+            const contentCodeHtml = document.getElementById(
+                "content-code-html"
+            );
+            let showCode = this.code;
+            //html标签
+            let htmlReg = /.*<(.|[\r\n])*>(.|[\r\n])*<\/.*>/g;
+            let textCode = showCode.match(htmlReg);
+            if (textCode != null) {
+                textCode = textCode
+                    .join("\n")
+                    .replace(/[\t]/g, "缩进符")
+                    .replace(/[\n]/g, "换行符");
+                let tagReg = /((<)([a-zA-Z](-*[a-zA-Z])+)(.*)(>))|((<\/)([a-zA-Z](-*[a-zA-Z])+)(>))/g;
+                let t = this.findTag(textCode);
+                for (let i = 0; i < t.length; i++) {
+                    textCode = textCode.replace(
+                        t[t.length - 1 - i],
+                        this.replaceDfs(tagReg, t[t.length - 1 - i])
+                    );
+                }
+                textCode = textCode.replace(
+                    /(<!--)(.*)(-->)/g,
+                    '<span style="color:' +
+                        colors.note +
+                        ';"><span><</span><span>!--</span>$2<span>--</span><span>></span>'
+                );
+                textCode = textCode.replace(/换行符/g, "<br/>");
+                textCode = textCode.replace(/缩进符/g, "&nbsp;&nbsp;");
+                contentCodeHtml.innerHTML = textCode;
+                showCode = showCode.replace(new RegExp(htmlReg, "g"), "");
+            } else {
+                contentCodeHtml.style.display = "none";
+            }
 
-  },
+            //字符串
+            let regStr = "('|\")(.*)('|\")";
+            showCode = showCode.replace(
+                new RegExp(regStr, "g"),
+                "<span style='color : " + colors.strWord + "'>$1$2$3</span>"
+            );
 
-  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
-  mounted() {
-    let contentCode = document.getElementById('content-code');
-    this.replaceKeyWord();
-    contentCode.innerHTML = this.showCode;
-  },
+            //js关键字
+            let keyWord = [...this.jsKeyWord];
+            keyWord = keyWord.concat([...this.jsKeyObj]);
+            for (let i = 0; i < keyWord.length; i++) {
+                let regKeyWord =
+                    "((([\\t|\\r|\\n| ])*(" + keyWord[i] + "))( |,|\\.|\\(|;))";
+                showCode = showCode.replace(
+                    new RegExp(regKeyWord, "g"),
+                    "<span style='color : " + colors.keyWord + "'>$2</span>$5"
+                );
+            }
 
-  //生命周期 - 更新之前",数据模型已更新,html模板未更新
-  beforeUpdate() {
+            //自定义关键字
+            let keyWords = [...this.keyWords];
+            for (let i = 0; i < keyWords.length; i++) {
+                let regKeyWord = "(" + keyWords[i].value + ")";
+                showCode = showCode.replace(
+                    new RegExp(regKeyWord, "g"),
+                    "<span style='color : " +
+                        keyWords[i].color +
+                        " !important;'>$1</span>"
+                );
+            }
 
-  },
-  //生命周期 - 更新之后",数据模型已更新,html模板已更新
-  updated() {
+            //js方法
+            let functions = /([a-zA-Z0-9_]+)\([A-Za-z,0-9]*\)/g;
+            let functionKeyWord = showCode.match(functions) || [];
+            functionKeyWord = functionKeyWord
+                .map(item => {
+                    return item.slice(0, item.indexOf("("));
+                })
+                .sort((a, b) => {
+                    return b.length - a.length;
+                });
+            for (let i = 0; i < functionKeyWord.length; i++) {
+                let regFunctionKeyWord = "(" + functionKeyWord[i] + ")";
+                showCode = showCode.replace(
+                    new RegExp(regFunctionKeyWord, "g"),
+                    "<span style='color : " +
+                        colors.functionkeyWord +
+                        "'>$1</span>"
+                );
+            }
+            //内置方法
+            let methodKeyWord = [...methodKeyWord];
+            for (let i = 0; i < methodKeyWord.length; i++) {
+                let regMethodKeyWord = "(" + methodKeyWord[i] + ")";
+                showCode = showCode.replace(
+                    new RegExp(regMethodKeyWord, "g"),
+                    "<span style='color : " +
+                        colors.methodkeyWord +
+                        "'>$1</span>"
+                );
+            }
 
-  },
-  //生命周期 - 销毁之前",
-  beforeDestroy() {
+            //变量名
+            let varReg = /([a-zA-Z]+):/g;
+            showCode = showCode.replace(
+                varReg,
+                "<span style='color : " + colors.varWord + "'>$1</span>:"
+            );
+            showCode = showCode.replace(
+                /(\/\/.*)|(\/\*.*([\r\n].*)*\*\/)/g,
+                "<span style='color :" + colors.note + "'>$1$2</span>"
+            );
+            this.showCode = showCode;
+        }
+    },
+    //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
+    beforeCreate() {},
 
-  },
-  destroyed() {
+    //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
+    created() {},
+    //生命周期 - 挂载之前",html模板未渲染
+    beforeMount() {},
 
-  },
-  //生命周期 - 销毁完成",
-  //如果页面有keep-alive缓存功能，这个函数会触发",
-  activated() {
+    //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
+    mounted() {
+        let contentCode = document.getElementById("content-code");
+        this.replaceKeyWord();
+        contentCode.innerHTML = this.showCode;
+    },
 
-  },
-}
+    //生命周期 - 更新之前",数据模型已更新,html模板未更新
+    beforeUpdate() {},
+    //生命周期 - 更新之后",数据模型已更新,html模板已更新
+    updated() {},
+    //生命周期 - 销毁之前",
+    beforeDestroy() {},
+    destroyed() {},
+    //生命周期 - 销毁完成",
+    //如果页面有keep-alive缓存功能，这个函数会触发",
+    activated() {}
+};
 </script>
 
 <style lang="scss" scoped>
-	.code-height-light{
-        background-color: #111827;
-		.content{
-		  .content-head{
-		    background-color: grey;
-		    height: 2rem;
-		    .content-head-text{
-		      line-height: 2rem;
-		    }
-		    &:after{
-		      content: attr(icon);
-		      color: black;
-		      position: relative;
-		      float: right;
-		      font-size: x-large;
-		      margin-right: 10px;
-		      line-height: 2rem;
-		    }
-		  }
-		    .code-copy{
-		      cursor: pointer;
-		      color: white;
-			  text-align: right;
-		      padding: 0.2rem 0.5rem;
-			  
-		    }
-		  .content-body{
-		    max-height: 400px;
-		    overflow: scroll;
-			  #content-code-html{
-				text-align: left;
-				margin:0 auto;
-				background-color: #111827;
-				color: white;
-				padding-top: 1.5rem;
-			  }
-		    #content-code{
-		      text-align: left;
-		      margin:0 auto;
-		      background-color: #111827;
-		      color: white;
-		    }
-		  }
-		}
-	}
+.code-height-light {
+    background-color: #111827;
+    .content {
+        .content-head {
+            background-color: grey;
+            height: 2rem;
+            .content-head-text {
+                line-height: 2rem;
+            }
+            &:after {
+                content: attr(icon);
+                color: black;
+                position: relative;
+                float: right;
+                font-size: x-large;
+                margin-right: 10px;
+                line-height: 2rem;
+            }
+        }
+        .code-copy {
+            cursor: pointer;
+            color: white;
+            text-align: right;
+            padding: 0.2rem 0.5rem;
+        }
+        .content-body {
+            max-height: 400px;
+            overflow: scroll;
+            #content-code-html {
+                text-align: left;
+                margin: 0 auto;
+                background-color: #111827;
+                color: white;
+                padding-top: 1.5rem;
+            }
+            #content-code {
+                text-align: left;
+                margin: 0 auto;
+                background-color: #111827;
+                color: white;
+            }
+        }
+    }
+}
 </style>
-
diff --git a/JYeontuComponentWarehouse/packages/JDialog/index.js b/JYeontuComponentWarehouse/packages/JDialog/index.js
index d2df2dd7db3dd2b3e9d22008a2d396bc882d4db5..4c07f70c1323d4129e72bfec4c92e27d7783b5e3 100644
--- a/JYeontuComponentWarehouse/packages/JDialog/index.js
+++ b/JYeontuComponentWarehouse/packages/JDialog/index.js
@@ -1,5 +1,5 @@
-import JDialog from './src/JDialog.vue';
+import JDialog from "./src/JDialog.vue";
 
-JDialog.install = Vue => Vue.component(JDialog.name, JDialog);//注册组件
+JDialog.install = Vue => Vue.component(JDialog.name, JDialog); //注册组件
 
-export default JDialog
\ No newline at end of file
+export default JDialog;
diff --git a/JYeontuComponentWarehouse/packages/JDialog/src/JDialog.vue b/JYeontuComponentWarehouse/packages/JDialog/src/JDialog.vue
index 457f8c8e0276488db9c91acce9d6de46f7b337a0..49f6368c4764bfe1a560ffaabba3bee3fe0e72b8 100644
--- a/JYeontuComponentWarehouse/packages/JDialog/src/JDialog.vue
+++ b/JYeontuComponentWarehouse/packages/JDialog/src/JDialog.vue
@@ -1,50 +1,182 @@
 <template>
-	<div class="j-dialog">
-		<div class="mask" v-if="JDialogIsShow"></div>
-		<div class="j-dialog-content">
-			<div class="j-dialog-header">
-				<div class="j-dialog-header-title"></div>
-			</div>
-			<div class="j-dialog-main"></div>
-			<div class="j-dialog-footer"></div>
-		</div>
-		JDialog
-		<button>点我</button>
-	</div>
+    <div class="j-dialog">
+        <div class="mask" v-if="JDialogIsShow" @click="maskClick()"></div>
+        <div class="j-dialog-content" v-if="JDialogIsShow">
+            <div class="j-dialog-header">
+                <div class="j-dialog-header-title">
+                    <span class="title">{{ title }}</span>
+                    <span
+                        class="j-dialog-header-icon"
+                        @click="closeDialog()"
+                        title="关闭"
+                        >x</span
+                    >
+                </div>
+            </div>
+            <div class="j-dialog-main">
+                <slot name="j-dialog-main-content"></slot>
+            </div>
+            <div class="j-dialog-footer">
+                <div class="j-dialog-footer-btn">
+                    <div
+                        v-for="(item, index) in btnList"
+                        :key="index"
+                        class="btn"
+                        :style="getStyle(item.style)"
+                        @click="doClick(item.click)"
+                        :title="item.text"
+                    >
+                        {{ item.text }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <button @click="showDialog()">点我</button>
+    </div>
 </template>
 
 <script>
-	export default {
-		name:'JDialog',
-		props:{
-			
-		},
-		data:{
-			JDialogIsShow:false
-		}
-	}
+import { camelTo_ } from "../../utils/strTool";
+export default {
+    name: "JDialog",
+    props: {
+        title: {
+            type: String,
+            default: "我是标题"
+        },
+        closable: {
+            type: Boolean,
+            default: false
+        },
+        btnList: {
+            type: Array,
+            default: () => [
+                {
+                    text: "取消",
+                    style: {
+                        backgroundColor: "orangered"
+                    },
+                    click: "close"
+                },
+                {
+                    text: "确认",
+                    style: {
+                        backgroundColor: "seagreen"
+                    }
+                }
+            ]
+        }
+    },
+    data() {
+        return {
+            JDialogIsShow: false
+        };
+    },
+    methods: {
+        getStyle(obj) {
+            console.log(obj);
+            let res = "";
+            for (let k in obj) {
+                res += camelTo_(k) + ":" + obj[k] + ";";
+            }
+            console.log(res);
+            return res;
+        },
+        doClick(flag = "") {
+            if (flag == "close") {
+                this.closeDialog();
+            }
+            this.$emit(flag);
+        },
+        maskClick() {
+            this.JDialogIsShow = !this.closable;
+        },
+        showDialog() {
+            this.JDialogIsShow = true;
+        },
+        closeDialog() {
+            this.JDialogIsShow = false;
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped>
-	.j-dialog{
-		display: auto;
-		.mask{
-			background-color: dimgrey;
-			opacity: 0.7;
-			position: fixed;
-			width: 100vw;
-			height: 100vh;
-			z-index: 999;
-			top: 0;
-			left: 0;
-		}
-		.j-dialog-content{
-			border: #185D8C 1px solid;
-			width: 60vw;
-			// height: 60vh;
-			position: fixed;
-			margin: auto auto;
-			
-		}
-	}
+.j-dialog {
+    display: auto;
+    .mask {
+        background-color: dimgrey;
+        opacity: 0.7;
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        z-index: 999;
+        top: 0;
+        left: 0;
+    }
+    .j-dialog-content {
+        background-color: whitesmoke;
+        width: 60vw;
+        position: fixed;
+        top: 20vh;
+        left: 20vw;
+        z-index: 1000;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        .j-dialog-header {
+            border-bottom: 1px solid dimgrey;
+            height: 3rem;
+            line-height: 3rem;
+            text-align: left;
+            padding-left: 1rem;
+            .j-dialog-header-title {
+                .title {
+                    font-weight: bold;
+                }
+                .j-dialog-header-icon {
+                    // border: solid 1px black;
+                    float: right;
+                    height: 20px;
+                    width: 20px;
+                    line-height: 20px;
+                    text-align: center;
+                    border-radius: 50%;
+                    font-size: large;
+                    margin-right: 0.5rem;
+                    margin-top: 0.3rem;
+                    color: red;
+                    cursor: pointer;
+                }
+            }
+        }
+        .j-dialog-main {
+            min-height: 20vh;
+        }
+        .j-dialog-footer {
+            border-top: 1px solid dimgrey;
+            height: 2rem;
+            padding: 0.3rem;
+            .j-dialog-footer-btn {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                .btn {
+                    padding-top: 0.2rem;
+                    padding-bottom: 0.2rem;
+                    padding-left: 0.3rem;
+                    padding-right: 0.3rem;
+                    text-align: center;
+                    font-weight: bold;
+                    cursor: pointer;
+                }
+                .confirm-btn {
+                    background-color: seagreen;
+                }
+                .cancel-btn {
+                    background-color: orangered;
+                }
+            }
+        }
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/packages/JElectronicNumber/index.js b/JYeontuComponentWarehouse/packages/JElectronicNumber/index.js
index a86743f60e64228ae3bae77775a071bc534dd642..101aa45545ff47d722f9526986d81f4ec44efb4e 100644
--- a/JYeontuComponentWarehouse/packages/JElectronicNumber/index.js
+++ b/JYeontuComponentWarehouse/packages/JElectronicNumber/index.js
@@ -1,5 +1,6 @@
-import JElectronicNumber from './src/JElectronicNumber.vue';
+import JElectronicNumber from "./src/JElectronicNumber.vue";
 
-JElectronicNumber.install = Vue => Vue.component(JElectronicNumber.name, JElectronicNumber);//注册组件
+JElectronicNumber.install = Vue =>
+    Vue.component(JElectronicNumber.name, JElectronicNumber); //注册组件
 
-export default JElectronicNumber
\ No newline at end of file
+export default JElectronicNumber;
diff --git a/JYeontuComponentWarehouse/packages/JElectronicNumber/src/JElectronicNumber.vue b/JYeontuComponentWarehouse/packages/JElectronicNumber/src/JElectronicNumber.vue
index 00e9f09e4ac99c3a0a7a7796cded1ff60946f110..e433376222233ed1a414320f525ae6f6b73dc61d 100644
--- a/JYeontuComponentWarehouse/packages/JElectronicNumber/src/JElectronicNumber.vue
+++ b/JYeontuComponentWarehouse/packages/JElectronicNumber/src/JElectronicNumber.vue
@@ -1,266 +1,264 @@
 <template>
-  <div class="numbers-style" id="electronic-number">
-    <div v-for="(number,numberIndex) in numbers"
-         :key="numberIndex"
-         class="number-style">
-      <div v-for="(column,columnIndex) in getShowNum(number)"
-           :key="columnIndex"
-           class="column" >
-        <div v-for="(row,rowIndex) in column"
-             :key="rowIndex"
-             class="cell"
-             :style="rowStyle(row)">
+    <div class="numbers-style" id="electronic-number">
+        <div
+            v-for="(number, numberIndex) in numbers"
+            :key="numberIndex"
+            class="number-style"
+        >
+            <div
+                v-for="(column, columnIndex) in getShowNum(number)"
+                :key="columnIndex"
+                class="column"
+            >
+                <div
+                    v-for="(row, rowIndex) in column"
+                    :key="rowIndex"
+                    class="cell"
+                    :style="rowStyle(row)"
+                ></div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
 export default {
-  name: "JElectronicNumber",
-  props: {
-    numbers: {
-      type: Array,
-      default: [0,22]
-    },
-    numberColor: {
-      type: String,
-      default: 'black'
-    },
-    numberSize:{
-      type: String,
-      default: '1rem'
-    }
-  },
-  data() {
-    //这里存放数据",
-    return {
-      showNum:[]
-    };
-  },
-  //监听属性 类似于data概念",
-  computed: {},
-  //监控data中的数据变化",
-  watch: {},
-  mounted(){
-  },
-  //方法集合",
-  methods: {
-    getNumber(num){
-      switch (num.toString()){
-        case '0':
-          return [
-            [1,1,1],
-            [1,0,1],
-            [1,0,1],
-            [1,0,1],
-            [1,1,1],
-          ];
-          break;
-        case '1':
-          return [
-            [0,1,0],
-            [0,1,0],
-            [0,1,0],
-            [0,1,0],
-            [0,1,0],
-          ];
-          break;
-        case '2':
-          return [
-            [1,1,1],
-            [0,0,1],
-            [1,1,1],
-            [1,0,0],
-            [1,1,1],
-          ];
-          break;
-        case '3':
-          return [
-            [1,1,1],
-            [0,0,1],
-            [1,1,1],
-            [0,0,1],
-            [1,1,1],
-          ];
-          break;
-        case '4':
-          return [
-            [1,0,1],
-            [1,0,1],
-            [1,1,1],
-            [0,0,1],
-            [0,0,1],
-          ];
-          break;
-        case '5':
-          return [
-            [1,1,1],
-            [1,0,0],
-            [1,1,1],
-            [0,0,1],
-            [1,1,1],
-          ];
-          break;
-        case '6':
-          return [
-            [1,1,1],
-            [1,0,0],
-            [1,1,1],
-            [1,0,1],
-            [1,1,1],
-          ];
-          break;
-        case '7':
-          return [
-            [1,1,1],
-            [0,0,1],
-            [0,0,1],
-            [0,0,1],
-            [0,0,1],
-          ];
-          break;
-        case '8':
-          return [
-            [1,1,1],
-            [1,0,1],
-            [1,1,1],
-            [1,0,1],
-            [1,1,1],
-          ];
-          break;
-        case '9':
-          return [
-            [1,1,1],
-            [1,0,1],
-            [1,1,1],
-            [0,0,1],
-            [1,1,1],
-          ];
-          break;
-        case ':':
-          return [
-            [0,0,0],
-            [0,1,0],
-            [0,0,0],
-            [0,1,0],
-            [0,0,0],
-          ];
-          break;
-        case '.':
-          return [
-            [0,0,0],
-            [0,0,0],
-            [0,0,0],
-            [0,0,0],
-            [0,1,0],
-          ];
-          break;
-        case '/':
-          return [
-            [0,0,0],
-            [0,0,1],
-            [0,1,0],
-            [1,0,0],
-            [0,0,0],
-          ];
-          break;
-        case '\\':
-          return [
-            [0,0,0],
-            [1,0,0],
-            [0,1,0],
-            [0,0,1],
-            [0,0,0],
-          ];
-          break;
-        case '+':
-          return [
-            [0,0,0],
-            [0,1,0],
-            [1,1,1],
-            [0,1,0],
-            [0,0,0],
-          ];
-          break;
-        case '-':
-          return [
-            [0,0,0],
-            [0,0,0],
-            [1,1,1],
-            [0,0,0],
-            [0,0,0],
-          ];
-          break;
-        case '=':
-          return [
-            [0,0,0],
-            [1,1,1],
-            [0,0,0],
-            [1,1,1],
-            [0,0,0],
-          ];
-          break;
-        case ' ':
-          return [
-            [0],
-            [0],
-            [0],
-            [0],
-            [0],
-          ];
-          break;
-        default :
-          break;
-      }
-      return [];
+    name: "JElectronicNumber",
+    props: {
+        numbers: {
+            type: Array,
+            default: [0, 22]
+        },
+        numberColor: {
+            type: String,
+            default: "black"
+        },
+        numberSize: {
+            type: String,
+            default: "1rem"
+        }
     },
-    rowStyle(row){
-	  const content = document.getElementById('electronic-number');
-	  // console.log(content.offsetHeight,content.offsetWidth);
-	  // const w = content.offsetWidth,h = content.offsetHeight;
-      let res = `width:calc(${this.numberSize}/5);height:calc(${this.numberSize}/5);`;
-      if(row == 1){
-        res += `background-color: ${this.numberColor};`;
-      }
-      return res;
+    data() {
+        //这里存放数据",
+        return {
+            showNum: []
+        };
     },
-    getShowNum(num){
-      num = num.toString();
-      let res = [];
-      for(let i = 0; i < num.length; i++){
-        let temp = this.getNumber(num[i]);
-        if(num[i] != 1){
-          for(let j = 0; j < temp.length; j++){
-            temp[j].push(0);
-          }
+    //监听属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    mounted() {},
+    //方法集合",
+    methods: {
+        getNumber(num) {
+            switch (num.toString()) {
+                case "0":
+                    return [
+                        [1, 1, 1],
+                        [1, 0, 1],
+                        [1, 0, 1],
+                        [1, 0, 1],
+                        [1, 1, 1]
+                    ];
+                    break;
+                case "1":
+                    return [
+                        [0, 1, 0],
+                        [0, 1, 0],
+                        [0, 1, 0],
+                        [0, 1, 0],
+                        [0, 1, 0]
+                    ];
+                    break;
+                case "2":
+                    return [
+                        [1, 1, 1],
+                        [0, 0, 1],
+                        [1, 1, 1],
+                        [1, 0, 0],
+                        [1, 1, 1]
+                    ];
+                    break;
+                case "3":
+                    return [
+                        [1, 1, 1],
+                        [0, 0, 1],
+                        [1, 1, 1],
+                        [0, 0, 1],
+                        [1, 1, 1]
+                    ];
+                    break;
+                case "4":
+                    return [
+                        [1, 0, 1],
+                        [1, 0, 1],
+                        [1, 1, 1],
+                        [0, 0, 1],
+                        [0, 0, 1]
+                    ];
+                    break;
+                case "5":
+                    return [
+                        [1, 1, 1],
+                        [1, 0, 0],
+                        [1, 1, 1],
+                        [0, 0, 1],
+                        [1, 1, 1]
+                    ];
+                    break;
+                case "6":
+                    return [
+                        [1, 1, 1],
+                        [1, 0, 0],
+                        [1, 1, 1],
+                        [1, 0, 1],
+                        [1, 1, 1]
+                    ];
+                    break;
+                case "7":
+                    return [
+                        [1, 1, 1],
+                        [0, 0, 1],
+                        [0, 0, 1],
+                        [0, 0, 1],
+                        [0, 0, 1]
+                    ];
+                    break;
+                case "8":
+                    return [
+                        [1, 1, 1],
+                        [1, 0, 1],
+                        [1, 1, 1],
+                        [1, 0, 1],
+                        [1, 1, 1]
+                    ];
+                    break;
+                case "9":
+                    return [
+                        [1, 1, 1],
+                        [1, 0, 1],
+                        [1, 1, 1],
+                        [0, 0, 1],
+                        [1, 1, 1]
+                    ];
+                    break;
+                case ":":
+                    return [
+                        [0, 0, 0],
+                        [0, 1, 0],
+                        [0, 0, 0],
+                        [0, 1, 0],
+                        [0, 0, 0]
+                    ];
+                    break;
+                case ".":
+                    return [
+                        [0, 0, 0],
+                        [0, 0, 0],
+                        [0, 0, 0],
+                        [0, 0, 0],
+                        [0, 1, 0]
+                    ];
+                    break;
+                case "/":
+                    return [
+                        [0, 0, 0],
+                        [0, 0, 1],
+                        [0, 1, 0],
+                        [1, 0, 0],
+                        [0, 0, 0]
+                    ];
+                    break;
+                case "\\":
+                    return [
+                        [0, 0, 0],
+                        [1, 0, 0],
+                        [0, 1, 0],
+                        [0, 0, 1],
+                        [0, 0, 0]
+                    ];
+                    break;
+                case "+":
+                    return [
+                        [0, 0, 0],
+                        [0, 1, 0],
+                        [1, 1, 1],
+                        [0, 1, 0],
+                        [0, 0, 0]
+                    ];
+                    break;
+                case "-":
+                    return [
+                        [0, 0, 0],
+                        [0, 0, 0],
+                        [1, 1, 1],
+                        [0, 0, 0],
+                        [0, 0, 0]
+                    ];
+                    break;
+                case "=":
+                    return [
+                        [0, 0, 0],
+                        [1, 1, 1],
+                        [0, 0, 0],
+                        [1, 1, 1],
+                        [0, 0, 0]
+                    ];
+                    break;
+                case " ":
+                    return [[0], [0], [0], [0], [0]];
+                    break;
+                default:
+                    break;
+            }
+            return [];
+        },
+        rowStyle(row) {
+            const content = document.getElementById("electronic-number");
+            // console.log(content.offsetHeight,content.offsetWidth);
+            // const w = content.offsetWidth,h = content.offsetHeight;
+            let res = `width:calc(${this.numberSize}/5);height:calc(${this.numberSize}/5);`;
+            if (row == 1) {
+                res += `background-color: ${this.numberColor};`;
+            }
+            return res;
+        },
+        getShowNum(num) {
+            num = num.toString();
+            let res = [];
+            for (let i = 0; i < num.length; i++) {
+                let temp = this.getNumber(num[i]);
+                if (num[i] != 1) {
+                    for (let j = 0; j < temp.length; j++) {
+                        temp[j].push(0);
+                    }
+                }
+                if (res.length == 0) res = temp;
+                else {
+                    for (let j = 0; j < res.length; j++) {
+                        res[j] = res[j].concat(temp[j]);
+                    }
+                }
+            }
+            return res;
         }
-        if(res.length == 0) res = temp;
-        else{
-          for(let j = 0; j < res.length; j++){
-            res[j] = res[j].concat(temp[j]);
-          }
-        }
-      }
-      return res;
     }
-  },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-  .numbers-style{
+.numbers-style {
     display: flex;
     flex-wrap: wrap;
-    .number-style{
-      flex-wrap: wrap;
-      .column{
-        display: flex;
-        .black{
-          background-color: black;
+    .number-style {
+        flex-wrap: wrap;
+        .column {
+            display: flex;
+            .black {
+                background-color: black;
+            }
         }
-      }
     }
-  }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/packages/JFloatDiv/index.js b/JYeontuComponentWarehouse/packages/JFloatDiv/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c0a80d994fa9b51cb6f59e572d9104e81311cef2
--- /dev/null
+++ b/JYeontuComponentWarehouse/packages/JFloatDiv/index.js
@@ -0,0 +1,5 @@
+import JFloatDiv from "./src/JFloatDiv.vue";
+
+JFloatDiv.install = Vue => Vue.component(JFloatDiv.name, JFloatDiv); //注册组件
+
+export default JFloatDiv;
diff --git a/JYeontuComponentWarehouse/packages/JFloatDiv/src/JFloatDiv.vue b/JYeontuComponentWarehouse/packages/JFloatDiv/src/JFloatDiv.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d52d79b0b7546f733340471867b361bd441e0224
--- /dev/null
+++ b/JYeontuComponentWarehouse/packages/JFloatDiv/src/JFloatDiv.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+        {{ text }}
+        <div id="float-content">
+            我是图片
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "JFloatDiv",
+    data() {
+        return {
+            text: "我是文字"
+        };
+    },
+    created() {
+        this.textReapt();
+    },
+    methods: {
+        textReapt() {
+            let i = 8;
+            while (i--) this.text += this.text;
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+#float-content {
+    width: 200px;
+    height: 200px;
+    background-color: cadetblue;
+    float: left;
+}
+</style>
diff --git a/JYeontuComponentWarehouse/packages/JFlowChart/index.js b/JYeontuComponentWarehouse/packages/JFlowChart/index.js
index b99454fc40c5028872790267dde243b935b77043..8cbc727d4cd8190ac1e78fd5b216ddaeff9c0a1e 100644
--- a/JYeontuComponentWarehouse/packages/JFlowChart/index.js
+++ b/JYeontuComponentWarehouse/packages/JFlowChart/index.js
@@ -1,5 +1,5 @@
-import JFlowChart from './src/JFlowChart.vue';
+import JFlowChart from "./src/JFlowChart.vue";
 
-JFlowChart.install = Vue => Vue.component(JFlowChart.name, JFlowChart);//注册组件
+JFlowChart.install = Vue => Vue.component(JFlowChart.name, JFlowChart); //注册组件
 
-export default JFlowChart
\ No newline at end of file
+export default JFlowChart;
diff --git a/JYeontuComponentWarehouse/packages/JFlowChart/src/JFlowChart.vue b/JYeontuComponentWarehouse/packages/JFlowChart/src/JFlowChart.vue
index 4c125cd4190f06970099d30224706e02fc85803e..ce90e193d346aaa2b03e467afad9f22effcf3a34 100644
--- a/JYeontuComponentWarehouse/packages/JFlowChart/src/JFlowChart.vue
+++ b/JYeontuComponentWarehouse/packages/JFlowChart/src/JFlowChart.vue
@@ -1,372 +1,407 @@
 <template>
-	<div class="flow-chart" id="flow-chart">
-		<div class="char-title">
-			{{chartData.title}}
-		</div>
-		<!-- 拖拽时移动的div -->
-		<div id="moveDiv"
-			 style="position: fixed; left: 0px; top: 0px;visibility: hidden;">
-		  <img :src="selectedItem.icon"
-				v-if="selectedItem.icon !== ''"
-			   :style="getIconStyle()"
-			   :class="getClass('chart-content-item-icon','radius')"/>
-		   <div :style="getIconStyle('text')"
-				v-if="selectedItem.icon == ''"
-			   :class="getClass('chart-content-item-icon','radius')"
-			>{{selectedItem.text[0]}}</div>
-		  <div class="chart-content-item-text">
-			{{selectedItem.text}}
-		  </div>
-		</div>
-		<div class="chart-content"
-			ref="chartContent"
-			id="chartContent">
-			<div class="chart-content-column"
-				:style = "getColumnStyle(index1)"
-				v-for="(dataList,index1) in chartDataList">
-				<div class="chart-content-item"
-					:style="getItemStyle()"
-					v-for="(item,index) in dataList">
-					<div class="chart-content-line"
-						v-if="index == 0 && index1 % 2 == 1 && index1 < chartDataList.length - 1"
-						:style="getLineStyle(index,index1,'left')">
-					</div>
-					<div :id="item.id"
-						@mousedown="itemClick(index1,index,item.id,item)"
-            @touchstart="itemClick(index1,index,item.id,item)"
-						:style="getItemStyle(item)">
-						<img :src="item.icon"
-							v-if="item.icon !== ''"
-							:style="getIconStyle()"
-							:class="getClass('chart-content-item-icon','radius')"
-							/>
-					   <div :style="getIconStyle('text')"
-							v-if="item.icon == ''"
-						   :class="getClass('chart-content-item-icon','radius')"
-						>{{item.text[0]}}</div>
-						<div class="chart-content-item-text">
-							{{item.text}}
-						</div>
-					</div>
-					<div class="chart-content-line"
-						:style="getLineStyle(index,index1,'right')">
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+    <div class="flow-chart" id="flow-chart">
+        <div class="char-title">
+            {{ chartData.title }}
+        </div>
+        <!-- 拖拽时移动的div -->
+        <div
+            id="moveDiv"
+            style="position: fixed; left: 0px; top: 0px;visibility: hidden;"
+        >
+            <img
+                :src="selectedItem.icon"
+                v-if="selectedItem.icon !== ''"
+                :style="getIconStyle()"
+                :class="getClass('chart-content-item-icon', 'radius')"
+            />
+            <div
+                :style="getIconStyle('text')"
+                v-if="selectedItem.icon == ''"
+                :class="getClass('chart-content-item-icon', 'radius')"
+            >
+                {{ selectedItem.text[0] }}
+            </div>
+            <div class="chart-content-item-text">
+                {{ selectedItem.text }}
+            </div>
+        </div>
+        <div class="chart-content" ref="chartContent" id="chartContent">
+            <div
+                class="chart-content-column"
+                :style="getColumnStyle(index1)"
+                v-for="(dataList, index1) in chartDataList"
+            >
+                <div
+                    class="chart-content-item"
+                    :style="getItemStyle()"
+                    v-for="(item, index) in dataList"
+                >
+                    <div
+                        class="chart-content-line"
+                        v-if="
+                            index == 0 &&
+                                index1 % 2 == 1 &&
+                                index1 < chartDataList.length - 1
+                        "
+                        :style="getLineStyle(index, index1, 'left')"
+                    ></div>
+                    <div
+                        :id="item.id"
+                        @mousedown="itemClick(index1, index, item.id, item)"
+                        @touchstart="itemClick(index1, index, item.id, item)"
+                        :style="getItemStyle(item)"
+                    >
+                        <img
+                            :src="item.icon"
+                            v-if="item.icon !== ''"
+                            :style="getIconStyle()"
+                            :class="
+                                getClass('chart-content-item-icon', 'radius')
+                            "
+                        />
+                        <div
+                            :style="getIconStyle('text')"
+                            v-if="item.icon == ''"
+                            :class="
+                                getClass('chart-content-item-icon', 'radius')
+                            "
+                        >
+                            {{ item.text[0] }}
+                        </div>
+                        <div class="chart-content-item-text">
+                            {{ item.text }}
+                        </div>
+                    </div>
+                    <div
+                        class="chart-content-line"
+                        :style="getLineStyle(index, index1, 'right')"
+                    ></div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
-	export default{
-		name:'JFlowChart',
-		props: {
-		  chartData: {
-		    type: Object,
-		    default: {
-          title:'',//标题
-          dragAble:false,//是否可拖拽
-          width:0,//每个item的宽度
-          data:[],
-          radius:false//图标是否圆角
-			  }
-		  },
-		},
-		data(){
-			return{
-				itemWidth:0,
-				itemNum:0,
-				chartDataList:[],
-				vChartDataList:[],
-				operateDom:null,
-				operateDomNum:null,
-				startX:'',
-				startY:'',
-				oldInd:null,
-				selectedItem:{}
-			}
-		},
-		created() {
+export default {
+    name: "JFlowChart",
+    props: {
+        chartData: {
+            type: Object,
+            default: {
+                title: "", //标题
+                dragAble: false, //是否可拖拽
+                width: 0, //每个item的宽度
+                data: [],
+                radius: false //图标是否圆角
+            }
+        }
+    },
+    data() {
+        return {
+            itemWidth: 0,
+            itemNum: 0,
+            chartDataList: [],
+            vChartDataList: [],
+            operateDom: null,
+            operateDomNum: null,
+            startX: "",
+            startY: "",
+            oldInd: null,
+            selectedItem: {}
+        };
+    },
+    created() {},
+    mounted() {
+        this.initPage();
+    },
+    methods: {
+        initPage() {
+            this.vChartDataList = [...this.chartData.data];
+            //是否可拖拽
+            if (this.chartData.dragAble) {
+                document
+                    .getElementById("flow-chart")
+                    .addEventListener("mouseup", this.handleMouseup);
+                document
+                    .getElementById("flow-chart")
+                    .addEventListener("mouseover", this.handleMouseover);
+                document
+                    .getElementById("flow-chart")
+                    .addEventListener("touchend", this.handleMouseup);
+                document
+                    .getElementById("flow-chart")
+                    .addEventListener("touchmove", this.handleMouseover);
+            }
+            this.preventEvent();
+            this.initStyle();
+            this.initData();
+            window.onresize = this.onReSize;
+        },
+        //阻止默认事件
+        preventEvent() {
+            document.getElementById("flow-chart").ondragstart = function() {
+                return false;
+            };
+            document.getElementById("flow-chart").onselectstart = function() {
+                return false;
+            };
+        },
+        //监听页面尺寸变化
+        onReSize(event) {
+            this.initData();
+            this.initStyle();
+        },
+        //鼠标抬起时
+        handleMouseup(event) {
+            const chartContent = document.getElementById("chartContent");
+            const dom = document.getElementById("moveDiv");
+            const w = chartContent.offsetWidth,
+                h = chartContent.offsetHeight,
+                l = chartContent.offsetLeft,
+                t = chartContent.offsetTop;
+            const x = event.pageX,
+                y = event.pageY;
+            dom.style.visibility = "hidden";
+            // if(x > l && x < (l + w) && y > t && y < (t + h)){
 
-		},
-		mounted() {
-			this.initPage();
-		},
-		methods:{
-			initPage(){
-				this.vChartDataList = [... this.chartData.data];
-				//是否可拖拽
-				if(this.chartData.dragAble){
-					document.getElementById('flow-chart').addEventListener('mouseup',this.handleMouseup);
-					document.getElementById('flow-chart').addEventListener('mouseover',this.handleMouseover);
-					document.getElementById('flow-chart').addEventListener('touchend',this.handleMouseup);
-					document.getElementById('flow-chart').addEventListener('touchmove',this.handleMouseover);
-				}
-				this.preventEvent();
-				this.initStyle();
-				this.initData();
-				window.onresize = this.onReSize;
-			},
-			//阻止默认事件
-			preventEvent(){
-        document.getElementById('flow-chart').ondragstart = function() {
-					return false;
-				};
-				document.getElementById('flow-chart').onselectstart = function () {
-					return false;
-				};
-			},
-			//监听页面尺寸变化
-			onReSize(event){
-				this.initData();
-				this.initStyle();
-			},
-			//鼠标抬起时
-			handleMouseup(event){
-				const chartContent = document.getElementById('chartContent');
-				const dom = document.getElementById('moveDiv');
-				const w = chartContent.offsetWidth,
-					h = chartContent.offsetHeight,
-					l = chartContent.offsetLeft,
-					t = chartContent.offsetTop;
-				const x = event.pageX,y = event.pageY;
-				dom.style.visibility = 'hidden';
-				// if(x > l && x < (l + w) && y > t && y < (t + h)){
+            // }else{
 
-				// }else{
+            // }
+            if (this.vChartDataList[this.oldInd])
+                this.vChartDataList[this.oldInd].opacity = 1;
+            chartContent.style.border = "none";
+            this.operateDom = null;
+            this.operateDomNum = null;
+            this.oldInd = null;
+        },
 
-				// }
-				if(this.vChartDataList[this.oldInd]) this.vChartDataList[this.oldInd].opacity = 1;
-				chartContent.style.border='none';
-				this.operateDom = null;
-				this.operateDomNum = null;
-				this.oldInd = null;
-			},
-
-			handleMouseover(event){
-				if(this.vChartDataList.length < this.chartData.data.length){
-					this.vChartDataList.unshift({...this.chartData.data[0]});
-				}
-				if(this.operateDom != null){
-					const w = this.operateDom.offsetWidth,h = this.operateDom.offsetHeight;
-					let x = event.pageX,y = event.pageY;
-					this.operateDom.style.position = 'fixed';
-					this.operateDom.style.opacity = '0.5';
-					this.operateDom.style.left = x - w / 2 + 'px';
-					this.operateDom.style.top = y - h / 2 + 'px';
-					let {tx,ty} = this.getItemCoords(x,y);
-					let oldInd = this.oldInd;
-					if(oldInd >= 0){
-						this.vChartDataList.splice(oldInd,1);
-						this.initData();
-					}
-					let nty = (parseInt(ty) % 2 == 0 ? parseInt(tx) : this.itemNum - parseInt(tx));
-					nty = Math.min(nty,this.itemNum);
-					nty = Math.max(nty,0);
-					oldInd = parseInt(ty) * this.itemNum + nty;
-					oldInd = Math.min(this.chartData.data.length - 1,oldInd);
-					oldInd = Math.max(0,oldInd);
-					this.oldInd = oldInd;
-					if(oldInd < 0) return;
-					this.vChartDataList.splice(oldInd,0,{...this.selectedItem});
-					this.initData();
-
-				}
-			},
-			//获取当前移动到的坐标
-			getItemCoords(x,y){
-				let d = document.getElementById('chartContent');
-				let left = d.offsetLeft;
-				let top = d.offsetTop;
-				x = x - left,y = y - top;
-				let itemNum = this.itemNum;
-				let w = d.offsetWidth;
-				let h = d.offsetHeight;
-				let moveDiv = document.getElementById('moveDiv');
-				let th = moveDiv.offsetHeight;
-				w = Math.ceil(w / itemNum);
-				x = Math.floor(x / w),y = Math.floor(y / th);
-				return {tx:x,ty:y};
-			},
-			//item点击事件
-			itemClick(index1,index,id,item){
-				if(!this.chartData.dragAble) return;
-				this.selectedItem = {...item};
-				this.selectedItem.opacity = '0.5';
-				let num = parseInt(id.split('-')[2]);
-				let dom = document.getElementById('moveDiv');
-				let dom1 = document.getElementById(id);//展示的节点
-				let d = document.getElementById('chartContent');
-				d.style.border="dashed 1px blue";
-				// this.vChartDataList.splice(num,1);
-				this.oldInd = num;
-				this.initData();
-				this.operateDom = dom;
-				this.operateDomNum = num;
-				this.startX = dom1.offsetLeft;
-				this.startY = dom1.offsetTop;
-				dom.style.visibility = 'inherit';
-				dom.style.position = 'fixed';
-				dom.style.left = dom1.offsetLeft;
-				dom.style.top = dom1.offsetTop;
-				// console.log(index1,index,num,this.vChartDataList[num].text,dom);
-			},
-			//初始化样式变量
-			initStyle(){
-				let chartContent = this.$refs.chartContent;
-				let width = chartContent.offsetWidth - 40;
-				let height = chartContent.offsetHeight - 40;
-				let itemWidth = Math.max(20,Math.floor(width/7));
-				if(this.chartData.width){
-					itemWidth = this.chartData.width;
-				}
-				this.itemWidth = itemWidth;
-				this.itemNum = Math.floor(width / (itemWidth + itemWidth / 5));
-				// console.log('initStyle',width,height,itemWidth);
-			},
-			//初始化数据
-			initData(){
-				let data = this.vChartDataList;
-				let res = [],flag = true,temp = [];
-				for(let i = 1; i <= data.length; i++){
-					data[i - 1].id = 'item' + '-' + res.length + '-' + (i - 1);
-					if(flag) temp.push(data[i - 1]);
-					else temp.unshift(data[i - 1]);
-					if(i % this.itemNum == 0 || i == data.length){
-						res.push([...temp]);
-						temp = [];
-						flag = !flag;
-					}
-				}
-				this.chartDataList = res;
-				// console.log('initData',res);
-			},
-			//重组class
-			getClass(res,str){
-				if(this.chartData[str]) res += ' ' + str;
-				return res;
-			},
-			//重组行样式
-			getColumnStyle(index){
-				let res = {};
-				// res['margin-left'] = this.itemWidth / 5 + 'px;';
-				if(index < this.chartDataList.lenth - 1 || index % 2 == 0)
-					return this.styleConcat(res);
-				res['margin-left'] = 'auto';
-				res['margin-right'] = -this.itemWidth / 5 + 'px;';
-				return this.styleConcat(res);
-			},
-			//重组每个item的样式
-			getItemStyle(item = ''){
-				let res = {};
-				if(item != ''){
-					if(item.opacity){
-						res.opacity = item.opacity;
-					}
-					return this.styleConcat(res);
-				}
-				res.width = this.itemWidth + 'px;';
-				res['margin-right'] = this.itemWidth / 5 + 'px;';
-				// res.height = this.itemWidth + 'px';
-				return this.styleConcat(res);
-			},
-			//重组每个item的icon的样式
-			getIconStyle(str){
-				let res = {};
-				res.width = this.itemWidth - 5 + 'px;';
-				res.height = this.itemWidth - 5 + 'px';
-				if(str == 'text'){
-					res['line-height'] = this.itemWidth - 5 + 'px';
-					res['font-size'] = 'large';
-					res['border'] = '1px solid blue';
-					res['background-color'] = 'skyblue';
-				}
-				return this.styleConcat(res);
-			},
-			//获取连接线样式
-			getLineStyle(index,index1,flag){
-				if(index1 == this.chartDataList.length - 1 && index == this.chartDataList[index1].length - 1) return '';
-				let res = {};
-				res['border-top'] = '1px solid black';
-				res.width = this.itemWidth / 3 + 'px';
-				if(flag == 'right') res['margin-right'] = -this.itemWidth / 3 + 'px;';
-				else{
-					res['margin-left'] = -this.itemWidth / 3 + 'px;';
-					res['border-left'] = '1px solid black';
-				}
-				res['margin-top'] = this.itemWidth / 2 + 'px;';
-				if(index == this.chartDataList[0].length - 1 &&
-					index1 < this.chartDataList.length - 1
-					){
-						if(index1 % 2 == 0){
-							res['border-right'] = '1px solid black';
-						}else{
-
-						}
-
-				}
-				if(index1 % 2 == 1){
-					if(index == this.chartDataList[index1].length - 1) return '';
-					else{
-
-					}
-				}
-				return this.styleConcat(res);
-			},
-			//json变量转换为style字符串
-			styleConcat(obj){
-				let res = '';
-				for(let k in obj){
-					res += k + ':' + obj[k] + ';';
-				}
-				return res;
-			}
-		}
-
-
-	}
+        handleMouseover(event) {
+            if (this.vChartDataList.length < this.chartData.data.length) {
+                this.vChartDataList.unshift({ ...this.chartData.data[0] });
+            }
+            if (this.operateDom != null) {
+                const w = this.operateDom.offsetWidth,
+                    h = this.operateDom.offsetHeight;
+                let x = event.pageX,
+                    y = event.pageY;
+                this.operateDom.style.position = "fixed";
+                this.operateDom.style.opacity = "0.5";
+                this.operateDom.style.left = x - w / 2 - window.scrollX + "px";
+                this.operateDom.style.top = y - h / 2 - window.scrollY + "px";
+                let { tx, ty } = this.getItemCoords(x, y);
+                let oldInd = this.oldInd;
+                if (oldInd >= 0) {
+                    this.vChartDataList.splice(oldInd, 1);
+                    this.initData();
+                }
+                let nty =
+                    parseInt(ty) % 2 == 0
+                        ? parseInt(tx)
+                        : this.itemNum - parseInt(tx);
+                nty = Math.min(nty, this.itemNum);
+                nty = Math.max(nty, 0);
+                oldInd = parseInt(ty) * this.itemNum + nty;
+                oldInd = Math.min(this.chartData.data.length - 1, oldInd);
+                oldInd = Math.max(0, oldInd);
+                this.oldInd = oldInd;
+                if (oldInd < 0) return;
+                this.vChartDataList.splice(oldInd, 0, { ...this.selectedItem });
+                this.initData();
+            }
+        },
+        //获取当前移动到的坐标
+        getItemCoords(x, y) {
+            let d = document.getElementById("chartContent");
+            let left = d.offsetLeft;
+            let top = d.offsetTop;
+            (x = x - left), (y = y - top);
+            let itemNum = this.itemNum;
+            let w = d.offsetWidth;
+            let h = d.offsetHeight;
+            let moveDiv = document.getElementById("moveDiv");
+            let th = moveDiv.offsetHeight;
+            w = Math.ceil(w / itemNum);
+            (x = Math.floor(x / w)), (y = Math.floor(y / th));
+            return { tx: x, ty: y };
+        },
+        //item点击事件
+        itemClick(index1, index, id, item) {
+            if (!this.chartData.dragAble) return;
+            this.selectedItem = { ...item };
+            this.selectedItem.opacity = "0.5";
+            let num = parseInt(id.split("-")[2]);
+            let dom = document.getElementById("moveDiv");
+            let dom1 = document.getElementById(id); //展示的节点
+            let d = document.getElementById("chartContent");
+            d.style.border = "dashed 1px blue";
+            // this.vChartDataList.splice(num,1);
+            this.oldInd = num;
+            this.initData();
+            this.operateDom = dom;
+            this.operateDomNum = num;
+            this.startX = dom1.offsetLeft;
+            this.startY = dom1.offsetTop;
+            dom.style.visibility = "inherit";
+            dom.style.position = "fixed";
+            dom.style.left = dom1.offsetLeft;
+            dom.style.top = dom1.offsetTop;
+            // console.log(index1,index,num,this.vChartDataList[num].text,dom);
+        },
+        //初始化样式变量
+        initStyle() {
+            let chartContent = this.$refs.chartContent;
+            let width = chartContent.offsetWidth - 40;
+            let height = chartContent.offsetHeight - 40;
+            let itemWidth = Math.max(20, Math.floor(width / 7));
+            if (this.chartData.width) {
+                itemWidth = this.chartData.width;
+            }
+            this.itemWidth = itemWidth;
+            this.itemNum = Math.floor(width / (itemWidth + itemWidth / 5));
+            // console.log('initStyle',width,height,itemWidth);
+        },
+        //初始化数据
+        initData() {
+            let data = this.vChartDataList;
+            let res = [],
+                flag = true,
+                temp = [];
+            for (let i = 1; i <= data.length; i++) {
+                data[i - 1].id = "item" + "-" + res.length + "-" + (i - 1);
+                if (flag) temp.push(data[i - 1]);
+                else temp.unshift(data[i - 1]);
+                if (i % this.itemNum == 0 || i == data.length) {
+                    res.push([...temp]);
+                    temp = [];
+                    flag = !flag;
+                }
+            }
+            this.chartDataList = res;
+            // console.log('initData',res);
+        },
+        //重组class
+        getClass(res, str) {
+            if (this.chartData[str]) res += " " + str;
+            return res;
+        },
+        //重组行样式
+        getColumnStyle(index) {
+            let res = {};
+            // res['margin-left'] = this.itemWidth / 5 + 'px;';
+            if (index < this.chartDataList.lenth - 1 || index % 2 == 0)
+                return this.styleConcat(res);
+            res["margin-left"] = "auto";
+            res["margin-right"] = -this.itemWidth / 5 + "px;";
+            return this.styleConcat(res);
+        },
+        //重组每个item的样式
+        getItemStyle(item = "") {
+            let res = {};
+            if (item != "") {
+                if (item.opacity) {
+                    res.opacity = item.opacity;
+                }
+                return this.styleConcat(res);
+            }
+            res.width = this.itemWidth + "px;";
+            res["margin-right"] = this.itemWidth / 5 + "px;";
+            // res.height = this.itemWidth + 'px';
+            return this.styleConcat(res);
+        },
+        //重组每个item的icon的样式
+        getIconStyle(str) {
+            let res = {};
+            res.width = this.itemWidth - 5 + "px;";
+            res.height = this.itemWidth - 5 + "px";
+            if (str == "text") {
+                res["line-height"] = this.itemWidth - 5 + "px";
+                res["font-size"] = "large";
+                res["border"] = "1px solid blue";
+                res["background-color"] = "skyblue";
+            }
+            return this.styleConcat(res);
+        },
+        //获取连接线样式
+        getLineStyle(index, index1, flag) {
+            if (
+                index1 == this.chartDataList.length - 1 &&
+                index == this.chartDataList[index1].length - 1
+            )
+                return "";
+            let res = {};
+            res["border-top"] = "1px solid black";
+            res.width = this.itemWidth / 3 + "px";
+            if (flag == "right")
+                res["margin-right"] = -this.itemWidth / 3 + "px;";
+            else {
+                res["margin-left"] = -this.itemWidth / 3 + "px;";
+                res["border-left"] = "1px solid black";
+            }
+            res["margin-top"] = this.itemWidth / 2 + "px;";
+            if (
+                index == this.chartDataList[0].length - 1 &&
+                index1 < this.chartDataList.length - 1
+            ) {
+                if (index1 % 2 == 0) {
+                    res["border-right"] = "1px solid black";
+                } else {
+                }
+            }
+            if (index1 % 2 == 1) {
+                if (index == this.chartDataList[index1].length - 1) return "";
+                else {
+                }
+            }
+            return this.styleConcat(res);
+        },
+        //json变量转换为style字符串
+        styleConcat(obj) {
+            let res = "";
+            for (let k in obj) {
+                res += k + ":" + obj[k] + ";";
+            }
+            return res;
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped>
-
-  .chart-content-item-text{
+.chart-content-item-text {
     margin: 0 auto;
     width: 1.25rem;
     line-height: 1.5rem;
     // word-break:break-all;
-
-  }
-	.radius{
-		border-radius: 50% 50%;
-	}
-	.flow-chart{
+}
+.radius {
+    border-radius: 50% 50%;
+}
+.flow-chart {
     width: 100%;
-		.chart-title{
-		}
-		.chart-content{
-			display: flex;
-			flex-wrap: wrap;
-			padding: 20px;
-			.chart-content-column{
-				display: flex;
-				flex-direction: row;
-				.chart-content-item{
-					display: flex;
-					.chart-content-line{
-
-					}
-					.chart-content-item-icon{
-
-					}
-					.chart-content-item-text{
-						margin: 0 auto;
-						width: 1.25rem;
-						line-height: 1.5rem;
-						// word-break:break-all;
-
-					}
-				}
-			}
-		}
-	}
+    .chart-title {
+    }
+    .chart-content {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 20px;
+        .chart-content-column {
+            display: flex;
+            flex-direction: row;
+            .chart-content-item {
+                display: flex;
+                .chart-content-line {
+                }
+                .chart-content-item-icon {
+                }
+                .chart-content-item-text {
+                    margin: 0 auto;
+                    width: 1.25rem;
+                    line-height: 1.5rem;
+                    // word-break:break-all;
+                }
+            }
+        }
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/packages/JHoverBtn/index.js b/JYeontuComponentWarehouse/packages/JHoverBtn/index.js
index 1e501c17bbb42e4de454b34a1e08dbe80833f3d9..8cc843adb8e69904a8ae8bb4d0edc9ac8d897448 100644
--- a/JYeontuComponentWarehouse/packages/JHoverBtn/index.js
+++ b/JYeontuComponentWarehouse/packages/JHoverBtn/index.js
@@ -1,5 +1,5 @@
-import JHoverBtn from './src/JHoverBtn.vue';
+import JHoverBtn from "./src/JHoverBtn.vue";
 
-JHoverBtn.install = Vue => Vue.component(JHoverBtn.name, JHoverBtn);//注册组件
+JHoverBtn.install = Vue => Vue.component(JHoverBtn.name, JHoverBtn); //注册组件
 
-export default JHoverBtn
\ No newline at end of file
+export default JHoverBtn;
diff --git a/JYeontuComponentWarehouse/packages/JHoverBtn/src/JHoverBtn.vue b/JYeontuComponentWarehouse/packages/JHoverBtn/src/JHoverBtn.vue
index 9276fa450eb012bde62fc7ee592958f13575830f..3a7d92cc735618dc2d3b6e4f08be7835f4429a4c 100644
--- a/JYeontuComponentWarehouse/packages/JHoverBtn/src/JHoverBtn.vue
+++ b/JYeontuComponentWarehouse/packages/JHoverBtn/src/JHoverBtn.vue
@@ -1,154 +1,159 @@
 <template>
-	<div class="j-hover-btn"
-		:style="getStyle()"
-		id="j-hover-btn" 
-		@mousedown="itemClick">
-		{{text}}
-	</div>
+    <div
+        class="j-hover-btn"
+        :style="getStyle()"
+        id="j-hover-btn"
+        @mousedown="itemClick"
+    >
+        {{ text }}
+    </div>
 </template>
 
 <script>
-	import {camelTo_} from '../../utils/strTool'
-	export default{
-		name:'JHoverBtn',
-		props:{
-			bgColor:{
-				type:String,
-				default:'deepskyblue'
-			},
-			autoHide:{
-				type:Boolean,
-				default:true
-			},
-			clickDis:{
-				type:Number,
-				default:10
-			},
-			showWidth:{
-				type:Number,
-				default:15
-			},
-			width:{
-				type:Number,
-				default:80
-			},
-			radius:{
-				type:Boolean,
-				default:true
-			},
-			btnStyle:{
-				type:Object,
-				default:()=>{}
-			},
-			text:{
-				type:String,
-				default:"悬浮按钮"
-			},
-			zIndex:{
-				type:Number,
-				default:999
-			}
-		},
-		data(){
-			return{
-				startX:'',
-				startY:'',
-				clickStatus:false,
-				isClick:true
-			}
-		},
-		mounted() {
-			this.preventEvent();
-			window.addEventListener('mouseup',this.handleMouseup);
-			window.addEventListener('mouseover',this.handleMouseover);
-		},
-		methods:{
-			getStyle(res = ''){
-				res += 'background-color:' + this.bgColor + ';';
-				res += 'width:' + this.width + 'px;';
-				res += 'height:' + this.width + 'px;';
-				res += 'line-height:' + this.width + 'px;';
-				res += 'z-index:' + this.zIndex + ';';
-				if(this.radius){
-					res += 'border-radius: 50% 50%;'
-				}
-				let btnStyle = this.btnStyle;
-				for(let k in btnStyle){
-					res += camelTo_(k) + ':' + btnStyle[k] + ';';
-				}
-				return res;
-			},
-			//阻止默认事件
-			preventEvent(){
-				document.getElementById('j-hover-btn').ondragstart = function() {
-					return false;
-				};
-				document.getElementById('j-hover-btn').onselectstart = function () {
-					return false;
-				};
-			},
-			windowPreventEvent(){
-				window.ondragstart = function() {
-					return false;
-				};
-				window.onselectstart = function () {
-					return false;
-				};
-			},
-			windowPreventEventCancel(){
-				window.ondragstart = null;
-				window.onselectstart = null;
-			},
-			itemClick(event){
-				this.startX = event.pageX - window.scrollX;
-				this.startY = event.pageY - window.scrollY;
-				this.clickStatus = true;
-				this.windowPreventEvent();
-			},
-			//鼠标抬起时
-			handleMouseup(event){
-				if(this.clickStatus){
-					const endX = event.pageX - window.scrollX,
-						endY = event.pageY - window.scrollY;
-					if(this.isClick){
-						this.$emit('hoverBtnClick');
-					}else{
-						if(!this.autoHide) return;
-						const width = document.body.offsetWidth;
-						const height = document.body.offsetHeight;
-						const dom = document.getElementById('j-hover-btn');
-						if(endX < this.width / 2){
-							dom.style.left = -(this.width - this.showWidth) + 'px';
-						}else if(endX > width - this.width / 2){
-							dom.style.left = width - this.showWidth + 'px';
-						}
-					}
-					this.clickStatus = false;
-					this.isClick = true;
-					this.windowPreventEventCancel();
-				}
-			},
-			
-			handleMouseover(event){
-				if(this.clickStatus){
-					const endX = event.pageX - window.scrollX,
-						endY = event.pageY - window.scrollY;
-					const dom = document.getElementById('j-hover-btn');
-					if(Math.abs(endX - this.startX) > this.clickDis || Math.abs(endY - this.startY) > this.clickDis){
-						this.isClick = false;
-					}
-					dom.style.left = endX - this.width / 2 + 'px';
-					dom.style.top = endY - this.width / 2 + 'px';
-				}
-			},
-		}
-	}
+import { camelTo_ } from "../../utils/strTool";
+export default {
+    name: "JHoverBtn",
+    props: {
+        bgColor: {
+            type: String,
+            default: "deepskyblue"
+        },
+        autoHide: {
+            type: Boolean,
+            default: true
+        },
+        clickDis: {
+            type: Number,
+            default: 10
+        },
+        showWidth: {
+            type: Number,
+            default: 15
+        },
+        width: {
+            type: Number,
+            default: 80
+        },
+        radius: {
+            type: Boolean,
+            default: true
+        },
+        btnStyle: {
+            type: Object,
+            default: () => {}
+        },
+        text: {
+            type: String,
+            default: "悬浮按钮"
+        },
+        zIndex: {
+            type: Number,
+            default: 999
+        }
+    },
+    data() {
+        return {
+            startX: "",
+            startY: "",
+            clickStatus: false,
+            isClick: true
+        };
+    },
+    mounted() {
+        this.preventEvent();
+        window.addEventListener("mouseup", this.handleMouseup);
+        window.addEventListener("mouseover", this.handleMouseover);
+    },
+    methods: {
+        getStyle(res = "") {
+            res += "background-color:" + this.bgColor + ";";
+            res += "width:" + this.width + "px;";
+            res += "height:" + this.width + "px;";
+            res += "line-height:" + this.width + "px;";
+            res += "z-index:" + this.zIndex + ";";
+            if (this.radius) {
+                res += "border-radius: 50% 50%;";
+            }
+            let btnStyle = this.btnStyle;
+            for (let k in btnStyle) {
+                res += camelTo_(k) + ":" + btnStyle[k] + ";";
+            }
+            return res;
+        },
+        //阻止默认事件
+        preventEvent() {
+            document.getElementById("j-hover-btn").ondragstart = function() {
+                return false;
+            };
+            document.getElementById("j-hover-btn").onselectstart = function() {
+                return false;
+            };
+        },
+        windowPreventEvent() {
+            window.ondragstart = function() {
+                return false;
+            };
+            window.onselectstart = function() {
+                return false;
+            };
+        },
+        windowPreventEventCancel() {
+            window.ondragstart = null;
+            window.onselectstart = null;
+        },
+        itemClick(event) {
+            this.startX = event.pageX - window.scrollX;
+            this.startY = event.pageY - window.scrollY;
+            this.clickStatus = true;
+            this.windowPreventEvent();
+        },
+        //鼠标抬起时
+        handleMouseup(event) {
+            if (this.clickStatus) {
+                const endX = event.pageX - window.scrollX,
+                    endY = event.pageY - window.scrollY;
+                if (this.isClick) {
+                    this.$emit("hoverBtnClick");
+                } else {
+                    if (!this.autoHide) return;
+                    const width = document.body.offsetWidth;
+                    const height = document.body.offsetHeight;
+                    const dom = document.getElementById("j-hover-btn");
+                    if (endX < this.width / 2) {
+                        dom.style.left = -(this.width - this.showWidth) + "px";
+                    } else if (endX > width - this.width / 2) {
+                        dom.style.left = width - this.showWidth + "px";
+                    }
+                }
+                this.clickStatus = false;
+                this.isClick = true;
+                this.windowPreventEventCancel();
+            }
+        },
+
+        handleMouseover(event) {
+            if (this.clickStatus) {
+                const endX = event.pageX - window.scrollX,
+                    endY = event.pageY - window.scrollY;
+                const dom = document.getElementById("j-hover-btn");
+                if (
+                    Math.abs(endX - this.startX) > this.clickDis ||
+                    Math.abs(endY - this.startY) > this.clickDis
+                ) {
+                    this.isClick = false;
+                }
+                dom.style.left = endX - this.width / 2 + "px";
+                dom.style.top = endY - this.width / 2 + "px";
+            }
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped>
-	.j-hover-btn{
-		text-align: center;
-		cursor: pointer;
-		position: fixed;
-	}
+.j-hover-btn {
+    text-align: center;
+    cursor: pointer;
+    position: fixed;
+}
 </style>
diff --git a/JYeontuComponentWarehouse/packages/JNumRolling/index.js b/JYeontuComponentWarehouse/packages/JNumRolling/index.js
index ff6b0fdb1d0a16b4fcee3b80189fecf028474415..a52042fedadf858ddb5052bdfbd054f5028bd5d6 100644
--- a/JYeontuComponentWarehouse/packages/JNumRolling/index.js
+++ b/JYeontuComponentWarehouse/packages/JNumRolling/index.js
@@ -1,5 +1,5 @@
-import JNumRolling from './src/JNumRolling.vue';
+import JNumRolling from "./src/JNumRolling.vue";
 
-JNumRolling.install = Vue => Vue.component(JNumRolling.name, JNumRolling);//注册组件
+JNumRolling.install = Vue => Vue.component(JNumRolling.name, JNumRolling); //注册组件
 
-export default JNumRolling
\ No newline at end of file
+export default JNumRolling;
diff --git a/JYeontuComponentWarehouse/packages/JNumRolling/src/JNumRolling.vue b/JYeontuComponentWarehouse/packages/JNumRolling/src/JNumRolling.vue
index 9e196479a80ca9c5d175e5893145a222a460c3dd..8ac9f4f36e9e16598a55f955697d32d79a25322a 100644
--- a/JYeontuComponentWarehouse/packages/JNumRolling/src/JNumRolling.vue
+++ b/JYeontuComponentWarehouse/packages/JNumRolling/src/JNumRolling.vue
@@ -1,215 +1,227 @@
 <template>
-	<div>
-		<div id="j-num-rolling" class="j-num-rolling">
-			
-		</div>
-	</div>
+    <div>
+        <div id="j-num-rolling" class="j-num-rolling"></div>
+    </div>
 </template>
 
 <script>
-	import {camelTo_} from '../../utils/strTool'
-	export default{
-		name:"JNumRolling",
-		props:{
-			//数字
-			nums:{
-				type:String,
-				default:"0"
-			},
-			//数字尺寸
-			fontSize:{
-				type:Number,
-				default:4
-			},
-			//每走一步的时间(ms)
-			stepTime:{
-				type:Number,
-				default:200
-			},
-			//保存小数点
-			fixNum:{
-				type:Number,
-				default:2
-			},
-			//自定义样式
-			numStyle:{
-				type:Object,
-				default:{
-					
-				}
-			},
-			//数字刷新时间
-			refreshTime:{
-				type:Number,
-				default:3
-			}
-		},
-		watch:{
-			nums:{
-				handler(newVal,oldVal){
-					//console.log(new Date().getTime(),this.oldTime,(new Date().getTime() - this.oldTime));
-					if(this.oldTime == 0){
-						this.oldTime = new Date().getTime();
-						this.numRolling(newVal,oldVal);
-					}else if((new Date().getTime() - this.oldTime) >= (this.refreshTime * 1000)){
-						//console.log(newVal,oldVal);
-						this.oldTime = new Date().getTime();
-						this.numRolling(newVal,this.oldVal);
-					}
-				}
-			}
-		},
-		data(){
-			return{
-				numArr:[],
-				headNum:10,
-				oldTime:0,
-				oldVal:'',
-			}
-		},
-		mounted(){
-			// this.autoChange();
-			this.init();
-		},
-		methods:{
-			getStyle(){
-				let fontSize = this.fontSize;
-				let res = '';
-				res += 'font-size:' + fontSize/3 + 'rem;';
-				res += 'line-height:' + fontSize + 'rem;';
-				res += 'height:' + fontSize + 'rem;';
-				return res;
-			},
-			getNumStyle(){
-				let res = '';
-				let numStyle = this.numStyle;
-				for(let k in numStyle){
-					res += camelTo_(k) + ':' + numStyle[k] + ';';
-				}
-				return res;
-			},
-			//初始化，创建容器节点
-			initElement(){
-				let dom = ``;
-				let flag = true;
-				for(let i = 0; i < this.numArr.length; i++){
-					let num = parseInt(this.numArr[i]);
-					if(num >= 0 && num <= 9 ){
-						if(num > 0) flag = false;
-						dom += `
-						<div class="j-num-rolling-body" style="${(flag?'display:none;':'')+this.getStyle() + this.getNumStyle()}">
+import { camelTo_ } from "../../utils/strTool";
+export default {
+    name: "JNumRolling",
+    props: {
+        //数字
+        nums: {
+            type: String,
+            default: "0"
+        },
+        //数字尺寸
+        fontSize: {
+            type: Number,
+            default: 4
+        },
+        //每走一步的时间(ms)
+        stepTime: {
+            type: Number,
+            default: 200
+        },
+        //保存小数点
+        fixNum: {
+            type: Number,
+            default: 2
+        },
+        //自定义样式
+        numStyle: {
+            type: Object,
+            default: {}
+        },
+        //数字刷新时间
+        refreshTime: {
+            type: Number,
+            default: 3
+        }
+    },
+    watch: {
+        nums: {
+            handler(newVal, oldVal) {
+                //console.log(new Date().getTime(),this.oldTime,(new Date().getTime() - this.oldTime));
+                if (this.oldTime == 0) {
+                    this.oldTime = new Date().getTime();
+                    this.numRolling(newVal, oldVal);
+                } else if (
+                    new Date().getTime() - this.oldTime >=
+                    this.refreshTime * 1000
+                ) {
+                    //console.log(newVal,oldVal);
+                    this.oldTime = new Date().getTime();
+                    this.numRolling(newVal, this.oldVal);
+                }
+            }
+        }
+    },
+    data() {
+        return {
+            numArr: [],
+            headNum: 10,
+            oldTime: 0,
+            oldVal: ""
+        };
+    },
+    mounted() {
+        // this.autoChange();
+        this.init();
+    },
+    methods: {
+        getStyle() {
+            let fontSize = this.fontSize;
+            let res = "";
+            res += "font-size:" + fontSize / 3 + "rem;";
+            res += "line-height:" + fontSize + "rem;";
+            res += "height:" + fontSize + "rem;";
+            return res;
+        },
+        getNumStyle() {
+            let res = "";
+            let numStyle = this.numStyle;
+            for (let k in numStyle) {
+                res += camelTo_(k) + ":" + numStyle[k] + ";";
+            }
+            return res;
+        },
+        //初始化，创建容器节点
+        initElement() {
+            let dom = ``;
+            let flag = true;
+            for (let i = 0; i < this.numArr.length; i++) {
+                let num = parseInt(this.numArr[i]);
+                if (num >= 0 && num <= 9) {
+                    if (num > 0) flag = false;
+                    dom += `
+						<div class="j-num-rolling-body" style="${(flag ? "display:none;" : "") +
+                            this.getStyle() +
+                            this.getNumStyle()}">
 							<div id="num-content${i}" 
 								style="bottom:${num * this.fontSize}rem;${this.getStyle()}" 
 								class="num-content">
-						`
-						for(let j = 0; j < 20; j++){
-							dom += `
+						`;
+                    for (let j = 0; j < 20; j++) {
+                        dom += `
 								<div style="${this.getStyle()}">${j % 10}</div>
-							`
-						}
-						dom += `
+							`;
+                    }
+                    dom += `
 							</div>
 						</div>
-						`
-					}else{
-						dom += `
+						`;
+                } else {
+                    dom += `
 						<div class="j-num-rolling-body" style="${this.getStyle()}">
 							<div class="num-content" style="${this.getStyle()}">
 								<div  style="${this.getStyle()}">${this.numArr[i]}</div>
 							</div>
 						</div>
-						`
-					}
-				}
-				document.getElementById('j-num-rolling').innerHTML = dom;
-			},
-			//初始化数据
-			init(){
-				this.numArr = parseFloat(this.nums).toFixed(this.fixNum).split('');
-				let temp = new Array(this.headNum).fill(0);
-				this.numArr = temp.concat(this.numArr);
-				this.initElement();
-			},
-			//自动增加数字，测试
-			autoChange(){
-				this.changAnime();
-				setTimeout(()=>{
-					this.autoChange();
-				},2000);
-			},
-			//点击修改数字，测试
-			changAnime(){
-				this.nums = (parseFloat(this.nums) + 3.9).toFixed(this.fixNum);
-			},
-			//修改
-			chang(oldVal,newVal,id){
-				if(oldVal >= newVal) return;
-				let stepTime = this.stepTime;
-				let time = Math.ceil((newVal - oldVal) / this.fontSize);
-				time = stepTime / time;
-				const dom = document.getElementById(id);
-				// console.log(oldVal,newVal,id,dom);
-				// console.log('time',time);
-				oldVal += 0.5;
-				if(oldVal >= 20){
-					oldVal %= 20;
-					newVal %= 20;
-				}
-				if(oldVal >= 10){
-					oldVal %= 10;
-					newVal %= 10;
-					if(newVal < oldVal) newVal += 10;
-				}
-				dom.style.bottom = oldVal * this.fontSize + 'rem';
-				setTimeout(()=>{
-					this.chang(oldVal,newVal,id);
-				},time);
-			},
-			//数据变化时触发，处理变化后的数据
-			numRolling(newVal,oldVal){
-				this.oldVal = newVal;
-				oldVal = parseFloat(oldVal).toFixed(this.fixNum).toString().split('');
-				newVal = parseFloat(newVal).toFixed(this.fixNum).toString().split('');
-				let headNum = this.headNum;
-				//数位发生变化，前面补零
-				while(oldVal.length < newVal.length){
-					oldVal.unshift('0');
-					headNum--;
-					document.getElementById('num-content'+headNum).parentNode.style.display = 'flex';
-				}
-				//修改前置位标记数
-				this.headNum = headNum;
-				for(let i = 0; i < newVal.length; i++){
-					let num = parseInt(newVal[i]);
-					if(num >= 0 && num <= 9 ){
-						let oldV = parseFloat(oldVal[i]),newV = parseFloat(newVal[i]);
-						if(oldV > newV) newV += 10;
-						this.chang(oldV,newV,'num-content'+(i + headNum));
-					}
-				}
-			}
-		}
-	}
+						`;
+                }
+            }
+            document.getElementById("j-num-rolling").innerHTML = dom;
+        },
+        //初始化数据
+        init() {
+            this.numArr = parseFloat(this.nums)
+                .toFixed(this.fixNum)
+                .split("");
+            let temp = new Array(this.headNum).fill(0);
+            this.numArr = temp.concat(this.numArr);
+            this.initElement();
+        },
+        //自动增加数字，测试
+        autoChange() {
+            this.changAnime();
+            setTimeout(() => {
+                this.autoChange();
+            }, 2000);
+        },
+        //点击修改数字，测试
+        changAnime() {
+            this.nums = (parseFloat(this.nums) + 3.9).toFixed(this.fixNum);
+        },
+        //修改
+        chang(oldVal, newVal, id) {
+            if (oldVal >= newVal) return;
+            let stepTime = this.stepTime;
+            let time = Math.ceil((newVal - oldVal) / this.fontSize);
+            time = stepTime / time;
+            const dom = document.getElementById(id);
+            // console.log(oldVal,newVal,id,dom);
+            // console.log('time',time);
+            oldVal += 0.5;
+            if (oldVal >= 20) {
+                oldVal %= 20;
+                newVal %= 20;
+            }
+            if (oldVal >= 10) {
+                oldVal %= 10;
+                newVal %= 10;
+                if (newVal < oldVal) newVal += 10;
+            }
+            dom.style.bottom = oldVal * this.fontSize + "rem";
+            setTimeout(() => {
+                this.chang(oldVal, newVal, id);
+            }, time);
+        },
+        //数据变化时触发，处理变化后的数据
+        numRolling(newVal, oldVal) {
+            this.oldVal = newVal;
+            oldVal = parseFloat(oldVal)
+                .toFixed(this.fixNum)
+                .toString()
+                .split("");
+            newVal = parseFloat(newVal)
+                .toFixed(this.fixNum)
+                .toString()
+                .split("");
+            let headNum = this.headNum;
+            //数位发生变化，前面补零
+            while (oldVal.length < newVal.length) {
+                oldVal.unshift("0");
+                headNum--;
+                document.getElementById(
+                    "num-content" + headNum
+                ).parentNode.style.display = "flex";
+            }
+            //修改前置位标记数
+            this.headNum = headNum;
+            for (let i = 0; i < newVal.length; i++) {
+                let num = parseInt(newVal[i]);
+                if (num >= 0 && num <= 9) {
+                    let oldV = parseFloat(oldVal[i]),
+                        newV = parseFloat(newVal[i]);
+                    if (oldV > newV) newV += 10;
+                    this.chang(oldV, newV, "num-content" + (i + headNum));
+                }
+            }
+        }
+    }
+};
 </script>
 
 <style lang="scss">
-	.j-num-rolling{
-		display: flex;
-		.j-num-rolling-body{
-			height: 2rem;
-			line-height: 2rem;
-			width: 1rem;
-			overflow: hidden;
-			margin-left: 0.2rem;
-			.num-content{
-				width: 1rem;
-				position: relative;
-				bottom:0rem;
-				scroll-behavior: smooth;
-				display: flex;
-				flex-direction: column;
-				font-weight: bold;
-			}
-		}
-	}
+.j-num-rolling {
+    display: flex;
+    .j-num-rolling-body {
+        height: 2rem;
+        line-height: 2rem;
+        width: 1rem;
+        overflow: hidden;
+        margin-left: 0.2rem;
+        .num-content {
+            width: 1rem;
+            position: relative;
+            bottom: 0rem;
+            scroll-behavior: smooth;
+            display: flex;
+            flex-direction: column;
+            font-weight: bold;
+        }
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/packages/JSteps/index.js b/JYeontuComponentWarehouse/packages/JSteps/index.js
index 15969b78302483f0ffa43695728ce082cf86f345..881768bd7db098543c675325c6c0ef1265283fa3 100644
--- a/JYeontuComponentWarehouse/packages/JSteps/index.js
+++ b/JYeontuComponentWarehouse/packages/JSteps/index.js
@@ -1,5 +1,5 @@
-import JSteps from './src/JSteps.vue';
+import JSteps from "./src/JSteps.vue";
 
-JSteps.install = Vue => Vue.component(JSteps.name, JSteps);//注册组件
+JSteps.install = Vue => Vue.component(JSteps.name, JSteps); //注册组件
 
-export default JSteps
\ No newline at end of file
+export default JSteps;
diff --git a/JYeontuComponentWarehouse/packages/JSteps/src/JSteps.vue b/JYeontuComponentWarehouse/packages/JSteps/src/JSteps.vue
index 67132f67fc9719e38711ebe318781863b188ea92..f6ba27909ca3d892c8ca3932e18dc5a97f13e970 100644
--- a/JYeontuComponentWarehouse/packages/JSteps/src/JSteps.vue
+++ b/JYeontuComponentWarehouse/packages/JSteps/src/JSteps.vue
@@ -1,45 +1,276 @@
 <template>
-	<div class="j-steps">
-		
-	</div>
+    <div class="j-steps" id="j-steps">
+        <div
+            v-for="(item, index) in showDataList"
+            :key="index"
+            class="j-steps-item"
+        >
+            <div class="item-header">
+                <div class="left-box">
+                    <template v-if="index % 2 == 0">
+                        <div class="top-box" :style="obj2Style(titleStyle)">
+                            {{ item.title }}
+                        </div>
+                        <div
+                            class="bottom-box"
+                            :style="obj2Style(descriptStyle)"
+                        >
+                            {{ item.descript }}
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div
+                            class="hold-box"
+                            :style="
+                                obj2Style(
+                                    timeStyle,
+                                    'text-align: right;padding-right: 5px;'
+                                )
+                            "
+                        >
+                            {{ item.time }}
+                        </div>
+                    </template>
+                </div>
+                <div class="item-icon">{{ item.icon }}</div>
+                <div class="right-box">
+                    <template v-if="index % 2 == 1">
+                        <div class="top-box" :style="obj2Style(titleStyle)">
+                            {{ item.title }}
+                        </div>
+                        <div
+                            class="bottom-box"
+                            :style="obj2Style(descriptStyle)"
+                        >
+                            {{ item.descript }}
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div
+                            class="hold-box"
+                            :style="
+                                obj2Style(
+                                    timeStyle,
+                                    'text-align: left;padding-left: 5px;'
+                                )
+                            "
+                        >
+                            {{ item.time }}
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <div class="item-content">
+                <div class="content-left"></div>
+                <div
+                    v-if="index !== dataList.length - 1"
+                    class="v-line"
+                    :style="getLineStyle()"
+                ></div>
+                <div class="content-right">
+                    <div class="item-title"></div>
+                    <div class="item-descript"></div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
-	export default{
-		name:"JSteps",
-		props:{
-			direction:{
-				type:String,
-				default:'horizontal'//horizontal 横向 vertical 纵向
-			}
-		},
-		data() {
-			return{
-				showTab:0
-			}
-		},
-		created() {
-			this.init();
-		},
-		methods:{
-			init(){
-				this.showTab = this.defaultShowTab;
-			},
-			barClick(index){
-				this.showTab = index;
-				this.$emit('clickTab',index);
-			},
-			getBarClass(index,val=''){
-				let res = '';
-				if(index == this.showTab){
-					res += 'active-tab';
-				}
-				return res + ' ' + val;
-			}
-		}
-	}
+import { camelTo_ } from "../../utils/strTool";
+export default {
+    name: "JSteps",
+    props: {
+        direction: {
+            type: String,
+            default: "horizontal" //horizontal 横向 vertical 纵向
+        },
+        iconWidth: {
+            type: Number,
+            default: 50
+        },
+        sortBy: {
+            type: String,
+            default: "time"
+        },
+        lineStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    color: "skyblue",
+                    height: "100px"
+                };
+            }
+        },
+        titleStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    fontWeight: "bold"
+                };
+            }
+        },
+        descriptStyle: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        timeStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    fontWeight: "bold"
+                };
+            }
+        },
+        dataList: {
+            type: Array,
+            default: () => {
+                return [
+                    {
+                        title: "版本0.1.4",
+                        descript: "优化：代码高亮组件",
+                        time: "2021-12-01",
+                        icon: "图标"
+                    },
+                    {
+                        title: "版本0.1.3",
+                        descript: "增加：悬浮按钮组件，弹窗组件",
+                        time: "2021-11-28",
+                        icon: "图标"
+                    },
+                    {
+                        title: "版本0.1.2",
+                        descript: "增加：数字滚动变化效果组件",
+                        time: "2021-11-26",
+                        icon: "图标"
+                    },
+                    {
+                        title: "版本0.1.1",
+                        descript: "项目搭建",
+                        time: "2021-11-24",
+                        icon: "图标"
+                    },
+                    {
+                        title: "版本0.1.0",
+                        descript: "创建npm库",
+                        time: "2021-11-22",
+                        icon: "图标"
+                    }
+                ];
+            }
+        }
+    },
+    data() {
+        return {
+            showDataList: 0
+        };
+    },
+    created() {},
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.initData();
+            let jSteps = document.getElementById("j-steps");
+            parent = jSteps.parentElement;
+            console.log("---", jSteps, parent, parent.offsetWidth);
+        },
+        initData() {
+            if (this.sortBy) {
+                this.showDataList = this.dataList.sort((a, b) => {
+                    return a[this.sortBy] - b[this.sortBy];
+                });
+            } else {
+                this.showDataList = this.dataList;
+            }
+        },
+        obj2Style(obj, res = "") {
+            for (let k in obj) {
+                res += camelTo_(k) + ":" + obj[k] + ";";
+            }
+            return res;
+        },
+        getLineStyle() {
+            let res = "";
+            const lineStyle = this.lineStyle;
+            for (let k in lineStyle) {
+                if (k == "height") {
+                    res += "min-height:" + lineStyle["height"] + ";";
+                } else if (k == "color") {
+                    res += "border:1px solid " + lineStyle["color"] + ";";
+                } else {
+                    res += camelTo_(k) + ":" + lineStyle[k] + ";";
+                }
+            }
+            if (!lineStyle["color"]) res += "border:1px solid skyblue;";
+            if (!lineStyle["height"]) res += "min-height:200px;";
+            return res;
+        },
+        barClick(index) {
+            this.showTab = index;
+            this.$emit("clickTab", index);
+        },
+        getBarClass(index, val = "") {
+            let res = "";
+            if (index == this.showTab) {
+                res += "active-tab";
+            }
+            return res + " " + val;
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped="scoped">
-	
+.j-steps {
+    width: 100%;
+    .j-steps-item {
+        .item-content {
+            display: flex;
+            .content-left,
+            .content-right {
+                flex: 1;
+            }
+            .v-line {
+                width: 0px;
+            }
+        }
+        .item-header {
+            display: flex;
+            // min-width: 200px;
+            height: 52px;
+            .hold-box {
+                height: 52px;
+                line-height: 52px;
+            }
+            .left-box,
+            .right-box {
+                // flex: 1;
+                width: calc(50% - 25px);
+                max-height: 26px;
+                display: flex;
+                flex-direction: column;
+                .top-box {
+                    flex: 1;
+                    border-bottom: 1px solid rgba(100, 173, 254, 0.6);
+                }
+                .bottom-box {
+                    flex: 1;
+                    border-top: 1px solid rgba(100, 173, 254, 0.6);
+                }
+            }
+            .item-icon {
+                width: 50px;
+                height: 50px;
+                border: 1px deepskyblue solid;
+                border-radius: 50%;
+                line-height: 50px;
+                text-align: center;
+            }
+        }
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/packages/JTable/index.js b/JYeontuComponentWarehouse/packages/JTable/index.js
index 73ec90d6d566e126fd33dccea5a95ee223276e1c..1056082e8ed0152f506ba9ae7933c5a8e18f3963 100644
--- a/JYeontuComponentWarehouse/packages/JTable/index.js
+++ b/JYeontuComponentWarehouse/packages/JTable/index.js
@@ -1,5 +1,5 @@
-import JTable from './src/JTable.vue';
+import JTable from "./src/JTable.vue";
 
-JTable.install = Vue => Vue.component(JTable.name, JTable);//注册组件
+JTable.install = Vue => Vue.component(JTable.name, JTable); //注册组件
 
-export default JTable
\ No newline at end of file
+export default JTable;
diff --git a/JYeontuComponentWarehouse/packages/JTable/src/JTable.vue b/JYeontuComponentWarehouse/packages/JTable/src/JTable.vue
index a899beeaf1945959ceb5ce9607306b7b45f895ce..9be0673890fe7af9c140fc7c2f11b970c2f8b0cb 100644
--- a/JYeontuComponentWarehouse/packages/JTable/src/JTable.vue
+++ b/JYeontuComponentWarehouse/packages/JTable/src/JTable.vue
@@ -1,197 +1,188 @@
 <template>
-  <div class="j-table-content">
-    <table class="j-table">
-      <tr class="j-table-tr j-table-title">
-        <th v-for="(item,index) in title"
-            :key="item.key"
-            class="j-table-tr-th"
-        >
-          {{item.title}}
-          <button v-if="item.sort"
-                  @click="sortByKey(item.key,index)"
-                  :title="getSortWay(item)"
-				  class="sort-btn"
-          >sort</button>
-        </th>
-      </tr>
-      <tr v-for="(item,index) in tableData"
-          :key="index"
-          class="j-table-tr">
-        <td v-for="(item1,index1) in title"
-            :key="index1"
-            class="j-table-tr-td"
-            :style="getStyle(item1)"
-        >
-          <input v-if="!item1.readOnly"
-                 v-model="item[item1.key]"
-                 class="j-table-tr-td-input"
-          />
-          <span :title="item[item1.key]" v-else>{{item[item1.key]}}</span>
-        </td>
-      </tr>
-    </table>
-  </div>
+    <div :id="id" class="j-table-content">
+        <table class="j-table">
+            <j-tr
+                :key="tableId"
+                :tableId="tableId"
+                :tableData="tableData"
+                :title="title"
+                showTitle="true"
+            ></j-tr>
+        </table>
+    </div>
 </template>
 
 <script>
-import {_toLittleCamel,camelTo_} from '../../utils/strTool'
-export default{
-  name:'JTable',
-  props:{
-    title:{//表格头
-      type:Array,
-      default(){
-        return [
-          {
-            title:'',//展示列名
-            key:'',//字段名
-            type: '', // 列类型
-            readOnly:'true',//是否只读
-            width:'',//列宽度
-            columnStyle: '', // 列样式
-            fixed: false,//是否固定
-            sort: false, // 是否支持排序
-            sortWay:'asc'//asc:升序,desc:降序
-          }
-        ];
-      }
+import { _toLittleCamel, camelTo_ } from "../../utils/strTool";
+import JTr from "./JTr.vue";
+export default {
+    name: "JTable",
+    components: {
+        JTr
     },
-    tableData:{//表格数据
-      type:Array,
-      default(){
-        return [];
-      }
-    }
-  },
-  data(){
-    return{
-
-    }
-  },
-  methods:{
-    //指定列排序
-    sortByKey(key,ind){
-      let tableData = this.tableData;
-      let title = this.title;
-      // console.log(key,title[ind]);
-      if(title[ind].sortWay == 'desc'){
-        tableData = tableData.sort((a,b)=>{
-          return b[key].localeCompare(a[key]);
-        })
-        title[ind].sortWay = 'asc';
-      }else{
-        tableData = tableData.sort((a,b)=>{
-          return a[key].localeCompare(b[key]);
-        })
-        title[ind].sortWay = 'desc';
-      }
-      // console.log(tableData);
+    props: {
+        tableId: {
+            type: String,
+            default: "1"
+        },
+        id: {
+            type: String,
+            default: "t"
+        },
+        title: {
+            //表格头
+            type: Array,
+            default() {
+                return [
+                    {
+                        title: "", //展示列名
+                        key: "", //字段名
+                        type: "", // 列类型
+                        readOnly: "true", //是否只读
+                        width: "", //列宽度
+                        columnStyle: "", // 列样式
+                        fixed: false, //是否固定
+                        sort: false, // 是否支持排序
+                        sortWay: "asc" //asc:升序,desc:降序
+                    }
+                ];
+            }
+        },
+        tableData: {
+            //表格数据
+            type: Array,
+            default() {
+                return [];
+            }
+        }
     },
-    //获取当前排序方式
-    getSortWay(item){
-      if(item.sortWay == 'desc'){
-        return '降序';
-      }
-      return '升序';
+    data() {
+        return {};
     },
-    //初始化表格
-    initTable(){
-      let title = this.title;
-      let th = document.getElementsByClassName('j-table-tr-th');
-      // console.log('initTable',th,title);
-      for(let i = 0; i < title.length; i++){
-        if(title[i].width){
-          th[i].style.maxWidth = title[i].width;
-          th[i].style.width = title[i].width;
-        }else{
-          // th[i].style.width = title[i].width;
-        }
-        if(title[i].columnStyle){
-          let style = title[i].columnStyle.split(';');
-          // console.log('style',style);
-          for(let item of style){
-            if(item == '') break;
-            item = item.split(':');
-            // console.log('item',_toLittleCamel(item[0]),item[1]);
-            th[i].style[_toLittleCamel(item[0])] = item[1];
-          }
-        }else{
-
+    methods: {
+        //指定列排序
+        sortByKey(key, ind) {
+            let tableData = this.tableData;
+            let title = this.title;
+            // console.log(key,title[ind]);
+            if (title[ind].sortWay == "desc") {
+                tableData = tableData.sort((a, b) => {
+                    return b[key].localeCompare(a[key]);
+                });
+                title[ind].sortWay = "asc";
+            } else {
+                tableData = tableData.sort((a, b) => {
+                    return a[key].localeCompare(b[key]);
+                });
+                title[ind].sortWay = "desc";
+            }
+            // console.log(tableData);
+        },
+        //获取当前排序方式
+        getSortWay(item) {
+            if (item.sortWay == "desc") {
+                return "降序";
+            }
+            return "升序";
+        },
+        //初始化表格
+        initTable() {
+            let title = this.title;
+            let t = document.getElementById(this.id);
+            let th = t.getElementsByClassName("j-table-tr-th");
+            // console.log(this.id, th);
+            // console.log('initTable',th,title);
+            for (let i = 0; i < title.length; i++) {
+                if (title[i].width) {
+                    th[i].style.maxWidth = title[i].width;
+                    th[i].style.width = title[i].width;
+                } else {
+                    // th[i].style.width = title[i].width;
+                }
+                if (title[i].columnStyle) {
+                    let style = title[i].columnStyle.split(";");
+                    // console.log('style',style);
+                    for (let item of style) {
+                        if (item == "") break;
+                        item = item.split(":");
+                        // console.log('item',_toLittleCamel(item[0]),item[1]);
+                        th[i].style[_toLittleCamel(item[0])] = item[1];
+                    }
+                } else {
+                }
+            }
+        },
+        //转化columnStyle的格式
+        getStyle(item1) {
+            let style = item1.columnStyle.split(";");
+            let res = "";
+            if (item1.width != "") {
+                res = "max-width:" + item1.width + ";";
+                res += "width:" + item1.width + ";";
+            }
+            for (let item of style) {
+                if (item == "") break;
+                item = item.split(":");
+                res += camelTo_(item[0]) + ":" + item[1] + ";";
+            }
+            return res;
         }
-      }
     },
-    //转化columnStyle的格式
-    getStyle(item1){
-      let style = item1.columnStyle.split(';');
-      let res = '';
-      if(item1.width != ''){
-        res = 'max-width:' + item1.width + ';';
-        res += 'width:' + item1.width + ';';
-      }
-      for(let item of style){
-        if(item == '') break;
-        item = item.split(':');
-        res += camelTo_(item[0]) + ':' + item[1] + ';';
-      }
-      return res;
+    mounted() {
+        this.initTable();
     }
-  },
-  mounted() {
-    this.initTable();
-  }
-}
+};
 </script>
 
 <style lang="scss" scoped>
-.j-table-content{
-	 overflow:scroll;
-	 overflow-y:hidden;
-	.j-table{
-	  border-collapse:collapse;
-	  table-layout:fixed;
-	  .j-table-title{
-	
-	  }
-	  .j-table-tr{
-	    border-bottom: 1px solid black;
-	    .j-table-tr-th{
-	      background-color: #0EB9E5;
-	      border-right: 1px solid grey;
-	      padding: 4px 4px 4px 4px;
-	      overflow: hidden;
-	      text-overflow:ellipsis;
-	      white-space: nowrap;
-		  .sort-btn{
-			background-color: dodgerblue;
-			border: none;
-			border-radius: 5px;
-			cursor: pointer;
-			margin-left: 0.2rem;
-		  }
-	    }
-	    .j-table-tr-th:last-child{
-	      border-right: none;
-	    }
-	    .j-table-tr-td{
-	      border-right: 1px solid grey;
-	      padding: 4px 4px 4px 4px;
-	      // overflow: hidden;
-	      text-overflow:ellipsis;
-	      // white-space: nowrap;
-		  word-wrap:break-word;
-		  word-break: break-all;
-	      .j-table-tr-td-input{
-	        border: 0;  // 去除未选中状态边框
-	        outline: none; // 去除选中状态边框
-	        background-color: rgba(0, 0, 0, 0);// 透明背景
-	        text-align: center;
-	        width: inherit;
-	      }
-	    }
-	    .j-table-tr-td:last-child{
-	      border-right: none;
-	    }
-	  }
-	}
+.j-table-content {
+    overflow: scroll;
+    overflow-y: hidden;
+    .j-table {
+        border-collapse: collapse;
+        table-layout: fixed;
+        .j-table-title {
+        }
+        .j-table-tr {
+            border-bottom: 1px solid black;
+            .j-table-tr-th {
+                background-color: #0eb9e5;
+                border-right: 1px solid grey;
+                padding: 4px 4px 4px 4px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                .sort-btn {
+                    background-color: dodgerblue;
+                    border: none;
+                    border-radius: 5px;
+                    cursor: pointer;
+                    margin-left: 0.2rem;
+                }
+            }
+            .j-table-tr-th:last-child {
+                border-right: none;
+            }
+            .j-table-tr-td {
+                border-right: 1px solid grey;
+                padding: 4px 4px 4px 4px;
+                // overflow: hidden;
+                text-overflow: ellipsis;
+                // white-space: nowrap;
+                word-wrap: break-word;
+                word-break: break-all;
+                .j-table-tr-td-input {
+                    border: 0; // 去除未选中状态边框
+                    outline: none; // 去除选中状态边框
+                    background-color: rgba(0, 0, 0, 0); // 透明背景
+                    text-align: center;
+                    width: inherit;
+                }
+            }
+            .j-table-tr-td:last-child {
+                border-right: none;
+            }
+        }
+    }
 }
 </style>
diff --git a/JYeontuComponentWarehouse/packages/JTable/src/JTr.vue b/JYeontuComponentWarehouse/packages/JTable/src/JTr.vue
new file mode 100644
index 0000000000000000000000000000000000000000..42cfe116b2efcd049c6d681c90e5c332263fadf7
--- /dev/null
+++ b/JYeontuComponentWarehouse/packages/JTable/src/JTr.vue
@@ -0,0 +1,265 @@
+<template>
+    <td class="j-tr-content" :colspan="title.length" :style="getMargin()">
+        <template v-for="(item, index) in tableData">
+            <tr
+                class="j-table-tr j-table-title"
+                :key="tableId + '-' + index"
+                v-if="showTitle && index === 0"
+            >
+                <td
+                    v-for="(item, index) in title"
+                    :key="item.key"
+                    :width="item.width"
+                    class="j-table-tr-th"
+                >
+                    {{ item.title }}
+                    <button
+                        v-if="item.sort"
+                        @click="sortByKey(item.key, index)"
+                        :title="getSortWay(item)"
+                        class="sort-btn"
+                    >
+                        sort
+                    </button>
+                </td>
+            </tr>
+            <tr :key="tableId + '-' + index" class="j-tr-tr">
+                <td
+                    v-for="(item1, index1) in title"
+                    :key="index1"
+                    class="j-tr-tr-td"
+                    :style="getStyle(item1)"
+                >
+                    <input
+                        v-if="!item1.readOnly"
+                        v-model="item[item1.key]"
+                        class="j-tr-tr-td-input"
+                    />
+                    <span :title="item[item1.key]" v-else>
+                        <span
+                            v-if="item.children && index1 == 0"
+                            @click="cellClick(index)"
+                            style="cursor: pointer;color:skyblue;font-weight:bold;"
+                        >
+                            {{
+                                expendList.indexOf(tableId + "-" + index) == -1
+                                    ? ">"
+                                    : "v"
+                            }}
+                        </span>
+                        {{ item[item1.key] }}
+                    </span>
+                </td>
+            </tr>
+            <j-tr
+                v-if="expendList.indexOf(tableId + '-' + index) != -1"
+                :key="tableId + '-' + index"
+                :tableId="tableId + '-' + index"
+                :tableData="item.children.data"
+                :title="item.children.title"
+            ></j-tr>
+        </template>
+    </td>
+</template>
+
+<script>
+import { _toLittleCamel, camelTo_ } from "../../utils/strTool";
+export default {
+    name: "JTr",
+    props: {
+        tableId: {
+            type: String,
+            default: "1"
+        },
+        showTitle: {
+            type: Boolean,
+            default: true
+        },
+        title: {
+            //表格头
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        tableData: {
+            //表格数据
+            type: Array,
+            default() {
+                return [];
+            }
+        }
+    },
+    data() {
+        return {
+            expendList: []
+        };
+    },
+    methods: {
+        getMargin() {
+            let ind = this.tableId.split("-").length - 1;
+            return "padding-left:" + 0.4 * ind + "rem";
+        },
+        getShow(index) {
+            let flag = this.tableId + "-" + index;
+            return flag; //this.expendList.indexOf(flag) != -1;
+        },
+        cellClick(index) {
+            let flag = this.tableId + "-" + index;
+            let ind = this.expendList.indexOf(flag);
+            // console.log(flag, ind, this.expendList);
+            if (ind == -1) {
+                this.expendList.push(flag);
+            } else {
+                this.expendList.splice(ind, 1);
+            }
+        },
+        //指定列排序
+        sortByKey(key, ind) {
+            let tableData = this.tableData;
+            let title = this.title;
+            // console.log(key,title[ind]);
+            if (title[ind].sortWay == "desc") {
+                tableData = tableData.sort((a, b) => {
+                    return b[key].localeCompare(a[key]);
+                });
+                title[ind].sortWay = "asc";
+            } else {
+                tableData = tableData.sort((a, b) => {
+                    return a[key].localeCompare(b[key]);
+                });
+                title[ind].sortWay = "desc";
+            }
+        },
+        //获取当前排序方式
+        getSortWay(item) {
+            if (item.sortWay == "desc") {
+                return "降序";
+            }
+            return "升序";
+        },
+        initTitle() {
+            let title = this.title;
+            if (title.length === 0) {
+                this.showTitle = false;
+                const key = Object.keys(this.tableData[0]);
+                let width = (1 / key.length) * 100;
+                width = width.toFixed(2) + "vw";
+                for (const k in this.tableData[0]) {
+                    const obj = {
+                        title: k, //展示列名
+                        key: k, //字段名
+                        type: "text", // 列类型
+                        readOnly: "true", //是否只读
+                        width: width, //列宽度
+                        columnStyle: "", // 列样式
+                        fixed: false, //是否固定
+                        sort: false, // 是否支持排序
+                        sortWay: "asc" //asc:升序,desc:降序
+                    };
+                    title.push(obj);
+                }
+            }
+        },
+        //初始化表格
+        initTable() {
+            let th = document.getElementsByClassName("j-tr-tr-th");
+            // console.log('initTable',th,title);
+            for (let i = 0; i < title.length; i++) {
+                if (title[i].width) {
+                    th[i].style.maxWidth = title[i].width;
+                    th[i].style.width = title[i].width;
+                } else {
+                    // th[i].style.width = title[i].width;
+                }
+                if (title[i].columnStyle) {
+                    let style = title[i].columnStyle.split(";");
+                    // console.log('style',style);
+                    for (let item of style) {
+                        if (item == "") break;
+                        item = item.split(":");
+                        // console.log('item',_toLittleCamel(item[0]),item[1]);
+                        th[i].style[_toLittleCamel(item[0])] = item[1];
+                    }
+                } else {
+                }
+            }
+        },
+        //转化columnStyle的格式
+        getStyle(item1) {
+            let style = item1.columnStyle.split(";");
+            let res = "";
+            if (item1.width != "") {
+                res = "max-width:" + item1.width + ";";
+                res += "width:" + item1.width + ";";
+            }
+            for (let item of style) {
+                if (item == "") break;
+                item = item.split(":");
+                res += camelTo_(item[0]) + ":" + item[1] + ";";
+            }
+            return res;
+        }
+    },
+    mounted() {
+        this.initTitle();
+        this.initTable();
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.j-tr-content {
+    border-bottom: 1px solid black;
+    margin-bottom: 1rem;
+    &:last-child {
+        border-bottom: none;
+    }
+    .j-table-tr {
+        border-bottom: 1px solid black;
+        .j-table-tr-th {
+            background-color: #0eb9e5;
+            border-right: 1px solid grey;
+            padding: 4px 4px 4px 4px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            .sort-btn {
+                background-color: dodgerblue;
+                border: none;
+                border-radius: 5px;
+                cursor: pointer;
+                margin-left: 0.2rem;
+            }
+        }
+    }
+    .j-tr-tr:last-child {
+        border-bottom: none;
+    }
+    .j-tr-tr {
+        .j-table-tr-th:last-child {
+            border-right: none;
+        }
+        border-top: 1px solid black;
+        .j-tr-tr-td {
+            border-right: 1px solid grey;
+            padding: 4px 4px 4px 4px;
+            // overflow: hidden;
+            text-overflow: ellipsis;
+            // white-space: nowrap;
+            word-wrap: break-word;
+            word-break: break-all;
+            .j-tr-tr-td-input {
+                border: 0; // 去除未选中状态边框
+                outline: none; // 去除选中状态边框
+                background-color: rgba(0, 0, 0, 0); // 透明背景
+                text-align: center;
+                width: inherit;
+            }
+        }
+        .j-tr-tr-td:last-child {
+            border-right: none;
+        }
+    }
+}
+</style>
diff --git a/JYeontuComponentWarehouse/packages/index.js b/JYeontuComponentWarehouse/packages/index.js
index 2bfecd1a99785b510f6d85958a46824be45f4a84..3efe24d5c8518389ca829b4d0cda4adb093799e8 100644
--- a/JYeontuComponentWarehouse/packages/index.js
+++ b/JYeontuComponentWarehouse/packages/index.js
@@ -1,42 +1,46 @@
-import JCalendar from './JCalendar'
-import JTable from './JTable'
-import JCanvasBroad from './JCanvasBroad' 
-import JCodeHeightLight from './JCodeHeightLight'
-import JFlowChart from './JFlowChart'
-import JElectronicNumber from './JElectronicNumber'
-import JNumRolling from './JNumRolling'
-import JDialog from './JDialog'
-import JHoverBtn from './JHoverBtn'
+import JCalendar from "./JCalendar";
+import JTable from "./JTable";
+import JCanvasBroad from "./JCanvasBroad";
+import JCodeHeightLight from "./JCodeHeightLight";
+import JFlowChart from "./JFlowChart";
+import JElectronicNumber from "./JElectronicNumber";
+import JNumRolling from "./JNumRolling";
+import JDialog from "./JDialog";
+import JHoverBtn from "./JHoverBtn";
+import JFloatDiv from "./JFloatDiv";
+import JSteps from "./JSteps";
 
 // 存储组件列表
 const components = [
-	JCalendar,
-	JTable,
-	JCanvasBroad,
-	JCodeHeightLight,
-	JFlowChart,
-	JElectronicNumber,
-	JNumRolling,
-	JDialog,
-	JHoverBtn
-]
+    JCalendar,
+    JTable,
+    JCanvasBroad,
+    JCodeHeightLight,
+    JFlowChart,
+    JElectronicNumber,
+    JNumRolling,
+    JDialog,
+    JHoverBtn,
+    JFloatDiv,
+    JSteps
+];
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
-const install = function (Vue) {
-	// 判断是否安装
-	if (install.installed) return
-	// 遍历注册全局组件
-	components.map(component => Vue.component(component.name, component))
-}
+const install = function(Vue) {
+    // 判断是否安装
+    if (install.installed) return;
+    // 遍历注册全局组件
+    components.map(component => Vue.component(component.name, component));
+};
 
 // 判断是否是直接引入文件
-if (typeof window !== 'undefined' && window.Vue) {
-	install(window.Vue)
+if (typeof window !== "undefined" && window.Vue) {
+    install(window.Vue);
 }
 
 export default {
-	// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
-	install,
-	// 以下是具体的组件列表
-	...components
-}
\ No newline at end of file
+    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
+    install,
+    // 以下是具体的组件列表
+    ...components
+};
diff --git a/JYeontuComponentWarehouse/packages/pagesTools/JTabBar.vue b/JYeontuComponentWarehouse/packages/pagesTools/JTabBar.vue
index 395cb83506e0347d84382660f28e245f5137798e..87e6affd2022900f421fbd17101f1b9ac66af166 100644
--- a/JYeontuComponentWarehouse/packages/pagesTools/JTabBar.vue
+++ b/JYeontuComponentWarehouse/packages/pagesTools/JTabBar.vue
@@ -1,89 +1,86 @@
 <template>
-	<div class="j-tab-bar">
-		<div class="bar-items">
-			<div v-for="(item,index) in tabList"
-				:key="item.id"
-				:class="getBarClass(index,'bar-item')"
-				:title="item.label"
-				@click="barClick(index)">
-				{{item.label}}
-			</div>
-		</div>
-		<div v-for="(item,index) in tabList" 
-			:key="item.id"
-			>
-			<slot v-if="item.id == tabList[showTab].id" 
-				:name="item.id">
-				
-			</slot>
-		</div>
-	</div>
+    <div class="j-tab-bar">
+        <div class="bar-items">
+            <div
+                v-for="(item, index) in tabList"
+                :key="item.id"
+                :class="getBarClass(index, 'bar-item')"
+                :title="item.label"
+                @click="barClick(index)"
+            >
+                {{ item.label }}
+            </div>
+        </div>
+        <div v-for="(item, index) in tabList" :key="item.id">
+            <slot v-if="item.id == tabList[showTab].id" :name="item.id"> </slot>
+        </div>
+    </div>
 </template>
 
 <script>
-	export default{
-		name:"JTabBar",
-		props:{
-			tabList:{
-				type:Array,
-				default:[
-					{
-						label:'tab',
-						id:'tab'
-					},
-					{
-						label:'tab1',
-						id:'tab1'
-					}
-				]
-			},
-			defaultShowTab:{
-				type:Number,
-				default:0
-			}
-		},
-		data() {
-			return{
-				showTab:0
-			}
-		},
-		created() {
-			this.init();
-		},
-		methods:{
-			init(){
-				this.showTab = this.defaultShowTab;
-			},
-			barClick(index){
-				this.showTab = index;
-				this.$emit('clickTab',index);
-			},
-			getBarClass(index,val=''){
-				let res = '';
-				if(index == this.showTab){
-					res += 'active-tab';
-				}
-				return res + ' ' + val;
-			}
-		}
-	}
+export default {
+    name: "JTabBar",
+    props: {
+        tabList: {
+            type: Array,
+            default: [
+                {
+                    label: "tab",
+                    id: "tab"
+                },
+                {
+                    label: "tab1",
+                    id: "tab1"
+                }
+            ]
+        },
+        defaultShowTab: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            showTab: 0
+        };
+    },
+    created() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.showTab = this.defaultShowTab;
+        },
+        barClick(index) {
+            this.showTab = index;
+            this.$emit("clickTab", index);
+        },
+        getBarClass(index, val = "") {
+            let res = "";
+            if (index == this.showTab) {
+                res += "active-tab";
+            }
+            return res + " " + val;
+        }
+    }
+};
 </script>
 
 <style lang="scss" scoped="scoped">
-	.j-tab-bar{
-		.bar-items{
-			display: flex;
-			flex-direction: row;
-			line-height: 2rem;
-			.bar-item{
-				flex: 1;
-				color: black;
-				border: 1px solid deepskyblue;
-				cursor: pointer;
-			}
-			.active-tab{
-				color: cadetblue;
-			}
-		}
-	}
+.j-tab-bar {
+    .bar-items {
+        display: flex;
+        flex-direction: row;
+        line-height: 2rem;
+        .bar-item {
+            flex: 1;
+            color: black;
+            border: 1px solid deepskyblue;
+            cursor: pointer;
+        }
+        .active-tab {
+            color: cadetblue;
+        }
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/packages/pagesTools/splitHorizontal.vue b/JYeontuComponentWarehouse/packages/pagesTools/splitHorizontal.vue
index 91b87d46a001dbe10c318e197970774e56b8274a..0d0ed2a655c0827bec490cb6a77289501721c95f 100644
--- a/JYeontuComponentWarehouse/packages/pagesTools/splitHorizontal.vue
+++ b/JYeontuComponentWarehouse/packages/pagesTools/splitHorizontal.vue
@@ -1,59 +1,58 @@
 <template>
-	<div>
-		<div class="view-header">
-			<slot name="header-p"></slot>
-		</div>
-		<div class="view-body">
-			<div class="left-p">
-				<slot name="left-p"></slot>
-			</div>
-			<div class="right-p">
-				<slot name="right-p"></slot>
-			</div>
-		</div>
-		<div class="mid-p">
-			<slot name="mid-p"></slot>
-		</div>
-		<div class="view-footer">
-			<slot name="footer-p"></slot>
-		</div>
-	</div>
+    <div>
+        <div class="view-header">
+            <slot name="header-p"></slot>
+        </div>
+        <div class="view-body">
+            <div class="left-p">
+                <slot name="left-p"></slot>
+            </div>
+            <div class="right-p">
+                <slot name="right-p"></slot>
+            </div>
+        </div>
+        <div class="mid-p">
+            <slot name="mid-p"></slot>
+        </div>
+        <div class="view-footer">
+            <slot name="footer-p"></slot>
+        </div>
+    </div>
 </template>
 
-<script>
-</script>
+<script></script>
 
 <style lang="scss" scoped>
-	.view-body{
-	  display: flex;
-	  flex-direction: row;
-	  .mid-p{
-		  width:100%;
-	  }
-	  .left-p{
-	    width: 42%;
-		margin-left: 2%;
-		height: inherit;
-	  }
-	  .right-p{
-	    width: 42%;
-		margin-top: 2rem;
-		margin-left: 10%;
-		height: inherit;
-	  }
-	}
-  @media screen and (max-width:1000px) {
-    .view-body{
-      display: flex;
-      flex-direction: column;
-	  margin-left:0;
-      .left-p{
+.view-body {
+    display: flex;
+    flex-direction: row;
+    .mid-p {
         width: 100%;
-      }
-      .right-p{
-        width: 80%;
-        margin: 2rem auto;
-      }
     }
-  }
+    .left-p {
+        width: 42%;
+        margin-left: 2%;
+        height: inherit;
+    }
+    .right-p {
+        width: 42%;
+        margin-top: 2rem;
+        margin-left: 10%;
+        height: inherit;
+    }
+}
+@media screen and (max-width: 1000px) {
+    .view-body {
+        display: flex;
+        flex-direction: column;
+        margin-left: 0;
+        .left-p {
+            width: 100%;
+        }
+        .right-p {
+            width: 80%;
+            margin: 2rem auto;
+        }
+    }
+}
 </style>
diff --git a/JYeontuComponentWarehouse/packages/utils/dateTool.js b/JYeontuComponentWarehouse/packages/utils/dateTool.js
index f9604725b5784fd89b91c4763ca7fdfd33b9cfa5..6a94f70293495c9480487f90090c697431a90e84 100644
--- a/JYeontuComponentWarehouse/packages/utils/dateTool.js
+++ b/JYeontuComponentWarehouse/packages/utils/dateTool.js
@@ -4,21 +4,21 @@
  * @return {Boolean}
  */
 
-export const isLeap = function (year) {
-    if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
-        return true
+export const isLeap = function(year) {
+    if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+        return true;
     }
-    return false
+    return false;
 };
 /**
  * 获取星期
  * @param {string} date 日期
  * @return {string} 星期
  */
-export const getWeek = function (date) {
-    let Stamp = new Date(date)
+export const getWeek = function(date) {
+    let Stamp = new Date(date);
     // return weeks[Stamp.getDay()];
-    let weeks = ['日','一','二','三','四','五','六'];
+    let weeks = ["日", "一", "二", "三", "四", "五", "六"];
     return weeks[Stamp.getDay()];
 };
 /**
@@ -27,30 +27,30 @@ export const getWeek = function (date) {
  * @param {string} month 月份
  * @return {number} 月份天数
  */
-export const getMonthDays = function (year, month) {
-    month = parseInt(month) - 1
-    if (month < 0 || month > 11) return ''
-    let months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+export const getMonthDays = function(year, month) {
+    month = parseInt(month) - 1;
+    if (month < 0 || month > 11) return "";
+    let months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
     if (isLeap(year)) {
-        months[1] = 29
+        months[1] = 29;
     }
-    return months[month]
+    return months[month];
 };
 /**
  * 数字补零
  * @param {string} str
  * @return {string}
  */
-export const zero = function (str) {
-    str = parseInt(str)
-    return str > 9 ? str : '0' + str
+export const zero = function(str) {
+    str = parseInt(str);
+    return str > 9 ? str : "0" + str;
 };
 /**
  * 获取今天日期
  * @param {string} str  日期格式
  * @return {string} 格式化日期
  */
-export const getToday = function (str = "yyyy-mm-dd") {
+export const getToday = function(str = "yyyy-mm-dd") {
     const date = new Date();
     const year = date.getFullYear(),
         month = zero(date.getMonth() + 1),
@@ -58,54 +58,65 @@ export const getToday = function (str = "yyyy-mm-dd") {
         hour = zero(date.getHours()),
         minute = zero(date.getMinutes()),
         second = zero(date.getSeconds());
-    let res = '';
-    switch (str){
+    let res = "";
+    switch (str) {
         case "yyyy-mm-dd":
-            res = year + '-' + month + '-' + day;
+            res = year + "-" + month + "-" + day;
             break;
         case "mm-dd-yyyy":
-            res = month + '-' + day + '-' + year;
+            res = month + "-" + day + "-" + year;
             break;
         case "yyyy-mm-dd hh:MM:ss":
-            res = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
+            res =
+                year +
+                "-" +
+                month +
+                "-" +
+                day +
+                " " +
+                hour +
+                ":" +
+                minute +
+                ":" +
+                second;
             break;
         case "hh:MM:ss":
-            res = hour + ':' + minute + ':' + second;
+            res = hour + ":" + minute + ":" + second;
             break;
         case "yyyy":
             res = year;
             break;
-		case "mm":
-			res = month;
-			break;
-		case "dd":
-			res = day;
-			break;
-		case "hh":
-			res = hour;
-			break;
-		case "MM":
-			res = minute;
-			break;
-		case "ss":
-			res = second;
-			break;
+        case "mm":
+            res = month;
+            break;
+        case "dd":
+            res = day;
+            break;
+        case "hh":
+            res = hour;
+            break;
+        case "MM":
+            res = minute;
+            break;
+        case "ss":
+            res = second;
+            break;
         case "mm-dd":
-            res = month + '-' + day;
+            res = month + "-" + day;
             break;
         default:
-            res = '参数错误';
+            res = "参数错误";
             break;
     }
     return res;
-}
+};
 /**
  * 将时间按照所传入的时间格式进行转换
  * @param {string} value  日期
  * @param {string} formatStr  日期格式
  * @return {string} 格式化日期
  */
-export const dateFormat = function (value,formatStr = 'yyyy-mm-dd') {
+export const dateFormat = function(value, formatStr = "yyyy-mm-dd") {
     const date = new Date(value);
     const year = date.getFullYear(),
         month = zero(date.getMonth() + 1),
@@ -113,115 +124,128 @@ export const dateFormat = function (value,formatStr = 'yyyy-mm-dd') {
         hour = zero(date.getHours()),
         minute = zero(date.getMinutes()),
         second = zero(date.getSeconds());
-    let res = '';
-    switch (formatStr){
+    let res = "";
+    switch (formatStr) {
         case "yyyy-mm-dd":
-            res = year + '-' + month + '-' + day;
+            res = year + "-" + month + "-" + day;
             break;
         case "mm-dd-yyyy":
-            res = month + '-' + day + '-' + year;
+            res = month + "-" + day + "-" + year;
             break;
         case "yyyy-mm-dd hh:MM:ss":
-            res = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
+            res =
+                year +
+                "-" +
+                month +
+                "-" +
+                day +
+                " " +
+                hour +
+                ":" +
+                minute +
+                ":" +
+                second;
             break;
         case "hh:MM:ss":
-            res = hour + ':' + minute + ':' + second;
+            res = hour + ":" + minute + ":" + second;
             break;
         case "yyyy":
             res = year;
-			break;
-		case "mm":
-			res = month;
-			break;
-		case "dd":
-			res = day;
-			break;
-		case "hh":
-			res = hour;
-			break;
-		case "MM":
-			res = minute;
-			break;
-		case "ss":
-			res = second;
+            break;
+        case "mm":
+            res = month;
+            break;
+        case "dd":
+            res = day;
+            break;
+        case "hh":
+            res = hour;
+            break;
+        case "MM":
+            res = minute;
+            break;
+        case "ss":
+            res = second;
             break;
         case "mm-dd":
-            res = month + '-' + day;
+            res = month + "-" + day;
             break;
         default:
-            res = '参数错误';
+            res = "参数错误";
             break;
     }
     return res;
-}
+};
 /**
  * 获取上一天日期
  * @param {string} str  当前日期
  * @return {string} 上一天日期
  */
-export const getYesterday = function (str) {
-    let date = str.split('-');
+export const getYesterday = function(str) {
+    let date = str.split("-");
     let year = parseInt(date[0]),
         month = parseInt(date[1]),
         day = parseInt(date[2]);
-    if(month > 12 || month < 1 || day > getMonthDays(year,month)) return '日期不合法';
+    if (month > 12 || month < 1 || day > getMonthDays(year, month))
+        return "日期不合法";
     day -= 1;
-    if(day > 0){
-        return year + '-' + zero(month) + '-' + zero(day);
+    if (day > 0) {
+        return year + "-" + zero(month) + "-" + zero(day);
     }
     month -= 1;
-    if(month > 0){
-        return year + '-' + zero(month) + '-' + getMonthDays(year,month);
+    if (month > 0) {
+        return year + "-" + zero(month) + "-" + getMonthDays(year, month);
     }
     year -= 1;
-    return year + '-' + 12 + '-' + getMonthDays(year,12);
+    return year + "-" + 12 + "-" + getMonthDays(year, 12);
 };
 /**
  * 获取下一天日期
  * @param {string} str  当前日期
  * @return {string} 下一天日期
  */
-export const getTomorrow = function (str){
-    let date = str.split('-');
+export const getTomorrow = function(str) {
+    let date = str.split("-");
     let year = parseInt(date[0]),
         month = parseInt(date[1]),
         day = parseInt(date[2]);
-    if(month > 12 || month < 1 || day > getMonthDays(year,month)) return '日期不合法';
+    if (month > 12 || month < 1 || day > getMonthDays(year, month))
+        return "日期不合法";
     day += 1;
-    if(day <= getMonthDays(year,month)){
-        return year + '-' + zero(month) + '-' + zero(day);
+    if (day <= getMonthDays(year, month)) {
+        return year + "-" + zero(month) + "-" + zero(day);
     }
     month += 1;
-    if(month < 13){
-        return year + '-' + zero(month) + '-' + '01';
+    if (month < 13) {
+        return year + "-" + zero(month) + "-" + "01";
     }
     year += 1;
-    return year + '-' + '01' + '-' + '01';
-}
+    return year + "-" + "01" + "-" + "01";
+};
 /**
  * 获取前n天日期
  * @param {string} n  当前日期
  * @return {string} 前n天日期
  */
-export const beforeDay = function (date,n){
-	if(date.split('-').length < 3) return '日期格式错误';
-	let res = dateFormat(date);
-	n = parseInt(n);
-	while(n--){
-		res = getYesterday(res);
-	}
-	return res;
-}
+export const beforeDay = function(date, n) {
+    if (date.split("-").length < 3) return "日期格式错误";
+    let res = dateFormat(date);
+    n = parseInt(n);
+    while (n--) {
+        res = getYesterday(res);
+    }
+    return res;
+};
 /**
  * 获取后n天日期
  * @param {string} n  当前日期
  * @return {string} 后n天日期
  */
-export const afterDay = function (date,n){
-	if(date.split('-').length < 3) return '日期格式错误';
-	let res = dateFormat(date);
-	while(n--){
-		res = getTomorrow(res);
-	}
-	return res;
-}
+export const afterDay = function(date, n) {
+    if (date.split("-").length < 3) return "日期格式错误";
+    let res = dateFormat(date);
+    while (n--) {
+        res = getTomorrow(res);
+    }
+    return res;
+};
diff --git a/JYeontuComponentWarehouse/packages/utils/numsFormat.js b/JYeontuComponentWarehouse/packages/utils/numsFormat.js
index 515a2af7b2fcfe6ff2ae5b8d633639029378d7d2..3da1c0099c3c4d2c4cf6444d8eafd590f3a48821 100644
--- a/JYeontuComponentWarehouse/packages/utils/numsFormat.js
+++ b/JYeontuComponentWarehouse/packages/utils/numsFormat.js
@@ -4,12 +4,45 @@
  * @return {string} 英文表示
  **/
 export const numberToWords = function(num) {
-    const singles = ["", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"];
-    const teens = ["Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen"];
-    const tens = ["", "Ten", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"];
+    const singles = [
+        "",
+        "One",
+        "Two",
+        "Three",
+        "Four",
+        "Five",
+        "Six",
+        "Seven",
+        "Eight",
+        "Nine"
+    ];
+    const teens = [
+        "Ten",
+        "Eleven",
+        "Twelve",
+        "Thirteen",
+        "Fourteen",
+        "Fifteen",
+        "Sixteen",
+        "Seventeen",
+        "Eighteen",
+        "Nineteen"
+    ];
+    const tens = [
+        "",
+        "Ten",
+        "Twenty",
+        "Thirty",
+        "Forty",
+        "Fifty",
+        "Sixty",
+        "Seventy",
+        "Eighty",
+        "Ninety"
+    ];
     const thousands = ["", "Thousand", "Million", "Billion"];
 
-    const toEnglish = (num) => {
+    const toEnglish = num => {
         const curr = [];
         const hundred = Math.floor(num / 100);
         num %= 100;
@@ -26,21 +59,25 @@ export const numberToWords = function(num) {
         } else if (num >= 10) {
             curr.push(teens[num - 10] + " ");
         }
-        return curr.join('');
-    }
+        return curr.join("");
+    };
 
     if (num === 0) {
         return "Zero";
     }
     const sb = [];
-    for (let i = 3, unit = 1000000000; i >= 0; i--, unit = Math.floor(unit / 1000)) {
+    for (
+        let i = 3, unit = 1000000000;
+        i >= 0;
+        i--, unit = Math.floor(unit / 1000)
+    ) {
         const curNum = Math.floor(num / unit);
         if (curNum !== 0) {
             num -= curNum * unit;
             sb.push(toEnglish(curNum) + thousands[i] + " ");
         }
     }
-    return sb.join('').trim();
+    return sb.join("").trim();
 };
 /**
  * @description 数字转换为大写中文表示
@@ -48,164 +85,179 @@ export const numberToWords = function(num) {
  * @return {string} 大写中文表示
  **/
 export const numberToChineseWords = money => {
-  // 汉字的数字
-  const cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
-  // 基本单位
-  const cnIntRadice = ['', '拾', '佰', '仟']
-  // 对应整数部分扩展单位
-  const cnIntUnits = ['', '万', '亿', '兆']
-  // 对应小数部分单位
-  const cnDecUnits = ['角', '分', '毫', '厘']
-  // 整数金额时后面跟的字符
-  const cnInteger = '整'
-  // 整型完以后的单位
-  const cnIntLast = '元'
-  // 最大处理的数字
-  const maxNum = 9999999999999999.99
-  // 金额整数部分
-  let integerNum
-  // 金额小数部分
-  let decimalNum
-  // 输出的中文金额字符串
-  let chineseStr = ''
-  // 分离金额后用的数组，预定义
-  let parts
-  if (money === '') { return '' }
-  money = parseFloat(money)
-  if (money >= maxNum) {
-    // 超出最大处理数字
-    return ''
-  }
-  if (money === 0) {
-    chineseStr = cnNums[0] + cnIntLast + cnInteger
-    return chineseStr
-  }
-  // 转换为字符串
-  money = money.toString()
-  if (money.indexOf('.') === -1) {
-    integerNum = money
-    decimalNum = ''
-  } else {
-    parts = money.split('.')
-    integerNum = parts[0]
-    decimalNum = parts[1].substr(0, 4)
-  }
-  console.log(integerNum, decimalNum)
-  // 获取整型部分转换
-  if (parseInt(integerNum, 10) > 0) {
-    var zeroCount = 0
-    var IntLen = integerNum.length
-    for (var i = 0; i < IntLen; i++) {
-      let n = integerNum.substr(i, 1)
-      let p = IntLen - i - 1
-      let q = p / 4
-      let m = p % 4
-      if (n === '0') {
-        zeroCount++
-      } else {
-        if (zeroCount > 0) {
-          chineseStr += cnNums[0]
+    // 汉字的数字
+    const cnNums = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
+    // 基本单位
+    const cnIntRadice = ["", "拾", "佰", "仟"];
+    // 对应整数部分扩展单位
+    const cnIntUnits = ["", "万", "亿", "兆"];
+    // 对应小数部分单位
+    const cnDecUnits = ["角", "分", "毫", "厘"];
+    // 整数金额时后面跟的字符
+    const cnInteger = "整";
+    // 整型完以后的单位
+    const cnIntLast = "元";
+    // 最大处理的数字
+    const maxNum = 9999999999999999.99;
+    // 金额整数部分
+    let integerNum;
+    // 金额小数部分
+    let decimalNum;
+    // 输出的中文金额字符串
+    let chineseStr = "";
+    // 分离金额后用的数组，预定义
+    let parts;
+    if (money === "") {
+        return "";
+    }
+    money = parseFloat(money);
+    if (money >= maxNum) {
+        // 超出最大处理数字
+        return "";
+    }
+    if (money === 0) {
+        chineseStr = cnNums[0] + cnIntLast + cnInteger;
+        return chineseStr;
+    }
+    // 转换为字符串
+    money = money.toString();
+    if (money.indexOf(".") === -1) {
+        integerNum = money;
+        decimalNum = "";
+    } else {
+        parts = money.split(".");
+        integerNum = parts[0];
+        decimalNum = parts[1].substr(0, 4);
+    }
+    console.log(integerNum, decimalNum);
+    // 获取整型部分转换
+    if (parseInt(integerNum, 10) > 0) {
+        var zeroCount = 0;
+        var IntLen = integerNum.length;
+        for (var i = 0; i < IntLen; i++) {
+            let n = integerNum.substr(i, 1);
+            let p = IntLen - i - 1;
+            let q = p / 4;
+            let m = p % 4;
+            if (n === "0") {
+                zeroCount++;
+            } else {
+                if (zeroCount > 0) {
+                    chineseStr += cnNums[0];
+                }
+                // 归零
+                zeroCount = 0;
+                chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
+            }
+            if (m === 0 && zeroCount < 4) {
+                chineseStr += cnIntUnits[q];
+            }
+        }
+        chineseStr += cnIntLast;
+    }
+    // 小数部分
+    if (decimalNum !== "") {
+        var decLen = decimalNum.length;
+        for (let i = 0; i < decLen; i++) {
+            let n = decimalNum.substr(i, 1);
+            if (n !== "0") {
+                chineseStr += cnNums[Number(n)] + cnDecUnits[i];
+            }
         }
-        // 归零
-        zeroCount = 0
-        chineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
-      }
-      if (m === 0 && zeroCount < 4) {
-        chineseStr += cnIntUnits[q]
-      }
     }
-    chineseStr += cnIntLast
-  }
-  // 小数部分
-  if (decimalNum !== '') {
-    var decLen = decimalNum.length
-    for (let i = 0; i < decLen; i++) {
-      let n = decimalNum.substr(i, 1)
-      if (n !== '0') {
-        chineseStr += cnNums[Number(n)] + cnDecUnits[i]
-      }
+    if (chineseStr === "") {
+        chineseStr += cnNums[0] + cnIntLast + cnInteger;
+    } else if (decimalNum === "") {
+        chineseStr += cnInteger;
     }
-  }
-  if (chineseStr === '') {
-    chineseStr += cnNums[0] + cnIntLast + cnInteger
-  } else if (decimalNum === '') {
-    chineseStr += cnInteger
-  }
-  return chineseStr
+    return chineseStr;
 };
 
 /**
  * @description 数字千分位分隔
  * @param {String} num 数字
- * @param {String} separator 分隔符,默认为英文逗号','  
- * @return {String} 千分位分隔后的数字  
+ * @param {String} separator 分隔符,默认为英文逗号','
+ * @return {String} 千分位分隔后的数字
  **/
- export const numberToSplitWords = function(num,separator=','){
-	 num = num.toString();
-	 if(num.length < 3) return num;
-	 let flag = '';
-	 if(num[0] == '-'){
-		 flag = '-';
-		 num = num.substr(1);
-	 }
-	 num = num.split('.');
-	 const num1 = num[0],len1 = num[0].length;
-	 let res = '';
-	 for(let i = 0; i < num1.length; i++){
-		 if(i != 0 && i % 3 == 0){
-			 res = separator + res;
-		 }
-		 res = num1[len1 - i - 1] + res;
-	 }
-	 if(num.length > 1){
-		 res += '.';
-		 const num2 = num[1],len2 = num[1].length;
-		 for(let i = 0; i < num2.length; i++){
-		 		 if(i != 0 && i % 3 == 0){
-		 			 res += separator;
-		 		 }
-		 		 res += num2[i];
-		 }
-	 }
-	 return flag + res;
- };
- 
- /**
-  * @description 整数转罗马数字
-  * @param {number} num 整数
-  * @return {string} 罗马数字
-  */
+export const numberToSplitWords = function(num, separator = ",") {
+    num = num.toString();
+    if (num.length < 3) return num;
+    let flag = "";
+    if (num[0] == "-") {
+        flag = "-";
+        num = num.substr(1);
+    }
+    num = num.split(".");
+    const num1 = num[0],
+        len1 = num[0].length;
+    let res = "";
+    for (let i = 0; i < num1.length; i++) {
+        if (i != 0 && i % 3 == 0) {
+            res = separator + res;
+        }
+        res = num1[len1 - i - 1] + res;
+    }
+    if (num.length > 1) {
+        res += ".";
+        const num2 = num[1],
+            len2 = num[1].length;
+        for (let i = 0; i < num2.length; i++) {
+            if (i != 0 && i % 3 == 0) {
+                res += separator;
+            }
+            res += num2[i];
+        }
+    }
+    return flag + res;
+};
+
+/**
+ * @description 整数转罗马数字
+ * @param {number} num 整数
+ * @return {string} 罗马数字
+ */
 export const intToRoman = function(num) {
-	//num > 0 && num <= 3999
-	if(num <= 0 || num > 3999) return '数字范围应该为1~3999';
+    //num > 0 && num <= 3999
+    if (num <= 0 || num > 3999) return "数字范围应该为1~3999";
     const thousands = ["", "M", "MM", "MMM"];
-    const hundreds = ["", "C", "CC", "CCC", "CD", "D", "DC", "DCC", "DCCC", "CM"];
-    const tens     = ["", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XC"];
-    const ones     = ["", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"];
+    const hundreds = [
+        "",
+        "C",
+        "CC",
+        "CCC",
+        "CD",
+        "D",
+        "DC",
+        "DCC",
+        "DCCC",
+        "CM"
+    ];
+    const tens = ["", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XC"];
+    const ones = ["", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"];
 
     const roman = [];
-	num = parseInt(num);
+    num = parseInt(num);
     roman.push(thousands[Math.floor(num / 1000)]);
-    roman.push(hundreds[Math.floor(num % 1000 / 100)]);
-    roman.push(tens[Math.floor(num % 100 / 10)]);
+    roman.push(hundreds[Math.floor((num % 1000) / 100)]);
+    roman.push(tens[Math.floor((num % 100) / 10)]);
     roman.push(ones[num % 10]);
-    return roman.join('');
+    return roman.join("");
 };
 
 /**
-  * @description 罗马数字转整数
+ * @description 罗马数字转整数
  * @param {string} s 罗马数字
  * @return {number} 整数
  */
 export const romanToInt = function(s) {
     const symbolValues = new Map();
-    symbolValues.set('I', 1);
-    symbolValues.set('V', 5);
-    symbolValues.set('X', 10);
-    symbolValues.set('L', 50);
-    symbolValues.set('C', 100);
-    symbolValues.set('D', 500);
-    symbolValues.set('M', 1000);  
+    symbolValues.set("I", 1);
+    symbolValues.set("V", 5);
+    symbolValues.set("X", 10);
+    symbolValues.set("L", 50);
+    symbolValues.set("C", 100);
+    symbolValues.set("D", 500);
+    symbolValues.set("M", 1000);
     let ans = 0;
     const n = s.length;
     for (let i = 0; i < n; ++i) {
diff --git a/JYeontuComponentWarehouse/packages/utils/strTool.js b/JYeontuComponentWarehouse/packages/utils/strTool.js
index 20a4e2416759b52953e4af8ef8efbe0624db0aaf..0cedd52827fd2b22002b498f0ae0fc78810b614c 100644
--- a/JYeontuComponentWarehouse/packages/utils/strTool.js
+++ b/JYeontuComponentWarehouse/packages/utils/strTool.js
@@ -3,45 +3,45 @@
  * @param {String} str 需要转换的字符串
  * @return {String} 小驼峰形式字符串
  **/
-export const _toLittleCamel = function(str){
-	let newStr = str.split('-');
-	if(newStr.length <= 1) return str;
-	let res = newStr[0];
-	for(let i = 1; i < newStr.length; i++){
-		res += newStr[i][0].toUpperCase() + newStr[i].substr(1);
-	}
-	return res;
-}
+export const _toLittleCamel = function(str) {
+    let newStr = str.split("-");
+    if (newStr.length <= 1) return str;
+    let res = newStr[0];
+    for (let i = 1; i < newStr.length; i++) {
+        res += newStr[i][0].toUpperCase() + newStr[i].substr(1);
+    }
+    return res;
+};
 /**
  * @description '-'连接命名转换成大驼峰命名
  * @param {String} str 需要转换的字符串
  * @return {String} 大驼峰形式字符串
  **/
-export const _toBigCamel = function(str){
-	let newStr = str.split('-');
-	if(newStr.length <= 1) return str;
-	let res = '';
-	for(let i = 0; i < newStr.length; i++){
-		res += newStr[i][0].toUpperCase() + newStr[i].substr(1);
-	}
-	return res;
-}
+export const _toBigCamel = function(str) {
+    let newStr = str.split("-");
+    if (newStr.length <= 1) return str;
+    let res = "";
+    for (let i = 0; i < newStr.length; i++) {
+        res += newStr[i][0].toUpperCase() + newStr[i].substr(1);
+    }
+    return res;
+};
 /**
  * @description 驼峰命名转换成'-'连接命名
  * @param {String} str 需要转换的字符串
  * @return {String} '-'连接形式字符串
  **/
-export const camelTo_ = function(str){
-	let res = '';
-	for(let i = 0; i < str.length; i++){
-		if(str[i] >= 'A' && str[i] <= 'Z'){
-			if(i == 0) res += str[i].toLowerCase();
-			else{
-				res += '-' + str[i].toLowerCase();
-			}
-		}else{
-			res += str[i];
-		}
-	}
-	return res;
-}
+export const camelTo_ = function(str) {
+    let res = "";
+    for (let i = 0; i < str.length; i++) {
+        if (str[i] >= "A" && str[i] <= "Z") {
+            if (i == 0) res += str[i].toLowerCase();
+            else {
+                res += "-" + str[i].toLowerCase();
+            }
+        } else {
+            res += str[i];
+        }
+    }
+    return res;
+};
diff --git a/JYeontuComponentWarehouse/postcss.config.js b/JYeontuComponentWarehouse/postcss.config.js
index 961986e2b11eeebe1d4ddabdf2e6c85e2a2562e0..59ea1f32094b6d9ed78dfe48ca13e6428f479e6d 100644
--- a/JYeontuComponentWarehouse/postcss.config.js
+++ b/JYeontuComponentWarehouse/postcss.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: {
-    autoprefixer: {}
-  }
-}
+    plugins: {
+        autoprefixer: {}
+    }
+};
diff --git a/JYeontuComponentWarehouse/public/index.html b/JYeontuComponentWarehouse/public/index.html
index 344254ab191dc3cfe58dfe7f8f759e7388a26afb..5dcd8dbabcb475cd4ba3801cb9c1f542729a852f 100644
--- a/JYeontuComponentWarehouse/public/index.html
+++ b/JYeontuComponentWarehouse/public/index.html
@@ -1,17 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>JYeontu组件库</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+        <title>JYeontu组件库</title>
+    </head>
+    <body>
+        <noscript>
+            <strong
+                >We're sorry but default doesn't work properly without
+                JavaScript enabled. Please enable it to continue.</strong
+            >
+        </noscript>
+        <div id="app"></div>
+        <!-- built files will be auto injected -->
+    </body>
 </html>
diff --git a/JYeontuComponentWarehouse/vue.config.js b/JYeontuComponentWarehouse/vue.config.js
index 70eaa6a489ca388489fd04c1589aa800ec451828..bc14587022f9047d125cfab90a797f5c7ea370b6 100644
--- a/JYeontuComponentWarehouse/vue.config.js
+++ b/JYeontuComponentWarehouse/vue.config.js
@@ -1,54 +1,53 @@
-const CompressionPlugin = require('compression-webpack-plugin')
+const CompressionPlugin = require("compression-webpack-plugin");
 
-let path = require('path')
-function resolve (dir) {
-	return path.join(__dirname, dir)
+let path = require("path");
+function resolve(dir) {
+    return path.join(__dirname, dir);
 }
 module.exports = {
-  productionSourceMap: false, // 不生成map文件，解决项目上线首次打开加载慢的问题
-  publicPath: './', // 解决打包文件，访问空白的文件路径问题
+    productionSourceMap: false, // 不生成map文件，解决项目上线首次打开加载慢的问题
+    publicPath: "./", // 解决打包文件，访问空白的文件路径问题
 
-  pages: {
-    // lintOnSave: false,
-    index: {
-      entry: "examples/main.js",
-      template: "public/index.html",
-      filename: "index.html"
-    }
-  },
-  
-  chainWebpack: config => {
-	// 用@设置自定义地址
-	// 配置快捷路径，@为路径名字，resolve是原路径地址
-	config.resolve.alias
-	.set('@', resolve('examples')) // key,value自行定义，比如.set('@@', resolve('src/components'))
-	.set('~', resolve('packages'))
+    pages: {
+        // lintOnSave: false,
+        index: {
+            entry: "examples/main.js",
+            template: "public/index.html",
+            filename: "index.html"
+        }
+    },
+
+    chainWebpack: config => {
+        // 用@设置自定义地址
+        // 配置快捷路径，@为路径名字，resolve是原路径地址
+        config.resolve.alias
+            .set("@", resolve("examples")) // key,value自行定义，比如.set('@@', resolve('src/components'))
+            .set("~", resolve("packages"));
 
-	// gzip 压缩配置
-    if (process.env.NODE_ENV === 'production') {
-      return {
+        // gzip 压缩配置
+        if (process.env.NODE_ENV === "production") {
+            return {
                 // gzip会对js、css文件进行压缩处理（压缩效果比较明显，能压缩至原来的1/3左右）；对于图片进行压缩问题，对于png，jpg，jpeg没有压缩效果，对于svg，ico文件以及bmp文件压缩效果达到50%，在productionGzipExtensions: ['js', 'css','svg']设置需要进行压缩的什么格式的文件。
-        plugins: [
-          new CompressionPlugin({
-            test: /\.(js|css)(\?.*)?$/i, // 需要压缩的文件正则
-            threshold: 10240, // 对超过10k的数据进行压缩
-            deleteOriginalAssets: false // 是否删除原文件
-          })
-        ]
-      }
+                plugins: [
+                    new CompressionPlugin({
+                        test: /\.(js|css)(\?.*)?$/i, // 需要压缩的文件正则
+                        threshold: 10240, // 对超过10k的数据进行压缩
+                        deleteOriginalAssets: false // 是否删除原文件
+                    })
+                ]
+            };
+        }
     }
-  },
     // cdn使用了cdn 可以忽略打包第三方库
-  // configureWebpack: {
-  //   externals: {
-  //     'vue': 'Vue',
-  //     'vue-router': 'VueRouter',
-  //     'vuex': 'Vuex',
-  //     // 'axios': 'axios',
-  //     'element-ui': 'ELEMENT',
-  //     // 'moment': 'moment',
-  //     'echarts': 'echarts'
-  //   }
-  // }
-
-}
+    // configureWebpack: {
+    //   externals: {
+    //     'vue': 'Vue',
+    //     'vue-router': 'VueRouter',
+    //     'vuex': 'Vuex',
+    //     // 'axios': 'axios',
+    //     'element-ui': 'ELEMENT',
+    //     // 'moment': 'moment',
+    //     'echarts': 'echarts'
+    //   }
+    // }
+};
diff --git a/README.md b/README.md
index f8b7af76de51b000e0c2911fbd059d36b58708ab..bc2cc27576a04f41e7ef1f04cad36e3e8dd8e802 100644
--- a/README.md
+++ b/README.md
@@ -4,25 +4,52 @@
 日常开发组件/工具库
 vue组件 + js函数工具
 
-#### 软件架构
+封装一些有趣（实用的小组件），后续会不断迭代优化。
 
+#### 安装教程
 
+##### 本地启动项目
 
-#### 安装教程
-1.  git clone 
+1.  git clone https://gitee.com/zheng_yongtao/jyeontu-component-warehouse.git
 2.  npm install
 3.  npm run serve
 
-#### 效果预览
-[预览地址](http://jyeontu.xyz/JYeontuComponents/#/homePage)
+##### 项目引入
+
+###### npm 安装
+
+推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
+
+```shell
+npm i @jyeontu/jvuewheel -S
+```
 
-[预览地址(备用)](http://120.79.163.94/JYeontuComponents/#/flowChartView)
+###### main.js引入
 
-#### 使用说明
+引入后便可以在项目中直接使用
 
-1.  JYeontuCalendar（日历组件）：[https://blog.csdn.net/Twinkle_sone/article/details/120465663](http://https://blog.csdn.net/Twinkle_sone/article/details/120465663)
-2.  electronicNumber（电子屏数字组件）：[https://blog.csdn.net/Twinkle_sone/article/details/120582994](https://blog.csdn.net/Twinkle_sone/article/details/120582994)
-3.  xxxx
+```shell
+//引入组件库
+import jvuewheel from '@jyeontu/jvuewheel'
+//引入样式
+import '@jyeontu/jvuewheel/lib/jvuewhell.css'
+Vue.use(jvuewheel);
+```
+
+#### 效果预览
+[预览地址(使用文档)](http://120.79.163.94/JYeontuComponents/#/homePage)
+
+#### 相关说明
+组件文档：[http://120.79.163.94/JYeontuComponents/#/homePage](http://120.79.163.94/JYeontuComponents/#/homePage)
+1.  日历组件（JCalendar）：[https://blog.csdn.net/Twinkle_sone/article/details/120465663](http://https://blog.csdn.net/Twinkle_sone/article/details/120465663)
+2.  电子屏数字（JElectronicNumber）：[https://blog.csdn.net/Twinkle_sone/article/details/120582994](https://blog.csdn.net/Twinkle_sone/article/details/120582994)
+3.  流程图组件（JFlowchart）
+4.  表格组件（JTable）
+5.  代码高亮组件（JCodeHeightLight）
+6.  canvas画板组件（JCanvasBroad）：[https://blog.csdn.net/Twinkle_sone/article/details/121476250](https://blog.csdn.net/Twinkle_sone/article/details/121476250)
+7.  数字滚动变化效果（JNumRolling）：[https://blog.csdn.net/Twinkle_sone/article/details/121541104](https://blog.csdn.net/Twinkle_sone/article/details/121541104)
+8.  对话弹窗（JDialog）
+9.  可拖拽悬浮按钮（JHoverBtn）：[https://blog.csdn.net/Twinkle_sone/article/details/121658022](https://blog.csdn.net/Twinkle_sone/article/details/121658022)
 
 #### 参与贡献
 
@@ -31,12 +58,12 @@ vue组件 + js函数工具
 3.  提交代码
 4.  新建 Pull Request
 
+#### 联系
+
+CSDN：[https://blog.csdn.net/Twinkle_sone](https://blog.csdn.net/Twinkle_sone)
+
+Gitee：[https://gitee.com/zheng_yongtao](https://gitee.com/zheng_yongtao)
 
-#### 特技
+GitHub：[https://github.com/yongtaozheng](https://github.com/yongtaozheng)
 
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
-5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
+掘金：[https://juejin.cn/user/440244290727294](https://juejin.cn/user/440244290727294)