zydx-plus 1.0.8 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.0.8",
+  "version": "1.0.12",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -88,9 +88,6 @@
     "uglifyjs-webpack-plugin": "^2.1.1",
     "uppercamelcase": "^1.1.0",
     "url-loader": "^1.0.1",
-    "vue": "2.5.21",
-    "vue-loader": "^15.7.0",
-    "vue-router": "^3.0.1",
     "vue-template-compiler": "2.5.21",
     "vue-template-es2015-compiler": "^1.6.0",
     "webpack": "^4.14.0",

package/src/components/calendar/src/Calendar.css

@@ -1,9 +1,9 @@
+li{list-style-type:none;}
 .cale{
 	position: absolute;
 	top: 22px;
 	right: 0;
 	width: 300px;
-	height: 330px;
 	z-index: 100;
 	background-color: #fff;
 	box-shadow: 0 0 4px 1px #ccc;
@@ -14,7 +14,6 @@
 }
 .cale-cont{
 	width: 100%;
-	height: 300px;
 	background-color: #fff;
 	border-radius: 10px;
 }
@@ -229,11 +228,6 @@
 .calendar-out-of-Date .calendar-date{
 	color: gray;
 }
-
-
-
-
-
 /* 以下为实现0.5px底部边界 */
 .under_line{position: relative;}
 .under_line:before,
@@ -245,9 +239,89 @@
 /* 以上为实现0.5px底部边界 */
 .cle-but-cont{
 	margin-top: 5px;
-	padding: 5px 0 0 0;
+	padding: 5px 0;
 	text-align: right;
 	border-top: 1px solid #ccc;
+	display: flex;
+}
+.cle-but-left{
+	flex: 8;
+	text-align: left;
+}
+.cle-but-right{
+	flex: 2;
+}
+.cle-time{
+	display: inline-block;
+	position: relative;
+}
+.cle-time input{
+	width: 130px;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	height: 22px;
+	padding-left: 10px;
+	box-sizing: border-box;
+}
+.cle-time-list{
+	position: absolute;
+	top: 22px;
+	left: 0;
+	width: 130px;
+    height: 180px;
+	background-color: #fff;
+	box-shadow: 0 0 12px rgba(0, 0, 0, .12);
+	display: flex;
+}
+.cle-time-y{
+	flex: 1;
+	text-align: center;
+	font-size: 12px;
+	position: relative;
+	overflow: hidden;
+}
+.cle-time-li{
+	position: absolute !important;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 1;
+	transition-duration: 100ms;
+}
+.cle-time-li>p{
+	padding: 5px 0;
+	height: 26px;
+	box-sizing: border-box;
+	color: #999;
+}
+.cle-time-act{
+	color: #000 !important;
+	font-weight: 600;
+}
+.cle-time-y ul{
+	height: 100%;
+	overflow-y: scroll;
+	scrollbar-width: none;
+	position: relative;
+	z-index: 2;
+}
+ul::-webkit-scrollbar {width: 0}
+.cle-frame{
+	height: 26px;
+	box-sizing: border-box;
+	border-top: 1px solid #ccc;
+	border-bottom: 1px solid #ccc;
+	position: absolute;
+	top: 78px;
+	left: 0;
+	z-index: 1;
+	width: calc(100% - 20px);
+	margin: 0 10px;
+}
+.cle-time-y li{
+	padding: 5px 0;
+	height: 26px;
+	box-sizing: border-box;
 }
 .cle-but{
 	margin-left: 5px;

package/src/components/calendar/src/Calendar.vue

@@ -51,7 +51,35 @@
         <div class="ClearBoth"></div>
       </div>
       <div class="cle-but-cont">
-        <button class="cle-but" @click="confirm">确认</button>
+        <div class="cle-but-left" v-if="showDate">
+           <div class="cle-time">
+             <form>
+               <input type="text" autocomplete="new-pwd" v-model="cleDate" @focus="cleFocus" @blur="cleBlur" />
+             </form>
+             <div class="cle-time-list" v-if="cleFocusShow">
+               <div class="cle-frame"></div>
+               <div class="cle-time-y">
+                 <ul @scroll="scrollHour($event)">
+                   <li v-for="(item,index) in 30"></li>
+                 </ul>
+                 <div class="cle-time-li" :style="{transform: 'translateY('+ transHour +'px)'}">
+                   <p v-for="(item,index) in 30" :class="{'cle-time-act': index === -(transHour/26)+3}">{{ (index > 2 && index < 27)? ((index - 3) < 10)? '0'+(index - 3): (index - 3) : '' }}</p>
+                 </div>
+               </div>
+               <div class="cle-time-y">
+                 <ul @scroll="scrollMinute($event)">
+                   <li v-for="(item,index) in 66"></li>
+                 </ul>
+                 <div class="cle-time-li" :style="{transform: 'translateY('+ transMinute +'px)'}">
+                   <p v-for="(item,index) in 66" :class="{'cle-time-act': index === -(transMinute/26)+3}">{{ (index > 2 && index < 63)? ((index - 3) < 10)? '0'+(index - 3): (index - 3) : '' }}</p>
+                 </div>
+               </div>
+             </div>
+           </div>
+        </div>
+        <div class="cle-but-right">
+          <button class="cle-but" @click="confirm">确认</button>
+        </div>
       </div>
     </div>
   </div>
@@ -115,6 +143,13 @@
 				type: Boolean,
 				default: true
 			},
