other / mew-iview

Commit b923c8187ceed0370ab40ce66c64d700e993fc7a

Authored by 梁灏
1 parent e81207a2

update Tree 

update Tree
Showing 5 changed files with 56 additions and 38 deletions   Show diff stats
Inline Side-by-side
src/components/checkbox/checkbox.vue
  Show/Hide comments   View file @b923c81
... ... @@ -36,6 +36,10 @@
36 36 checked: {
37 37 type: Boolean,
38 38 default: false
  39 + },
  40 + indeterminate: {
  41 + type: Boolean,
  42 + default: false
39 43 }
40 44 },
41 45 data () {
... ... @@ -62,7 +66,8 @@
62 66 `${prefixCls}`,
63 67 {
64 68 [`${prefixCls}-checked`]: this.selected,
65   - [`${prefixCls}-disabled`]: this.disabled
  69 + [`${prefixCls}-disabled`]: this.disabled,
  70 + [`${prefixCls}-indeterminate`]: this.indeterminate
66 71 }
67 72 ];
68 73 },
... ...
src/components/collapse/panel.vue
  Show/Hide comments   View file @b923c81
... ... @@ -10,7 +10,7 @@
10 10 </div>
11 11 </template>
12 12 <script>
13   - import Icon from '../icon';
  13 + import Icon from '../icon/icon.vue';
