github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #56 from eleme/feat/next-tree 

Update checkbox and tree
pull/2/head
FuryBean 2016-08-12 15:56:09 +08:00 committed by GitHub
parent 9c0912745f 4d608fc9da
commit d607187d85
10 changed files with 89 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.babelrc
View File

@ -1,5 +1,5 @@
{ {
"presets": ["es2015"], "presets": ["es2015-loose"],
"plugins": ["transform-vue-jsx"], "plugins": ["transform-vue-jsx"],
"comments": false "comments": false
} }

40
examples/docs/checkbox.md
View File

@ -31,32 +31,32 @@
### 单个勾选框，逻辑值 ### 单个勾选框，逻辑值
<div class="demo-box demo-checkbox"> <div class="demo-box demo-checkbox">
<el-checkbox class="checkbox" :value.sync="checked">{{checked | json}}</el-checkbox> <el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
</div> </div>
```html ```html
<el-checkbox class="checkbox" :value.sync="checked">{{checked | json}}</el-checkbox> <el-checkbox class="checkbox" v-model="checked">{{ checked }}</el-checkbox>
``` ```
### 多个勾选框，绑定到同一个数组 ### 多个勾选框，绑定到同一个数组
<div class="demo-box demo-checkbox"> <div class="demo-box demo-checkbox">
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 A"></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 B"></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 C"></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="禁用" disabled></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="选中且禁用" disabled></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox>
</div> </div>
<p>{{checkList | json}}</p> <p>{{ checkList }}</p>
```html ```html
<template> <template>
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 A"></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 B"></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="复选框 C"></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="禁用" disabled></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox>
<el-checkbox class="checkbox" :value.sync="checkList" label="选中且禁用" disabled></el-checkbox> <el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox>
</template> </template>
<script> <script>
@ -75,20 +75,20 @@
<div class="demo-box demo-checkbox"> <div class="demo-box demo-checkbox">
<el-checkbox <el-checkbox
class="checkbox" class="checkbox"
:value.sync="name" v-model="name"
:true-label="a" :true-label="a"
:false-label="b" :false-label="b">
> {{name}}
</el-checkbox>{{name}} </el-checkbox>
</div> </div>
```html ```html
<el-checkbox <el-checkbox
class="checkbox" class="checkbox"
:value.sync="name" v-model="name"
:true-label="a" :true-label="a"
:false-label="b" :false-label="b">
> {{name}}
</el-checkbox> </el-checkbox>
``` ```

2
examples/docs/tree.md
View File

