test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-03 20:58:09 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #78 from Leopoldthecoder/next

Browse Source 
add transition-group in select
This commit is contained in:
FuryBean 2016-08-19 21:50:48 +08:00 committed by GitHub
commit 2ceff8709e
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) { showDecimalIcon(item) {
let showWhenDisabled = this.disabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value; 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; return showWhenDisabled || showWhenAllowHalf;
}, },

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

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

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

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