14 14 const prefixCls = 'ivu-collapse';
15 15  
16 16 export default {
... ...
src/components/tree/tree.vue
  Show/Hide comments   View file @b923c81
1 1 <template>
2 2 <ul :class="classes">
3 3 <li v-for="item in data" :class="itemCls(item)">
4   - <span :class="arrowCls(item)" @click="setExpand(item.disabled, $index)"></span>
5   - <span v-if="showCheckbox" :class="checkboxCls(item)" @click="setCheck(item.disabled||item.disableCheckbox,$index)">
6   - <span :class="[prefixCls + '-checkbox-inner']"></span>
  4 + <span :class="arrowCls(item)" @click="setExpand(item.disabled, $index)">
  5 + <Icon type="arrow-right-b"></Icon>
7 6 </span>
  7 + <!--<span v-if="showCheckbox" :class="checkboxCls(item)" @click="setCheck(item.disabled||item.disableCheckbox,$index)">-->
  8 + <!--<span :class="[prefixCls + '-checkbox-inner']"></span>-->
  9 + <!--</span>-->
  10 + <Checkbox
  11 + :checked="item.checked && item.childrenCheckedStatus == 2"
  12 + :disabled="item.disabled || item.disableCheckbox"
  13 + @click.prevent="setCheck(item.disabled||item.disableCheckbox,$index)"></Checkbox>
8 14 <a :class="titleCls(item)" @click="setSelect(item.disabled, $index)">
9 15 <span :class="[prefixCls + '-title']" v-html="item.title"></span>
10 16 </a>
... ... @@ -21,12 +27,15 @@
21 27 </ul>
22 28 </template>
23 29 <script>
  30 + import Icon from '../icon/icon.vue';
  31 + import Checkbox from '../checkbox/checkbox.vue';
24 32 import { t } from '../../locale';
25 33  
26 34 const prefixCls = 'ivu-tree';
27 35  
28 36 export default {
29 37 name: 'tree',
  38 + components: { Icon, Checkbox },
30 39 props: {
31 40 data: {
32 41 type: Array,
... ... @@ -135,7 +144,7 @@
135 144 this.data[i].key = `${this.key}.${i}`;
136 145 }
137 146 },
138   - preHandle(){
  147 + preHandle () {
139 148 for (let [i,item] of this.data.entries()) {
140 149 if (!item.node || !item.node.length) {
141 150 this.$set(`data[${i}].isLeaf`, true);
... ... @@ -152,12 +161,12 @@
152 161 }
153 162 }
154 163 },
155   - setExpand(disabled, index){
  164 + setExpand (disabled, index) {
156 165 if (!disabled) {
157 166 this.$set(`data[${index}].expand`, !this.data[index].expand);
158 167 }
159 168 },
160   - setSelect(disabled, index){
  169 + setSelect (disabled, index) {
161 170 if (!disabled) {
162 171 const selected = !this.data[index].selected;
163 172 if (this.multiple || !selected) {
... ... @@ -174,7 +183,7 @@
174 183 this.$dispatch('nodeSelected', this, selected);
175 184 }
176 185 },
177   - setCheck(disabled, index){
  186 + setCheck (disabled, index) {
178 187 if (disabled) return;
179 188 const checked = !this.data[index].checked;
180 189 this.$set(`data[${index}].checked`, checked);
... ... @@ -182,7 +191,7 @@
182 191 this.$dispatch('childChecked', this, this.key);
183 192 this.$broadcast('parentChecked', checked, `${this.key}.${index}`);
184 193 },
185   - getNodes(data, opt){
  194 + getNodes (data, opt) {
186 195 data = data || this.data;
187 196 let res = [];
188 197 for (let node of data) {
... ... @@ -202,13 +211,13 @@
202 211 }
203 212 return res;
204 213 },
205   - getSelectedNodes(){
  214 + getSelectedNodes () {
206 215 return this.getNodes(this.data, {selected: true});
207 216 },
208   - getCheckedNodes(){
  217 + getCheckedNodes () {
209 218 return this.getNodes(this.data, {checked: true, childrenCheckedStatus: 2});
210 219 },
211   - getChildrenCheckedStatus(children){
  220 + getChildrenCheckedStatus (children) {
212 221 let checkNum = 0, child_childrenAllChecked = true;
213 222 for (let child of children) {
214 223 if (child.checked) {
... ...
src/styles/components/tree.less
  Show/Hide comments   View file @b923c81
... ... @@ -3,7 +3,7 @@
3 3 .@{tree-prefix-cls} {
4 4 margin: 0;
5 5 padding: 5px;
6   - font-size: 12px;
  6 + font-size: @font-size-small;
7 7 li {
8 8 padding: 0;
9 9 margin: 7px 0;
... ... @@ -46,14 +46,14 @@
46 46 }
47 47 a {
48 48 display: inline-block;
49   - padding: 1px 5px;
50   - border-radius: 2px;
51 49 margin: 0;
  50 + padding: 1px 5px;
  51 + border-radius: @btn-border-radius-small;
52 52 cursor: pointer;
53 53 text-decoration: none;
54 54 vertical-align: top;
55   - color: #666;
56   - transition: all 0.3s ease;
  55 + color: @text-color;
  56 + transition: all @transition-time @ease-in-out;
57 57 &:hover {
58 58 background-color: tint(@primary-color, 90%);
59 59 }
... ... @@ -67,43 +67,47 @@
67 67 }
68 68 &.@{tree-prefix-cls}-switcher,
69 69 &.@{tree-prefix-cls}-iconEle {
70   - margin: 0;
  70 + display: inline-block;
71 71 width: 16px;
72 72 height: 16px;
73 73 line-height: 16px;
74   - display: inline-block;
  74 + margin: 0;
75 75 vertical-align: middle;
76 76 border: 0 none;
77 77 cursor: pointer;
78 78 outline: none;
79 79 }
80   - &.@{tree-prefix-cls}-icon_loading {
81   - &:after {
82   - display: inline-block;
83   - //.iconfont-font("\e6a1");
84   - animation: loadingCircle 1s infinite linear;
85   - color: @primary-color;
86   - }
87   - }
  80 + //&.@{tree-prefix-cls}-icon_loading {
  81 + // &:after {
  82 + // display: inline-block;
  83 + // //.iconfont-font("\e6a1");
  84 + // animation: loadingCircle 1s infinite linear;
  85 + // color: @primary-color;
  86 + // }
  87 + //}
88 88 &.@{tree-prefix-cls}-switcher {
  89 + i{
  90 + transition: all @transition-time @ease-in-out;
  91 + }
89 92 &.@{tree-prefix-cls}-switcher-noop {
90 93 cursor: auto;
  94 + i{
  95 + display: none;
  96 + }
91 97 }
92 98 &.@{tree-prefix-cls}-roots_open,
93 99 &.@{tree-prefix-cls}-center_open,
94 100 &.@{tree-prefix-cls}-bottom_open,
95 101 &.@{tree-prefix-cls}-noline_open {
96   - //.antTreeSwitcherIcon();
  102 + i {
  103 + transform: rotate(90deg);
  104 + }
97 105 }
98 106 &.@{tree-prefix-cls}-roots_close,
99 107 &.@{tree-prefix-cls}-center_close,
100 108 &.@{tree-prefix-cls}-bottom_close,
101 109 &.@{tree-prefix-cls}-noline_close {
102   - //.antTreeSwitcherIcon();
103   - //.ie-rotate(3);
104   - &:after {
105   - transform: rotate(270deg) scale(0.5);
106   - }
  110 +
107 111 }
108 112 }
109 113 }
... ... @@ -118,7 +122,7 @@
118 122 >span,
119 123 >a,
120 124 >a span {
121   - color: #ccc;
  125 + color: @input-disabled-bg;
122 126 cursor: not-allowed;
123 127 }
124 128 }
... ...
test/routers/tree.vue
  Show/Hide comments   View file @b923c81
1 1 <template>
2 2 <Tree
3 3 :data.sync="treeData"
4   - :checkable="true"
  4 + :show-checkbox="true"
5 5 :multiple="true"
6 6 :on-select="selectFn"
7 7 :on-check="checkFn"></Tree>
... ... @@ -35,10 +35,10 @@
35 35 },
36 36 methods: {
37 37 selectFn(data){
38   - console.log(data);
  38 +// console.log(data);
39 39 },
40 40 checkFn(data){
41   - console.log(data);
  41 +// console.log(data);
42 42 }
43 43 }
44 44 }
... ...