改造tree组件完成

js/lib/tree/Readme.md

@@ -1,2 +0,0 @@
-# Tree树型菜单
-> 顾名思义,就是

js/lib/tree/main.css

@@ -0,0 +1 @@
+.do-tree{overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:28px}.do-tree ul{width:100%;height:auto}.do-tree li{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.do-tree li ul{display:none;margin-left:20px}.do-tree li ul.open{display:block}.do-tree li em,.do-tree li span{display:block;cursor:pointer}.do-tree li em{float:left;padding:0 5px;color:#000;font-family:"ui font" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale}.do-tree li span:hover{color:#6bb294}.do-tree li span.active{color:#000;font-weight:bold}.do-tree.skin-def li>em::before{content:"\e612"}.do-tree.skin-def li.dir>em::before{content:"\e622"}.do-tree.skin-def li.dir.open>em::before{content:"\e8ea"}.do-tree.skin-light li>em::before{content:"\e73e"}.do-tree.skin-light li.dir>em::before{content:"\e635"}.do-tree.skin-light li.dir.open>em::before{content:"\e8ea"}.do-tree.skin-line li>em::before{content:"\e614"}.do-tree.skin-line li.dir>em::before{content:"\e8eb";font-weight:bold}.do-tree.skin-line li.dir.open>em::before{content:"\e662"}

js/lib/tree/main.js

@@ -7,10 +7,10 @@
 
 "use strict";
 
-define(['yua', 'css!./skin/def.css'], function(){
+define(['css!./main.css'], function(){
 
     //储存版本信息
-    yua.ui.tree = '0.0.2'
+    yua.ui.tree = '1.0.0'
 
     var box = '<ul>{li}</ul>',
         ul = '<ul :class="{open: {it}.open}">{li}</ul>',

js/lib/tree/main.scss

@@ -0,0 +1,43 @@
+@charset "UTF-8";
+/**
+ * 
+ * @authors yutent (yutent@doui.cc)
+ * @date    2017-04-14 21:18:53
+ * 
+ */
+
+
+
+.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:28px;
+
+    ul {width:100%;height:auto;}
+    li {overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
+
+    li ul {display:none;margin-left:20px;}
+    li ul.open {display:block;}
+
+    li em,
+    li span {display:block;cursor:pointer;}
+    li em {float:left;padding:0 5px;color:#000;font-family:"ui font" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
+    li span:hover {color:#6bb294;}
+    li span.active {color:#000;font-weight:bold;}
+
+    &.skin-def {
+        li>em::before {content:"\e612";}
+        li.dir>em::before {content:"\e622";}
+        li.dir.open>em::before {content:"\e8ea";}
+    }
+
+    &.skin-light {
+        li>em::before {content:"\e73e";}
+        li.dir>em::before {content:"\e635";}
+        li.dir.open>em::before {content:"\e8ea";}
+    }
+
+
+    &.skin-line {
+        li>em::before {content:"\e614";}
+        li.dir>em::before {content:"\e8eb";font-weight:bold;}
+        li.dir.open>em::before {content:"\e662";}
+    }
+}

js/lib/tree/skin/def.css

@@ -1 +0,0 @@
-.do-fn-cl:after{content:".";display:block;height:0;clear:both;visibility:hidden;overflow:hidden}.do-tree,.do-tree *{margin:0;padding:0;vertical-align:baseline;box-sizing:border-box}@font-face{font-family:"treeicon";src:url("iconfont.eot");src:url("iconfont.ttf") format("truetype")}.do-tree{overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:28px}.do-tree ul{width:100%;height:auto}.do-tree li{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.do-tree li ul{display:none;margin-left:20px}.do-tree li ul.open{display:block}.do-tree li em,.do-tree li span{display:block;cursor:pointer}.do-tree li em{float:left;padding:0 5px;color:#000;font-family:"treeicon" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale}.do-tree li span:hover{color:#6bb294}.do-tree li span.active{color:#000;font-weight:bold}.do-tree.skin-def li>em::before{content:"\e610"}.do-tree.skin-def li.dir>em::before{content:"\e622"}.do-tree.skin-def li.dir.open>em::before{content:"\e8ea"}.do-tree.skin-light li>em::before{content:"\e73e"}.do-tree.skin-light li.dir>em::before{content:"\e635"}.do-tree.skin-light li.dir.open>em::before{content:"\e8ea"}.do-tree.skin-line li>em::before{content:"\e60e"}.do-tree.skin-line li.dir>em::before{content:"\e608";font-weight:bold}.do-tree.skin-line li.dir.open>em::before{content:"\e662"}.do-tree.skin-arrow li>em::before{content:"\e73e"}.do-tree.skin-arrow li.dir>em::before{content:"\e616";font-weight:bold}.do-tree.skin-arrow li.dir.open>em::before{content:"\e607"}

js/lib/tree/skin/def.scss

@@ -1,48 +0,0 @@
-@charset "UTF-8";
-/**
- * 
- * @authors yutent (yutent@doui.cc)
- * @date    2017-04-14 21:18:53
- * 
- */
-
-
-.do-fn-cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;} 
-.do-tree, .do-tree * {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;}
-
-@font-face {font-family: "treeicon";
-  src: url('iconfont.eot'); /* IE9*/
-  src: url('iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-}
-
-.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:28px;}
-.do-tree ul {width:100%;height:auto;}
-
-.do-tree li {overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
-
-.do-tree li ul {display:none;margin-left:20px;}
-.do-tree li ul.open {display:block;}
-
-.do-tree li em,
-.do-tree li span {display:block;cursor:pointer;}
-.do-tree li em {float:left;padding:0 5px;color:#000;font-family:"treeicon" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
-.do-tree li span:hover {color:#6bb294;}
-.do-tree li span.active {color:#000;font-weight:bold;}
-
-.do-tree.skin-def li>em::before {content:"\e610";}
-.do-tree.skin-def li.dir>em::before {content:"\e622";}
-.do-tree.skin-def li.dir.open>em::before {content:"\e8ea";}
-
-.do-tree.skin-light li>em::before {content:"\e73e";}
-.do-tree.skin-light li.dir>em::before {content:"\e635";}
-.do-tree.skin-light li.dir.open>em::before {content:"\e8ea";}
-
-
-.do-tree.skin-line li>em::before {content:"\e60e";}
-.do-tree.skin-line li.dir>em::before {content:"\e608";font-weight:bold;}
-.do-tree.skin-line li.dir.open>em::before {content:"\e662";}
-
-
-.do-tree.skin-arrow li>em::before {content:"\e73e";}
-.do-tree.skin-arrow li.dir>em::before {content:"\e616";font-weight:bold;}
-.do-tree.skin-arrow li.dir.open>em::before {content:"\e607";}