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

bug fixes

pull/7812/head
Leopoldthecoder 2017-10-28 15:54:12 +08:00 committed by 杨奕
parent 2e8161e68e
commit 8479b2fbaf
18 changed files with 193 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
examples/app.vue
View File

@ -202,7 +202,10 @@
},
watch: {
lang() {
lang(val) {
if (val === 'zh-CN') {
this.suggestJump();
}
this.localize();
}
},
@ -210,11 +213,28 @@
methods: {
localize() {
use(this.lang === 'zh-CN' ? zhLocale : enLocale);
},
suggestJump() {
const href = location.href;
const preferGithub = localStorage.getItem('PREFER_GITHUB');
if (href.indexOf('element-cn') > -1 || preferGithub) return;
setTimeout(() => {
this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
.then(() => {
location.href = location.href.replace('element.', 'element-cn.');
})
.catch(() => {
localStorage.setItem('PREFER_GITHUB', true);
});
}, 1000);
}
},
mounted() {
this.localize();
if (this.lang === 'zh-CN') {
this.suggestJump();
}
setTimeout(() => {
const notified = localStorage.getItem('RELEASE_NOTIFIED');
if (!notified) {

6
examples/docs/zh-CN/table.md
View File

@ -298,10 +298,10 @@
return row.tag === value;
},
tableRowClassName({row, rowndex}) {
if (rowndex === 1) {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowndex === 3) {
} else if (rowIndex === 3) {
return 'success-row';
}
return '';

13
packages/date-picker/src/basic/time-spinner.vue
View File

@ -3,6 +3,7 @@
<template v-if="!arrowControl">
<el-scrollbar
@mouseenter.native="emitSelectRange('hours')"
@mousemove.native="adjustCurrentSpinner('hours')"
class="el-time-spinner__wrapper"
wrap-style="max-height: inherit;"
view-class="el-time-spinner__list"
@ -18,6 +19,7 @@
</el-scrollbar>
<el-scrollbar
@mouseenter.native="emitSelectRange('minutes')"
@mousemove.native="adjustCurrentSpinner('minutes')"
class="el-time-spinner__wrapper"
wrap-style="max-height: inherit;"
view-class="el-time-spinner__list"
@ -33,6 +35,7 @@
<el-scrollbar
v-show="showSeconds"
@mouseenter.native="emitSelectRange('seconds')"
@mousemove.native="adjustCurrentSpinner('seconds')"
class="el-time-spinner__wrapper"
wrap-style="max-height: inherit;"
view-class="el-time-spinner__list"
@ -196,16 +199,10 @@
emitSelectRange(type) {
if (type === 'hours') {
this.$emit('select-range', 0, 2);
this.adjustSpinner('minutes', this.minutes);
this.adjustSpinner('seconds', this.seconds);
} else if (type === 'minutes') {
this.$emit('select-range', 3, 5);
this.adjustSpinner('hours', this.hours);
this.adjustSpinner('seconds', this.seconds);
} else if (type === 'seconds') {
this.$emit('select-range', 6, 8);
this.adjustSpinner('minutes', this.minutes);
this.adjustSpinner('hours', this.hours);
}
this.currentScrollbar = type;
},
@ -237,6 +234,10 @@
this.adjustSpinner('seconds', this.seconds);
},
adjustCurrentSpinner(type) {
this.adjustSpinner(type, this[type]);
},
adjustSpinner(type, value) {
if (this.arrowControl) return;
const el = this.$refs[type].wrap;

50
packages/date-picker/src/panel/date-range.vue
View File

@ -89,19 +89,19 @@
@click="leftPrevMonth"
class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
<button
type="button"
@click="leftNextYear"
v-if="unlinkPanels"
:disabled="!enableYearArrow"
:class="{ 'is-disabled': !enableYearArrow }"
class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
type="button"
@click="leftNextYear"
v-if="unlinkPanels"
:disabled="!enableYearArrow"
:class="{ 'is-disabled': !enableYearArrow }"
class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
<button
type="button"
@click="leftNextMonth"
v-if="unlinkPanels"
:disabled="!enableMonthArrow"
:class="{ 'is-disabled': !enableMonthArrow }"
class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
type="button"
@click="leftNextMonth"
v-if="unlinkPanels"
:disabled="!enableMonthArrow"
:class="{ 'is-disabled': !enableMonthArrow }"
class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
<div>{{ leftLabel }}</div>
</div>
<date-table
@ -120,19 +120,19 @@
<div class="el-picker-panel__content el-date-range-picker__content is-right">
<div class="el-date-range-picker__header">
<button
type="button"
@click="rightPrevYear"
v-if="unlinkPanels"
:disabled="!enableYearArrow"
:class="{ 'is-disabled': !enableYearArrow }"
class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
type="button"
@click="rightPrevYear"
v-if="unlinkPanels"
:disabled="!enableYearArrow"
:class="{ 'is-disabled': !enableYearArrow }"
class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
<button
type="button"
@click="rightPrevMonth"
v-if="unlinkPanels"
:disabled="!enableMonthArrow"
:class="{ 'is-disabled': !enableMonthArrow }"
class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
type="button"
@click="rightPrevMonth"
v-if="unlinkPanels"
:disabled="!enableMonthArrow"
:class="{ 'is-disabled': !enableMonthArrow }"
class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
<button
type="button"
@click="rightNextYear"
@ -336,7 +336,6 @@
if (val && this.$refs.minTimePicker) {
this.$refs.minTimePicker.date = val;
this.$refs.minTimePicker.value = val;
this.$refs.minTimePicker.adjustSpinners();
}
},
@ -344,7 +343,6 @@
if (val && this.$refs.maxTimePicker) {
this.$refs.maxTimePicker.date = val;
this.$refs.maxTimePicker.value = val;
this.$refs.maxTimePicker.adjustSpinners();
}
},

3
packages/date-picker/src/panel/time-range.vue
View File

@ -135,9 +135,6 @@
this.maxDate = advanceTime(new Date(), 60 * 60 * 1000);
}
}
if (this.visible) {
this.$nextTick(_ => this.adjustSpinners());
}
},
visible(val) {

8
packages/date-picker/src/panel/time.vue
View File

@ -51,6 +51,8 @@
if (val) {
this.oldValue = this.value;
this.$nextTick(() => this.$refs.spinner.emitSelectRange('hours'));
} else {
this.needInitAdjust = true;
}
},
@ -63,8 +65,9 @@
}
this.date = date;
if (this.visible) {
if (this.visible && this.needInitAdjust) {
this.$nextTick(_ => this.adjustSpinners());
this.needInitAdjust = false;
}
},
@ -90,7 +93,8 @@
selectableRange: [],
selectionRange: [0, 2],
disabled: false,
arrowControl: false
arrowControl: false,
needInitAdjust: true
};
},