+      /**
+       * @description 是否显示时间
+       */
+      showDate: {
+        type: Boolean,
+        default: false
+      },
 			/**
 			 * @description 设置标记范围
 			 */
@@ -178,67 +213,77 @@
 				tileMonth: '',
 				monthY: '',
 				dayChange: '',
-				monthList: [{
-						id: '01',
-						name: 'January'
-					},
-					{
-						id: '02',
-						name: 'February'
-					},
-					{
-						id: '03',
-						name: 'March'
-					},
-					{
-						id: '04',
-						name: 'April'
-					},
-					{
-						id: '05',
-						name: 'May'
-					},
-					{
-						id: '06',
-						name: 'June'
-					},
-					{
-						id: '07',
-						name: 'July'
-					},
-					{
-						id: '08',
-						name: 'August'
-					},
-					{
-						id: '09',
-						name: 'September'
-					},
-					{
-						id: '10',
-						name: 'October'
-					},
-					{
-						id: '11',
-						name: 'November'
-					},
-					{
-						id: '12',
-						name: 'December'
-					},
+        cleDate: '00:00',
+        hour: '00',
+        minute: '00',
+        transHour: 0,
+        transMinute: 0,
+        cleFocusShow: false,
+				monthList: [
+          {id: '01', name: 'January'},
+					{id: '02', name: 'February'},
+					{id: '03', name: 'March'},
+					{id: '04', name: 'April'},
+					{id: '05', name: 'May'},
+					{id: '06', name: 'June'},
+					{id: '07', name: 'July'},
+					{id: '08', name: 'August'},
+					{id: '09', name: 'September'},
+					{id: '10', name: 'October'},
+					{id: '11', name: 'November'},
+					{id: '12', name: 'December'},
 				]
 			};
 		},
 		methods: {
+      cleBlur() {
+        this.cleFocusShow = false
+      },
+      //获取焦点选择时间
+      cleFocus() {
+        this.cleFocusShow = true
+      },
+      scrollMinute(e) {
+        let top = e.target.scrollTop
+        let index = Math.floor(top/26)
+        this.transMinute = -(index * 26)
+        this.minute = (index < 10)? '0'+ index: index
+        this.cleDate = `${this.hour}:${this.minute}`
+      },
+      scrollHour(e) {
+        let top = e.target.scrollTop
+        let index = Math.floor(top/26)
+        this.transHour = -(index * 26)
+        this.hour = (index < 10)? '0'+ index: index
+        this.cleDate = `${this.hour}:${this.minute}`
+      },
+      //确认按钮
 			confirm() {
 				let that = this
         if(that.rangeMode) {
-          that.$emit('confirm', {
-            start: that.rangeStart_,
-            end: that.rangeEnd_
-          });
+          if(that.showDate) {
+            that.$emit('confirm', {
+              start: that.rangeStart_,
+              end: that.rangeEnd_,
+              date: that.cleDate
+            });
+          }else {
+            that.$emit('confirm', {
+              start: that.rangeStart_,
+              end: that.rangeEnd_
+            });
+          }
         }else {
-          that.$emit('confirm', that.dayChange.time);
+          if(that.showDate) {
+            that.$emit('confirm', {
+              start: that.dayChange.time,
+              date: that.cleDate
+            });
+          }else {
+            that.$emit('confirm', {
+              start: that.dayChange.time
+            });
+          }
         }
 			},
 			render(setTimeStr) { //初始化

package/src/components/coloring/index.js

@@ -0,0 +1,6 @@
+import main from './src/coloring';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/coloring/src/coloring.vue

@@ -0,0 +1,212 @@
+<template>
+	<div class="color-pop">
+    <div class="color-cont" :style="{background: backColor}">
+      <div class="color-cont-l" ref="color">
+         <div class="color-mask"
+              @mousedown="drawBegin($event)"
+              @mousemove="drawMove($event)"
+              @mouseup="drawEnd($event)">
+         </div>
+         <div class="color-pointer"
+              @mousedown="drawBegin($event)"
+              @mousemove="drawMove($event)"
+              @mouseup="drawEnd($event)"
+              :style="{transform: 'translate('+ colorX +'px,'+ colorY +'px)'}">
+         </div>
+      </div>
+    </div>
+    <div class="control-box-item">
+      <div class="controller" ref="circle">
+        <div class="hue"
+             @mousedown="circleBegin($event)"
+             @mousemove="circleMove($event)"
+             @mouseup="circleEnd($event)">
+        </div>
+        <div class="circle"
+             @mousedown="circleBegin($event)"
+             @mousemove="circleMove($event)"
+             @mouseup="circleEnd($event)"
+             :style="{transform: 'translateX('+ circleX +'px)'}">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {hsv2rgb,rgb2hsv,rgbToHsb} from './data.js'
+export default {
+  name: 'zydx-coloring',
+  data() {
+    return {
+      backColor: 'rgb(103, 194, 58)',
+      isCDown: false,
+      circleCDown: false,
+      colorX: 0,
+      colorY: 0,
+      x: 0,
+      y: 0,
+      cx: 0,
+      circleX: 0,
+      Rgb:{r:255,g:255,b:255},
+      opacity: 1,
+      s: 0,
+      l: 0
+    }
+  },
+  props: {
+    color: Object,
+  },
+  created() {
+    this.$nextTick(() => {
+      if(this.color === undefined) return
+      this.alternativeColor(this.color)
+    })
+  },
+  methods: {
+    alternativeColor(data) {
+      let a = this.$refs.color.getBoundingClientRect().width
+      let b = this.$refs.color.getBoundingClientRect().height
+      let c = this.$refs.circle.getBoundingClientRect().width
+      let hsv = rgb2hsv(data.r,data.g, data.b)
+      let hsb = rgbToHsb(data)
+      let l = hsv.h / 360 * c
+      let f = parseInt(hsb.s * a / 100)
+      let t = parseInt((100 - hsb.b) * b / 100)
+      this.mask(f,t)
+      this.circleMask(l)
+    },
+    drawBegin(event) {
+      this.isCDown = true
+      this.x = this.$refs.color.getBoundingClientRect().x
+      this.y = this.$refs.color.getBoundingClientRect().y
+      let x = event.clientX - this.x
+      let y = event.clientY - this.y
+      this.mask(x,y)
+    },
+    drawMove(event) {
+      if(this.isCDown) {
+        let x = event.clientX - this.x
+        let y = event.clientY - this.y
+        this.mask(x,y)
+      }
+    },
+    drawEnd(event) {
+      this.isCDown = false
+    },
+    mask (x,y) {
+      let w = this.$refs.color.getBoundingClientRect().width
+      let h = this.$refs.color.getBoundingClientRect().height
+      this.colorX = x
+      this.colorY = y
+      if(x <= 0) this.colorX = 0
+      if(x >= w) this.colorX = w
+      if(y  <= 0) this.colorY  = 0
+      if(y  >= h) this.colorY  = h
+      this.s = x / w
+      this.l = (h - y) / h
+      this.rgbaColor()
+    },
+    rgbaColor() {
+      let hsv = rgb2hsv(this.Rgb.r,this.Rgb.g,this.Rgb.b)
+      let hsvRgb = hsv2rgb(hsv.h,this.s,this.l)
+      this.maskRgb = {r: hsvRgb.r,g: hsvRgb.g,b: hsvRgb.b,a: this.opacity}
+      this.$emit('rgba', this.maskRgb)
+    },
+    circleBegin(event) {
+      this.circleCDown = true
+      this.cx = this.$refs.circle.getBoundingClientRect().x
+      let x = event.clientX - this.cx
+      this.circleMask(x)
+    },
+    circleMove(event) {
+      if(this.circleCDown) {
+        let x = event.clientX - this.cx
+        this.circleMask(x)
+      }
+    },
+    circleEnd(event) {
+      this.circleCDown = false
+    },
+    circleMask(x) {
+      let w = this.$refs.circle.getBoundingClientRect().width
+      this.circleX = x
+      if(x <= 0) this.circleX = 0
+      if(x >= w) this.circleX = w
+      let Hval = (x + 5) / (w)*360;
+      this.Rgb = hsv2rgb(Hval, 1, 1)
+      this.backColor = 'rgb('+ this.Rgb.r +','+ this.Rgb.g +','+ this.Rgb.b +')'
+      this.rgbaColor()
+    },
+  }
+}
+</script>
+
+<style>
+   .color-pop{
+     position: absolute;
+     top: 0;
+     left: 0;
+     z-index: 100;
+     background-color: #fff;
+     border-radius: 5px;
+     box-shadow: 0 0 3px #ccc;
+     padding: 10px;
+     user-select: none;
+   }
+   .color-cont{
+     width: 200px;
+     height: 200px;
+   }
+   .color-cont-l{
+     position: relative;
+     width: 100%;
+     height: 100%;
+     background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
+   }
+   .color-mask{
+     width: 100%;
+     height: 100%;
+     background: linear-gradient(0deg,#000,transparent);
+   }
+   .color-pointer{
+     position: absolute;
+     top: -7px;
+     left: -7px;
+     z-index: 2;
+     width: 15px;
+     height: 15px;
+     border: 2px #fff solid;
+     border-radius: 50%;
+   }
+   .control-box-item{
+     width: 100%;
+     height: 15px;
+     margin-top: 10px;
+   }
+   .controller{
+     position: relative;
+     width: 100%;
+     height: 100%;
+     background-color: #fff;
+     background-image: linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee),linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee);
+     background-size: 32px 32px;
+     background-position: 0 0,16px 16px;
+   }
+   .hue{
+     width: 100%;
+     height: 100%;
+     background: linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);
+   }
+   .circle{
+     position: absolute;
+     top: -2px;
+     width: 20px;
+     height: 20px;
+     left: -10px;
+     box-sizing: border-box;
+     border-radius: 50%;
+     background: #fff;
+     box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
+   }
+</style>