@ -10,7 +10,7 @@
} }
</style> </style>
<script type="text/ecmascript-6"> <script>
import Vue from 'vue'; import Vue from 'vue';
var data = [{ var data = [{

1
package.json
View File

@ -33,6 +33,7 @@
"babel-helper-vue-jsx-merge-props": "^1.0.1", "babel-helper-vue-jsx-merge-props": "^1.0.1",
"babel-plugin-syntax-jsx": "^6.8.0", "babel-plugin-syntax-jsx": "^6.8.0",
"babel-plugin-transform-vue-jsx": "^3.1.0", "babel-plugin-transform-vue-jsx": "^3.1.0",
"babel-preset-es2015-loose": "^7.0.0",
"file-save": "^0.2.0", "file-save": "^0.2.0",
"gh-pages": "^0.11.0", "gh-pages": "^0.11.0",
"highlight.js": "^9.3.0", "highlight.js": "^9.3.0",

1
packages/autocomplete/src/autocomplete.vue
View File

@ -91,7 +91,6 @@
this.suggestionVisible = false; this.suggestionVisible = false;
}, },
select(index) { select(index) {
debugger;
if (this.suggestions && this.suggestions[index]) { if (this.suggestions && this.suggestions[index]) {
this.$emit('input', this.suggestions[index].value); this.$emit('input', this.suggestions[index].value);
this.$nextTick(() => { this.$nextTick(() => {

1
packages/checkbox/src/checkbox-group.vue
View File

@ -12,6 +12,7 @@
required: true required: true
} }
}, },
watch: { watch: {
value(value) { value(value) {
this.dispatch('form-item', 'el.form.change', value); this.dispatch('form-item', 'el.form.change', value);

44
packages/checkbox/src/checkbox.vue
View File

@ -16,11 +16,10 @@
:false-value="falseLabel" :false-value="falseLabel"
v-model="_value" v-model="_value"
type="checkbox" type="checkbox"
@change="$emit('on-change', checked)"
@focus="focus = true" @focus="focus = true"
@blur="focus = false" @blur="focus = false"
:disabled="isLimit || disabled" :disabled="isLimit || disabled"
v-el: checkbox> ref="checkbox">
<input <input
v-else v-else
class="el-checkbox__original" class="el-checkbox__original"
@ -29,16 +28,16 @@
@focus="focus = true" @focus="focus = true"
@blur="focus = false" @blur="focus = false"
type="checkbox" type="checkbox"
@change="$emit('on-change', checked)"
:disabled="isLimit || disabled"> :disabled="isLimit || disabled">
</span> </span>
<span class="el-checkbox__label"> <span class="el-checkbox__label">
<slot></slot> <slot></slot>
<template v-if="!_slotContents">{{label}}</template> <template v-if="!$slots || !$slots.default">{{label}}</template>
</span> </span>
</label> </label>
</template> </template>
<script> <script>
import Emitter from 'main/mixins/emitter';
/** /**
* checkbox * checkbox
* @module components/basic/checkbox * @module components/basic/checkbox
@ -56,10 +55,10 @@
export default { export default {
name: 'ElCheckbox', name: 'ElCheckbox',
mixins: [Emitter],
props: { props: {
value: { value: {},
type: [Array, Boolean, String]
},
label: { label: {
type: String type: String
}, },
@ -80,9 +79,9 @@
}, },
set(newValue) { set(newValue) {
if (this.value !== undefined) { if (this.value !== undefined) {
this.value = newValue; this.$emit('input', newValue);
} else { } else {
this.$parent.value = newValue; this.$parent.$emit('input', newValue);
} }
} }
}, },
@ -106,24 +105,21 @@
}; };
}, },
events: { watch: {
['element.checkbox.disabled']() { checked(sure) {
if (this.checked) { this.$emit('on-change', sure);
return; this.dispatch('element.checkbox', sure);
}
this.isLimit = true;
},
['element.checkbox.enabled']() {
this.isLimit = false;
} }
}, },
watch: { created() {
checked(sure) { this.$on('element.checkbox.disabled', () => {
this.$dispatch('element.checkbox', sure); if (this.checked) return;
} this.isLimit = true;
});
this.$on('element.checkbox.enabled', () => {
this.isLimit = false;
});
} }
}; };
</script> </script>

31
packages/tree/src/transition.js
View File

@ -1,11 +1,11 @@
export default { class Transition {
beforeEnter(el) { beforeEnter(el) {
el.dataset.oldPaddingTop = el.style.paddingTop; el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom; el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.style.height = '0'; el.style.height = '0';
el.style.paddingTop = 0; el.style.paddingTop = 0;
el.style.paddingBottom = 0; el.style.paddingBottom = 0;
}, }
enter(el) { enter(el) {
el.dataset.oldOverflow = el.style.overflow; el.dataset.oldOverflow = el.style.overflow;
@ -22,13 +22,13 @@ export default {
} }
el.style.overflow = 'hidden'; el.style.overflow = 'hidden';
}, }
afterEnter(el) { afterEnter(el) {
el.style.display = ''; el.style.display = '';
el.style.height = ''; el.style.height = '';
el.style.overflow = el.dataset.oldOverflow; el.style.overflow = el.dataset.oldOverflow;
}, }
beforeLeave(el) { beforeLeave(el) {
el.dataset.oldPaddingTop = el.style.paddingTop; el.dataset.oldPaddingTop = el.style.paddingTop;
@ -40,7 +40,7 @@ export default {
el.style.height = el.scrollHeight + 'px'; el.style.height = el.scrollHeight + 'px';
} }
el.style.overflow = 'hidden'; el.style.overflow = 'hidden';
}, }
leave(el) { leave(el) {
if (el.scrollHeight !== 0) { if (el.scrollHeight !== 0) {
@ -50,7 +50,7 @@ export default {
el.style.paddingBottom = 0; el.style.paddingBottom = 0;
}); });
} }
}, }
afterLeave(el) { afterLeave(el) {
el.style.display = el.style.height = ''; el.style.display = el.style.height = '';
@ -59,3 +59,22 @@ export default {
el.style.paddingBottom = el.dataset.oldPaddingBottom; el.style.paddingBottom = el.dataset.oldPaddingBottom;
} }
}; };
export default {
functional: true,
render(h, { children }) {
const data = {
props: {
appear: true
},
on: new Transition()
};
children = children.map(item => {
item.data.class = ['collapse-transition'];
return item;
});
return h('transition', data, children);
}
};

23
packages/tree/src/tree-node.vue
View File

@ -6,16 +6,17 @@
<span class="el-tree-node__expand-icon" <span class="el-tree-node__expand-icon"
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }" :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
></span> ></span>
<el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" :value.sync="node.checked" :true-label="true" :false-label="false" @on-change="handleCheckChange"></el-checkbox> <el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" v-model="node.checked" :true-label="true" :false-label="false" @on-change="handleCheckChange"></el-checkbox>
<!--<span class="el-tree-node__icon {{ node.icon }} {{ node.loading ? 'el-icon-loading' : '' }}" v-if="node.icon"></span>--> <!--<span class="el-tree-node__icon {{ node.icon }} {{ node.loading ? 'el-icon-loading' : '' }}" v-if="node.icon"></span>-->
<span class="el-tree-node__label">{{ node.label }}</span> <span class="el-tree-node__label">{{ node.label }}</span>
</div> </div>
<div class="el-tree-node__children" <collapse-transition>
v-if="childrenRendered" <div class="el-tree-node__children"
v-show="expanded" v-if="childrenRendered"
transition="collapse"> v-show="expanded">
<el-tree-node v-for="child in node.children" :node="child"></el-tree-node> <el-tree-node v-for="child in node.children" :node="child"></el-tree-node>
</div> </div>
</collapse-transition>
</div> </div>
</template> </template>
@ -33,6 +34,10 @@
} }
}, },
components: {
CollapseTransition
},
data() { data() {
return { return {
$tree: null, $tree: null,
@ -80,10 +85,6 @@
} }
this.showCheckbox = tree.showCheckbox; this.showCheckbox = tree.showCheckbox;
},
transitions: {
collapse: CollapseTransition
} }
}; };
</script> </script>

16
src/index.js
View File

@ -100,22 +100,22 @@ const install = function(Vue) {
Vue.component(Progress.name, Progress); Vue.component(Progress.name, Progress);
Vue.component(Spinner.name, Spinner); Vue.component(Spinner.name, Spinner);
// Vue.use(Loading); Vue.use(Loading);
// Vue.prototype.$msgbox = MessageBox; Vue.prototype.$msgbox = MessageBox;
// Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$alert = MessageBox.alert;
// Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$confirm = MessageBox.confirm;
// Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$prompt = MessageBox.prompt;
// Vue.prototype.$notify = Notification; Vue.prototype.$notify = Notification;
}; };
// auto install auto install
if (typeof window !== 'undefined' && window.Vue) { if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue); install(window.Vue);
}; };
module.exports = { module.exports = {
install, install
Group, Group,
SelectDropdown, SelectDropdown,
Pagination, Pagination,