13
packages/pagination/src/pagination.js
View File

@ -3,6 +3,7 @@ import ElSelect from 'element-ui/packages/select';
import ElOption from 'element-ui/packages/option';
import ElInput from 'element-ui/packages/input';
import Locale from 'element-ui/src/mixins/locale';
import { valueEquals } from 'element-ui/src/utils/util';
export default {
name: 'ElPagination',
@ -147,9 +148,10 @@ export default {
watch: {
pageSizes: {
immediate: true,
handler(value) {
if (Array.isArray(value)) {
this.$parent.internalPageSize = value.indexOf(this.$parent.pageSize) > -1
handler(newVal, oldVal) {
if (valueEquals(newVal, oldVal)) return;
if (Array.isArray(newVal)) {
this.$parent.internalPageSize = newVal.indexOf(this.$parent.pageSize) > -1
? this.$parent.pageSize
: this.pageSizes[0];
}
@ -179,8 +181,7 @@ export default {
components: {
ElSelect,
ElOption,
ElInput
ElOption
},
methods: {
@ -202,6 +203,8 @@ export default {
};
},
components: { ElInput },
methods: {
handleFocus(event) {
this.oldValue = event.target.value;

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

@ -114,6 +114,7 @@
import { t } from 'element-ui/src/locale';
import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
import { getValueByPath } from 'element-ui/src/utils/util';
import { valueEquals } from 'element-ui/src/utils/util';
import NavigationMixin from './navigation-mixin';
const sizeMap = {
@ -122,18 +123,6 @@
'mini': 28
};
const valueEquals = (a, b) => {
// see: https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
if (a === b) return true;
if (!(a instanceof Array)) return false;
if (!(b instanceof Array)) return false;
if (a.length !== b.length) return false;
for (let i = 0; i !== a.length; ++i) {
if (a[i] !== b[i]) return false;
}
return true;
};
export default {
mixins: [Emitter, Locale, Focus('reference'), NavigationMixin],

1
packages/theme-chalk/src/autocomplete.scss
View File

@ -3,6 +3,7 @@
@import "common/var";
@import "./input.scss";
@import "./scrollbar.scss";
@import "./popper";
@include b(autocomplete) {
position: relative;

3
packages/theme-chalk/src/cascader.scss
View File

@ -1,6 +1,7 @@
@import "mixins/mixins";
@import "./input.scss";
@import "common/var";
@import "./input.scss";
@import "./popper";
@include b(cascader) {
display: inline-block;

3
packages/theme-chalk/src/date-picker.scss
View File

@ -8,4 +8,5 @@
@import "./date-picker/time-range-picker.scss";
@import "./date-picker/time-picker.scss";
@import "./input.scss";
@import "./scrollbar.scss";
@import "./scrollbar.scss";
@import "./popper";

1
packages/theme-chalk/src/dropdown.scss
View File

@ -1,6 +1,7 @@
@import "mixins/mixins";
@import "common/var";
@import "button";
@import "./popper";
@include b(dropdown) {
display: inline-block;

100
packages/theme-chalk/src/popover.scss
View File

@ -1,5 +1,6 @@
@import "mixins/mixins";
@import "common/var";
@import "./popper";
@include b(popover) {
position: absolute;
@ -27,102 +28,3 @@
margin-bottom: 12px;
}
}
@include b(popper) {
.popper__arrow,
.popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popper__arrow {
border-width: $--popover-arrow-size;
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
}
.popper__arrow::after {
content: " ";
border-width: $--popover-arrow-size;
}
&[x-placement^="top"] {
margin-bottom: #{$--popover-arrow-size + 6};
}
&[x-placement^="top"] .popper__arrow {
bottom: -$--popover-arrow-size;
left: 50%;
margin-right: #{$--tooltip-arrow-size / 2};
border-top-color: $--popover-border-color;
border-bottom-width: 0;
&::after {
bottom: 1px;
margin-left: -$--popover-arrow-size;
border-top-color: $--popover-fill;
border-bottom-width: 0;
}
}
&[x-placement^="bottom"] {
margin-top: #{$--popover-arrow-size + 6};
}
&[x-placement^="bottom"] .popper__arrow {
top: -$--popover-arrow-size;
left: 50%;
margin-right: #{$--tooltip-arrow-size / 2};
border-top-width: 0;
border-bottom-color: $--popover-border-color;
&::after {
top: 1px;
margin-left: -$--popover-arrow-size;
border-top-width: 0;
border-bottom-color: $--popover-fill;
}
}
&[x-placement^="right"] {
margin-left: #{$--popover-arrow-size + 6};
}
&[x-placement^="right"] .popper__arrow {
top: 50%;
left: -$--popover-arrow-size;
margin-bottom: #{$--tooltip-arrow-size / 2};
border-right-color: $--popover-border-color;
border-left-width: 0;
&::after {
bottom: -$--popover-arrow-size;
left: 1px;
border-right-color: $--popover-fill;
border-left-width: 0;
}
}
&[x-placement^="left"] {
margin-right: #{$--popover-arrow-size + 6};
}
&[x-placement^="left"] .popper__arrow {
top: 50%;
right: -$--popover-arrow-size;
margin-bottom: #{$--tooltip-arrow-size / 2};
border-right-width: 0;
border-left-color: $--popover-border-color;
&::after {
right: 1px;
bottom: -$--popover-arrow-size;
margin-left: -$--popover-arrow-size;
border-right-width: 0;
border-left-color: $--popover-fill;
}
}
}

101
packages/theme-chalk/src/popper.scss Normal file
View File

@ -0,0 +1,101 @@
@import "mixins/mixins";
@import "common/var";
@include b(popper) {
.popper__arrow,
.popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popper__arrow {
border-width: $--popover-arrow-size;
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
}
.popper__arrow::after {
content: " ";
border-width: $--popover-arrow-size;
}
&[x-placement^="top"] {
margin-bottom: #{$--popover-arrow-size + 6};
}
&[x-placement^="top"] .popper__arrow {
bottom: -$--popover-arrow-size;
left: 50%;
margin-right: #{$--tooltip-arrow-size / 2};
border-top-color: $--popover-border-color;
border-bottom-width: 0;
&::after {
bottom: 1px;
margin-left: -$--popover-arrow-size;
border-top-color: $--popover-fill;
border-bottom-width: 0;
}
}
&[x-placement^="bottom"] {
margin-top: #{$--popover-arrow-size + 6};
}
&[x-placement^="bottom"] .popper__arrow {
top: -$--popover-arrow-size;
left: 50%;
margin-right: #{$--tooltip-arrow-size / 2};
border-top-width: 0;
border-bottom-color: $--popover-border-color;
&::after {
top: 1px;
margin-left: -$--popover-arrow-size;
border-top-width: 0;
border-bottom-color: $--popover-fill;
}
}
&[x-placement^="right"] {
margin-left: #{$--popover-arrow-size + 6};
}
&[x-placement^="right"] .popper__arrow {
top: 50%;
left: -$--popover-arrow-size;
margin-bottom: #{$--tooltip-arrow-size / 2};
border-right-color: $--popover-border-color;
border-left-width: 0;
&::after {
bottom: -$--popover-arrow-size;
left: 1px;
border-right-color: $--popover-fill;
border-left-width: 0;
}
}
&[x-placement^="left"] {
margin-right: #{$--popover-arrow-size + 6};
}
&[x-placement^="left"] .popper__arrow {
top: 50%;
right: -$--popover-arrow-size;
margin-bottom: #{$--tooltip-arrow-size / 2};
border-right-width: 0;
border-left-color: $--popover-border-color;
&::after {
right: 1px;
bottom: -$--popover-arrow-size;
margin-left: -$--popover-arrow-size;
border-right-width: 0;
border-left-color: $--popover-fill;
}
}
}

1
packages/theme-chalk/src/select-dropdown.scss
View File

@ -1,5 +1,6 @@
@import "mixins/mixins";
@import "common/var";
@import "./popper";
@include b(select-dropdown) {
position: absolute;

1
packages/theme-chalk/src/time-picker.scss
View File

@ -3,3 +3,4 @@
@import "./date-picker/time-picker.scss";
@import "./input.scss";
@import "./scrollbar.scss";
@import "./popper";

3
packages/theme-chalk/src/time-select.scss
View File

@ -1,7 +1,8 @@
@import "common/var";
@import "./date-picker/picker.scss";
@import "./date-picker/date-picker.scss";
@import "common/var";
@import "./scrollbar.scss";
@import "./popper";
.time-select {
margin: 5px 0;

11
src/utils/util.js
View File

@ -71,3 +71,14 @@ export const generateId = function() {
return Math.floor(Math.random() * 10000);
};
export const valueEquals = (a, b) => {
// see: https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
if (a === b) return true;
if (!(a instanceof Array)) return false;
if (!(b instanceof Array)) return false;
if (a.length !== b.length) return false;
for (let i = 0; i !== a.length; ++i) {
if (a[i] !== b[i]) return false;
}
return true;
};