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

add transition-group in select

pull/2/head
Leopoldthecoder 2016-08-19 18:20:54 +08:00
parent 33b54f4436
commit 1e317a3c3b
4 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/icon.json
View File

@ -1 +1 @@
["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-on","star-off"]
["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-off","star-on"]

2
packages/rate/src/main.vue
View File

@ -195,7 +195,7 @@
showDecimalIcon(item) {
let showWhenDisabled = this.disabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
let showWhenAllowHalf = this.allowHalf && this.pointerAtLeftHalf && ((item - 0.5).toString() === this.currentValue.toString());
let showWhenAllowHalf = this.allowHalf && this.pointerAtLeftHalf && ((item - 0.5).toFixed(1) === this.currentValue.toFixed(1));
return showWhenDisabled || showWhenAllowHalf;
},

4
packages/select-dropdown/src/select-dropdown.vue
View File

@ -26,7 +26,9 @@
methods: {
updatePopper() {
if (this.popper) {
this.popper.update();
this.$nextTick(() => {
this.popper.update();
});
} else {
this.$nextTick(() => {
this.popper = new Popper(this.$parent.$refs.reference.$el, this.$el, {

32
packages/select/src/select.vue
View File

@ -1,14 +1,16 @@
<template>
<div class="el-select" :class="{ 'is-multiple': multiple, 'is-small': size === 'small' }">
<div class="el-select__tags" v-if="multiple" @click.stop="toggleMenu" ref="tags" :style="{ 'max-width': inputWidth - 36 + 'px' }">
<el-tag
v-for="item in selected"
closable
:hit="item.hitState"
type="primary"
@click.native="deleteTag($event, item)"
close-transition>{{ item.label }}</el-tag>
<transition-group @after-leave="resetInputHeight">
<el-tag
v-for="item in selected"
:key="item"
closable
:hit="item.hitState"
type="primary"
@click.native="deleteTag($event, item)"
close-transition>{{ item.label }}</el-tag>
</transition-group>
<input
type="text"
class="el-select__input"
@ -42,7 +44,7 @@
@keydown.native.tab="visible = false"
@mouseenter.native="inputHovering = true"
@mouseleave.native="inputHovering = false"
:icon="showCloseIcon ? 'circle-close' : 'caret-top'"
:icon="iconClass"
:style="{ 'width': inputWidth + 'px' }"
v-element-clickoutside="handleClose">
</el-input>
@ -76,6 +78,10 @@
componentName: 'select',
computed: {
iconClass() {
return this.showCloseIcon ? 'circle-close' : (this.remote && this.filterable ? '' : 'caret-top');
},
debounce() {
return this.remote ? 300 : 0;
},
@ -280,7 +286,9 @@
visible(val) {
if (!val) {
this.$refs.reference.$el.querySelector('input').blur();
this.$el.querySelector('.el-input__icon').classList.remove('is-reverse');
if (this.$el.querySelector('.el-input__icon')) {
this.$el.querySelector('.el-input__icon').classList.remove('is-reverse');
}
this.broadcast('select-dropdown', 'destroyPopper');
if (this.$refs.input) {
this.$refs.input.blur();
@ -301,7 +309,9 @@
if (this.remote) {
this.voidRemoteQuery = true;
}
this.$el.querySelector('.el-input__icon').classList.add('is-reverse');
if (this.$el.querySelector('.el-input__icon')) {
this.$el.querySelector('.el-input__icon').classList.add('is-reverse');
}
this.broadcast('select-dropdown', 'updatePopper');
if (this.filterable) {
this.query = this.selectedLabel;