This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

改造tree组件完成

old
宇天 2017-09-08 22:23:12 +08:00
parent eaa809513e
commit fadd599ddd
8 changed files with 46 additions and 53 deletions

View File

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

1
js/lib/tree/main.css Normal file
View File

@ -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"}

View File

@ -7,10 +7,10 @@
"use strict"; "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>', var box = '<ul>{li}</ul>',
ul = '<ul :class="{open: {it}.open}">{li}</ul>', ul = '<ul :class="{open: {it}.open}">{li}</ul>',

43
js/lib/tree/main.scss Normal file
View File

@ -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";}
}
}

View File

@ -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"}

View File

@ -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";}

Binary file not shown.

Binary file not shown.