package/src/components/coloring/src/data.js

@@ -0,0 +1,103 @@
+function hsv2rgb(h, s, v) {
+    h = boundValue(h, 360)
+    s = boundValue(s * 100, 100)
+    v = boundValue(v * 100, 100)
+
+    var i = ~~(h*6)
+    var f = h * 6 - i
+    var p = v * (1 - s)
+    var q = v * (1 - f * s)
+    var t = v * (1 - (1 - f) * s)
+    var r = 0,g = 0,b = 0;
+    switch(i % 6){
+        case 0: r = v; g = t; b = p; break;
+        case 1: r = q; g = v; b = p; break;
+        case 2: r = p; g = v; b = t; break;
+        case 3: r = p; g = q; b = v; break;
+        case 4: r = t; g = p; b = v; break;
+        case 5: r = v, g = p, b = q; break;
+    }
+
+    var round = (value) => Math.round(value * 255)
+    return {
+        r: round(r),
+        g: round(g),
+        b: round(b)
+    }
+}
+function boundValue(value, max) {
+    value = Math.min(max, Math.max(0, value))
+    if ((Math.abs(value - max) < 0.000001)) {
+        return 1
+    }
+    return (value % max) / (~~max)
+}
+function rgb2hsv(r, g, b) {
+    r = boundValue(r, 255)
+    g = boundValue(g, 255)
+    b = boundValue(b, 255)
+    var max = Math.max(r, g, b)
+    var min = Math.min(r, g, b)
+    var h, s
+    var v = max
+
+    var d = max - min
+    s = max === 0 ? 0 : d / max
+
+    if (max === min) {
+        h = 0
+    } else {
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0)
+                break
+            case g:
+                h = (b - r) / d + 2
+                break
+            case b:
+                h = (r - g) / d + 4
+                break
+        }
+        h /= 6
+    }
+
+    return {
+        h: h * 360,
+        s: s,
+        v: v
+    }
+}
+function rgbToHsb(rgb) {
+    let hsb = {
+        h: 0,
+        s: 0,
+        b: 0
+    };
+    let min = Math.min(rgb.r, rgb.g, rgb.b);
+    let max = Math.max(rgb.r, rgb.g, rgb.b);
+    let delta = max - min;
+    hsb.b = max;
+    hsb.s = max != 0 ? 255 * delta / max : 0;
+    if (hsb.s != 0) {
+        if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
+        else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
+        else hsb.h = 4 + (rgb.r - rgb.g) / delta;
+    } else hsb.h = -1;
+    hsb.h *= 60;
+    if (hsb.h < 0) hsb.h = 0;
+    hsb.s *= 100 / 255;
+    hsb.b *= 100 / 255;
+    return hsb;
+}
+function rgb2Hex(r, g, b) {
+    var o = (r << 16 | g << 8 | b).toString(16)
+    return o.length < 6 ? ("#".concat("0".repeat(6 - o.length)).concat(o)):"#".concat(o);
+}
+
+
+module.exports = {
+	hsv2rgb,
+	rgb2hsv,
+	rgbToHsb,
+	rgb2Hex
+}

package/src/components/menuTree/index.js

@@ -0,0 +1,7 @@
+import menuTree from './src/ZydxMenuTree.vue';
+
+menuTree.install = function(Vue) {
+    Vue.component(menuTree.name, menuTree);
+};
+
+export default menuTree;

package/src/components/menuTree/src/ZydxMenuTree.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="menuTree">
+    <slot></slot>
+    <div v-for="(item, index) in targetTree" :key="index">
+      <zydx-menu-tree-info
+        :nodeSet="nodeSet"
+        :isShowLine="isShowLine"
+        :isShowUpDown="isShowUpDown"
+        :menu-info="item"
+        :selectItem="selectItem"
+        @clickItem="clickItem"
+      ></zydx-menu-tree-info>
+    </div>
+  </div>
+</template>
+
+<script>
+import zydxMenuTreeInfo from "./ZydxMenuTreeInfo";
+export default {
+  name: "zydx-menu-tree",
+  components: {
+    zydxMenuTreeInfo,
+  },
+  props: {
+    // 是否显示展开收起动作
+    isShowUpDown: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示底线
+    isShowLine: {
+      type: Boolean,
+      default: false,
+    },
+    // 节点设置
+    nodeSet: {
+      type: Number,
+      default: 2,
+    },
+    // 选择当前的节点
+    selectItem: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    // 树数据
+    treeData: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    targetTree: function () {
+      let that = this;
+      let targetTree = [];
+      let minLevel = "";
+      that.treeData.map(function (item) {
+        if (that.isShowUpDown) {
+          // 如果设置收起展开， 添加控制变量
+            Reflect.set(item, "isShowUpDown", false);
+        } else {
+            Reflect.set(item, "isShowUpDown", true);
+        }
+        if (minLevel === "") {
+          minLevel = item.level;
+        } else {
+          if (item.level < minLevel) {
+            minLevel = item.level;
+          }
+        }
+      });
+      this.treeData.map(function (item) {
+        if (item.level === minLevel) {
+          targetTree.push(item);
+        }
+      });
+      targetTree.map(function (item) {
+        that.forArr(that.treeData, item);
+      });
+      if (that.isShowUpDown) {
+        for (let i = 0; i < targetTree.length; i++) {
+          this.setIsShowUpDown(targetTree[i], i);
+        }
+      }
+      return targetTree;
+    },
+  },
+  methods: {
+    // 原始目录树转换方法
+    forArr: function (arr, obj) {
+      let that = this;
+      let newArr = [];
+      arr.map(function (item) {
+        if (item.pcatalogId === obj.catalogId) {
+          newArr.push(item);
+        }
+      });
+      if (newArr.length === 0) {
+        return false;
+      }
+      obj.children = newArr;
+      newArr.map(function (item) {
+        that.forArr(arr, item);
+      });
+    },
+    // 点击回调事件
+    clickItem(item) {
+      this.$emit("clickItem", item);
+    },
+    // 递归调用修改状态
+    setIsShowUpDown(item, index) {
+      if (index === 0) {
+        let children = item.children;
+        if (children && children.length !== 0) {
+          Reflect.set(item, "isShowUpDown", true);
+          for (let i = 0; i < children.length; i++) {
+            this.setIsShowUpDown(children[i], i);
+          }
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.menuTree {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 0px 10px;
+}
+
+</style>

package/src/components/menuTree/src/ZydxMenuTreeInfo.vue

@@ -0,0 +1,169 @@
+/**
+* @开发者：  zmy
+* @描述：  目录树通用组件
+* @创建时间: 2022-08-16 11:00:00
+* @内容:
+必传值：名字/类型/默认值/作用
+menuInfo 目录树数据
+非必传值：
+nodeSet 传入当前的节点设置， 小于当前节点设置不可点，灰色
+selectItem 传入当前选择的节点，是一个对象
+* @回调事件：
+* clickItem 点击点前节点的回调， 返回点击的节点
+@组件内方法：
+*/
+<template>
+  <div>
+    <div
+      class="lineHeight30"
+      :class="menuInfo.level === 0 ? '' : 'marginLeft14'"
+    >
+      <div
+        :class=" this.isShowLine ? 'dashed' : 'no_dashed'"
+      >
+        <div
+          class="widthB100 ellipse cursor"
+          :class="menuTitleStyle"
+          @click.stop="clickItem(menuInfo)"
+        >
+          {{ menuInfo.title }}
+        </div>
+        <div v-show="isShowUpDown && menuInfo.children">
+          <span
+            class="iconfont"
+            v-html="defaultFont"
+            @click="clickFont(menuInfo)"
+          ></span>
+        </div>
+      </div>
+      <div v-show="menuInfo.isShowUpDown">
+        <div v-for="(item, index) in menuInfo.children" :key="index">
+          <zydx-menu-tree-info
+            :isShowUpDown="isShowUpDown"
+            :isShowLine="isShowLine"
+            :selectItem="selectItem"
+            :menu-info="item"
+            :nodeSet="nodeSet"
+            @clickItem="clickItem"
+          >
+          </zydx-menu-tree-info>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import zydxMenuTreeInfo from "./ZydxMenuTreeInfo";
+export default {
+  name: "zydx-menu-tree-info",
+  components: {
+    zydxMenuTreeInfo,
+  },
+  props: {
+    // 是否显示展开收起动作
+    isShowUpDown: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示底线
+    isShowLine: {
+      type: Boolean,
+      default: false,
+    },
+    // 节点等级设置
+    nodeSet: {
+      type: Number,
+      required: true,
+    },
+    // 选择当前的节点
+    selectItem: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    // 树数据
+    menuInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    defaultFont() {
+      if (this.menuInfo.isShowUpDown) {
+        return "&#xeaf5;";
+      }
+      return "&#xeaf3;";
+    },
+    menuTitleStyle() {
+      let ar = [];
+      if (parseInt(this.menuInfo.level) > parseInt(this.nodeSet)) {
+        ar.push("disable");
+      }
+      if (this.selectItem === this.menuInfo) {
+        ar.push("active");
+      }
+      return ar;
+    }
+  },
+  methods: {
+    clickItem(item) {
+      this.$emit("clickItem", item);
+    },
+    clickFont(item) {
+      item.isShowUpDown = !item.isShowUpDown;
+    }
+  }
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: "iconfont";
+  src: url("./iconfont.ttf?t=1660878683989") format("truetype");
+}
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+}
+.cursor {
+  cursor: pointer;
+}
+.disable {
+  color: #7c7c7c;
+  pointer-events: none;
+  cursor: default;
+}
+.border_bottom {
+  border-bottom: 1px #cccccc dashed;
+}
+.active {
+  color: #00ff00;
+}
+.ellipse {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.marginLeft14 {
+  margin-left: 14px;
+}
+.widthB100 {
+  width: 100%;
+}
+.dashed {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px #CCCCCC dashed;
+}
+.no_dashed {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px #FFFFFF dashed;
+}
+</style>

package/src/components/tree/index.js

@@ -0,0 +1,6 @@
+import main from './src/tree';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/tree/src/tree.vue

@@ -0,0 +1,219 @@
+<!-- eslint-disable vue/no-multiple-template-root -->
+<script >
+/**
+ ** treeData[]
+ ** interface treeData {
+  name  string,
+  level number,
+  id: string unique,
+  icon?: string,
+  children?: treeData[]
+ }
+ */
+export default {
+  name: 'zydx-tree',
+  props: {
+    /**
+    ** treeData[]
+     */
+    data: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     ** 
+     ** 是否开启手风琴模式
+     */
+    accordian: {
+      type: Boolean,
+      default: false
+    },
+    /**
+    ** 
+    ** 选中时的颜色
+     */
+    active_color: {
+      type: String,
+      default: 'red'
+    },
+    /**
+    ** 
+    ** 下边框样式
+    */
+    border: {
+      type: String,
+      default: 'none'
+    },
+    height: {
+      type: String,
+      default: '30px'
+    }
+  },
+  data() {
+    return {
+      treeData: []
+    }
+  },
+  mounted() {
+
+  },
+  watch: {
+    data: {
+      handler: function (v) {
+        if (v.length) {
+          this.treeData = this.traverse(v)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    traverse: function (array) {
+      if (!array.length) {
+        return
+      }
+      let output = []
+      for (const leaf of array) {
+        let next = {
+          ...leaf,
+          isOpen: false,
+          children: leaf.children ? this.traverse(leaf.children) : []
+        }
+        output.push(next)
+      }
+      return output
+    },
+    handleClick: function (tree) {
+      this.$emit('update:select', tree)
+      const { id } = tree
+      this.treeData = this.treeData.map((item) => {
+        if (item.id === id) {
+          return {
+            ...item,
+            isOpen: !item.isOpen
+          }
+        } else {
+          return {
+            ...item,
+            isOpen: this.accordian ? false : item.isOpen
+          }
+        }
+      })
+    },
+    updateSelect: function (tree) {
+      this.$emit('update:select', tree)
+    },
+    textStyle: function (tree) {
+      const { fontSize = 16 } = tree
+      return `font-size: ${fontSize}px`
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="tree"
+       :key="tree.id"
+       v-for="(tree) in treeData">
+    <div class="tree_node"
+         :class="{ 'tree_node_active': tree.isOpen }"
+         @click="handleClick(tree)">
+      <template v-if="tree.level">
+        <div class="tree_node_indent"
+             v-for="i in tree.level"
+             :key="i">
+          <div :style="`width: ${tree.indent}px`"></div>
+        </div>
+      </template>
+      <template v-if="tree.icon">
+        <template v-if="['svg', 'image'].includes(tree.icon.type)">
+          <span class="tree_icon"
+                v-html="tree.icon.value"></span>
+        </template>
+        <template v-else>
+          <i :class="`iconfont' 'tree_icon' ${tree.icon.value}`"></i>
+        </template>
+      </template>
+      <span class="tree_text"
+            :style="textStyle(tree)">
+        {{ tree.name }}
+      </span>
+    </div>
+    <template v-if="tree.isOpen">
+      <tree :data="tree.children"
+            :active_color="active_color"
+            :border="border"
+            :key="tree.id"
+            @update:select="updateSelect"
+            :accordian="accordian"></tree>
+    </template>
+
+  </div>
+</template>
+<style scoped>
+.tree {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+}
+
+.tree_node {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: left;
+  height: v-bind(height);
+  cursor: pointer;
+  gap: 16px;
+  border-bottom: v-bind(border)
+}
+
+.tree_text_active {
+  color: red
+}
+
+.tree_node_active {
+  color: v-bind(active_color)
+}
+
+.tree_node_indent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 0;
+
+}
+
+.tree_node_box {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.tree_icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tree_text {
+  font-size: 16px;
+  line-height: 30px;
+  letter-spacing: 0px;
+}
+
+.children {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+</style>

package/src/index.js

@@ -1,10 +1,16 @@
 import Message from './components/tipBox/index';
 import Calendar from './components/calendar/index';
 import Switch from './components/switch/index';
+import menuTree from './components/menuTree/index';
+import coloring from './components/coloring/index';
+import tree from './components/tree/index';
 
 const components = [
     Calendar,
-    Switch
+    Switch,
+    menuTree,
+    coloring,
+    tree
 ];
 
 function install(app) {
@@ -15,10 +21,13 @@ function install(app) {
 }
 
 export default {
-    version: '1.0.8',
+    version: '1.0.12',
     install,
     Calendar,
     Message,
-    Switch
+    Switch,
+    menuTree,
+    coloring,
+    tree
 };