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

Merge pull request #98 from QingWei-Li/feat/fix-buglist 

Feat/fix buglist
pull/2/head
FuryBean 2016-08-24 20:31:31 +08:00 committed by GitHub
parent b8a9fd5916 39bf244190
commit 2d05bdea49
14 changed files with 98 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/docs/input.md
View File

@ -70,7 +70,7 @@
## 禁用状态
<div class="demo-box demo-input">
<div class="demo-box demo-input">
<el-input
:disabled="true"
placeholder="请输入内容"

18
examples/docs/tooltip.md
View File

@ -21,7 +21,7 @@ Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们
三种箭头方位：`start`, `end`，默认为空
如`top center`即`placement="top"`，`left top`即`placement="left-start"`。
如`top center`即`placement="top"`，`left top`即`placement="left-end"`。
下面是完整的九个示例，可以通过该示例来理解上面的说明，选择你要的效果：
@ -56,47 +56,47 @@ Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们
<div class="box">
<div class="top">
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-end">
<el-button>上左</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
<el-button>上边</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
<el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-start">
<el-button>上右</el-button>
</el-tooltip>
</div>
<div class="left">
<el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
<el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-end">
<el-button>左上</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
<el-button>左边</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-start">
<el-button>左下</el-button>
</el-tooltip>
</div>
<div class="right">
<el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
<el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-end">
<el-button>右上</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
<el-button>右边</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-start">
<el-button>右下</el-button>
</el-tooltip>
</div>
<div class="bottom">
<el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
<el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-end">
<el-button>下左</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
<el-button>下边</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
<el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-start">
<el-button>下右</el-button>
</el-tooltip>
</div>

2
packages/date-picker/src/css/date-picker.css
View File

@ -35,7 +35,7 @@
@e time-header {
position: relative;
border-bottom: 1px solid var(--datepicker-inner-border-color);
font-size: 0;
font-size: 12px;
padding: 8px 5px 5px 5px;
display: flex;
}

2
packages/date-picker/src/css/date-range-picker.css
View File

@ -89,7 +89,7 @@
@e time-header {
position: relative;
border-bottom: 1px solid var(--datepicker-inner-border-color);
font-size: 0;
font-size: 12px;
padding: 8px 5px 5px 5px;
display: flex;

1
packages/date-picker/src/css/picker-panel.css
View File

@ -85,6 +85,7 @@
}
@e link-btn {
cursor: pointer;
color: #55a4ff;
text-decoration: none;
padding: 15px;

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

@ -7,6 +7,7 @@
<slot name="sidebar" class="el-picker-panel__sidebar"></slot>
<div class="el-picker-panel__sidebar" v-if="shortcuts">
<button
type="button"
class="el-picker-panel__shortcut"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
@ -20,7 +21,9 @@
v-model="leftVisibleDate"
@input="handleDateInput($event, 'min')"
@change="handleDateChange($event, 'min')"/>
<span class="el-date-range-picker__time-picker-wrap">
<span
class="el-date-range-picker__time-picker-wrap"
v-clickoutside="closeLeftTimePicker">
<input
placeholder="开始时间"
class="el-date-range-picker__editor"
@ -28,10 +31,10 @@
@focus="leftTimePickerVisible = true"
@change="handleTimeChange($event, 'min')"/>
<time-picker
v-ref:lefttimepicker
ref="lefttimepicker"
:date="minDate"
@pick="handleLeftTimePick"
v-show="leftTimePickerVisible">
:visible="leftTimePickerVisible">
</time-picker>
</span>
</span>
@ -44,7 +47,9 @@
:readonly="!minDate"
@input="handleDateInput($event, 'max')"
@change="handleDateChange($event, 'max')" />
<span class="el-date-range-picker__time-picker-wrap">
<span
class="el-date-range-picker__time-picker-wrap"
v-clickoutside="closeRightTimePicker">
<input
placeholder="结束时间"
class="el-date-range-picker__editor"
@ -53,19 +58,21 @@
:readonly="!minDate"
@change="handleTimeChange($event, 'max')" />
<time-picker
v-ref:righttimepicker
ref="righttimepicker"
:date="maxDate"
@pick="handleRightTimePick"
v-show="rightTimePickerVisible"></time-picker>
:visible="rightTimePickerVisible"></time-picker>
</span>
</span>
</div>
<div class="el-picker-panel__content el-date-range-picker__content is-left">
<div class="el-date-range-picker__header">
<button
type="button"
@click="prevYear"
class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
<button
type="button"
@click="prevMonth"
class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
<div>{{ leftLabel }}</div>
@ -85,9 +92,11 @@
<div class="el-picker-panel__content el-date-range-picker__content is-right">
<div class="el-date-range-picker__header">
<button
type="button"
@click="nextYear"
class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
<button
type="button"
@click="nextMonth"
class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
<div>{{ rightLabel }}</div>
@ -106,11 +115,11 @@
</div>
</div>
<div class="el-picker-panel__footer" v-if="showTime">
<a
href="JavaScript:"
<!-- <a
class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('datepicker.today') }}</a>
@click="changeToToday">{{ $t('datepicker.today') }}</a> -->
<button
type="button"
class="el-picker-panel__btn"
@click="handleConfirm"
:disabled="btnDisabled">确定</button>
@ -237,6 +246,10 @@
}
},
directives: {
Clickoutside: require('main/utils/clickoutside').default
},
data() {
return {
date: new Date(),
@ -267,11 +280,11 @@
},
leftTimePickerVisible(val) {
if (val) this.$refs.lefttimepicker.ajustScrollTop();
if (val) this.$nextTick(() => this.$refs.lefttimepicker.ajustScrollTop());
},
rightTimePickerVisible(val) {
if (val) this.$refs.righttimepicker.ajustScrollTop();
if (val) this.$nextTick(() => this.$refs.righttimepicker.ajustScrollTop());
},
value(newVal) {
@ -288,6 +301,14 @@
methods: {
$t,
closeLeftTimePicker() {
this.leftTimePickerVisible = false;
},
closeRightTimePicker() {
this.rightTimePickerVisible = false;
},
handleDateInput(event, type) {
const value = event.target.value;
const parsedValue = parseDate(value, 'yyyy-MM-dd');
@ -379,37 +400,29 @@
this.rightTimePickerVisible = false;
},
handleLeftTimePick(value) {
if (!this.minDate) {
this.minDate = new Date();
}
this.minDate.setHours(value.getHours());
this.minDate.setMinutes(value.getMinutes());
this.minDate.setSeconds(value.getSeconds());
handleLeftTimePick(value, visible, first) {
this.minDate = value || this.minDate || new Date();
this.minDate = new Date(this.minDate);
this.leftTimePickerVisible = false;
if (!first) {
this.leftTimePickerVisible = visible;
}
},
handleRightTimePick(value) {
handleRightTimePick(value, visible, first) {
if (!this.maxDate) {
const now = new Date();
if (now >= this.minDate) {
this.maxDate = new Date();
} else {
}
}
if (this.maxDate) {
this.maxDate.setHours(value.getHours());
this.maxDate.setMinutes(value.getMinutes());
this.maxDate.setSeconds(value.getSeconds());
this.maxDate = new Date(this.maxDate);
this.maxDate = value;
}
this.rightTimePickerVisible = false;
if (!first) {
this.rightTimePickerVisible = visible;
}
},
prevMonth() {

6
packages/date-picker/src/panel/date.vue
View File

@ -7,6 +7,7 @@
<slot name="sidebar" class="el-picker-panel__sidebar"></slot>
<div class="el-picker-panel__sidebar" v-if="shortcuts">
<button
type="button"
class="el-picker-panel__shortcut"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
@ -35,10 +36,12 @@
</div>
<div class="el-date-picker__header" v-show="currentView !== 'time'">
<button
type="button"
@click="prevYear"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
</button>
<button
type="button"
@click="prevMonth"
v-show="currentView === 'date'"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left">
@ -52,10 +55,12 @@
class="el-date-picker__header-label"
:class="{ active: currentView === 'month' }">{{ month + 1 }}月</span>
<button
type="button"
@click="nextYear"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
</button>
<button
type="button"
@click="nextMonth"
v-show="currentView === 'date'"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right">
@ -97,6 +102,7 @@
class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('datepicker.today') }}</a>
<button
type="button"
class="el-picker-panel__btn"
@click="confirm">{{ $t('datepicker.confirm') }}</button>
</div>

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

@ -35,9 +35,11 @@
</div>
<div class="el-time-panel__footer">
<button
type="button"
class="el-time-panel__btn cancel"
@click="handleCancel()">取消</button>
<button
type="button"
class="el-time-panel__btn confirm"
@click="handleConfirm()"
:disabled="btnDisabled">确定</button>

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

@ -1,7 +1,7 @@
<template>
<transition name="md-fade-bottom">
<div
v-show="visible"
v-show="currentVisible"
class="el-time-panel">
<div class="el-time-panel__content">
<time-spinner
@ -16,9 +16,11 @@
</div>
<div class="el-time-panel__footer">
<button
type="button"
class="el-time-panel__btn cancel"
@click="handleCancel()">取消</button>
<button
type="button"
class="el-time-panel__btn confirm"
@click="handleConfirm()">确定</button>
</div>
@ -40,10 +42,14 @@
default: new Date()
},
visible: false
visible: Boolean
},
watch: {
visible(val) {
this.currentVisible = val;
},
value(newVal) {
let date;
if (newVal instanceof Date) {
@ -70,7 +76,9 @@
hours: 0,
minutes: 0,
seconds: 0,
selectableRange: []
selectableRange: [],
currentDate: this.date,
currentVisible: this.visible
};
},
@ -87,16 +95,16 @@
handleChange(date) {
if (date.hours !== undefined) {
this.date.setHours(date.hours);
this.hours = this.date.getHours();
this.currentDate.setHours(date.hours);
this.hours = this.currentDate.getHours();
}
if (date.minutes !== undefined) {
this.date.setMinutes(date.minutes);
this.minutes = this.date.getMinutes();
this.currentDate.setMinutes(date.minutes);
this.minutes = this.currentDate.getMinutes();
}
if (date.seconds !== undefined) {
this.date.setSeconds(date.seconds);
this.seconds = this.date.getSeconds();
this.currentDate.setSeconds(date.seconds);
this.seconds = this.currentDate.getSeconds();
}
this.handleConfirm(true);
@ -107,7 +115,7 @@
},
handleConfirm(visible = false, first) {
const date = new Date(limitRange(this.date, this.selectableRange));
const date = new Date(limitRange(this.currentDate, this.selectableRange));
this.$emit('pick', date, visible, first);
},
@ -122,12 +130,12 @@
},
created() {
!this.date && Vue.set(this, 'date', new Date());
!this.visible && Vue.set(this, 'visible', false);
!this.currentDate && Vue.set(this, 'currentDate', new Date());
!this.currentVisible && Vue.set(this, 'currentVisible', false);
this.hours = this.date.getHours();
this.minutes = this.date.getMinutes();
this.seconds = this.date.getSeconds();
this.hours = this.currentDate.getHours();
this.minutes = this.currentDate.getMinutes();
this.seconds = this.currentDate.getSeconds();
},
mounted() {

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

@ -41,7 +41,6 @@
import ElButton from 'packages/button/index.js';
import ElButtonGroup from 'packages/button-group/index.js';
import ElDropdownMenu from './dropdown-menu.vue';
import Vue from 'vue';
import Clickoutside from 'main/utils/clickoutside';
export default {

2
packages/menu/src/menu.vue
View File

@ -67,7 +67,7 @@
this.$emit('select', key, keyPath);
if (this.router) {
this.$route.router.go(key);
this.$router.push(key);
}
}
},

9
packages/select/src/option.vue
View File

@ -6,7 +6,7 @@
v-show="queryPassed"
:class="{ 'selected': itemSelected, 'is-disabled': disabled, 'hover': parent.hoverIndex === index }">
<slot>
<span>{{ label }}</span>
<span>{{ currentLabel }}</span>
</slot>
</li>
</template>
@ -40,7 +40,8 @@
return {
index: -1,
queryPassed: true,
hitState: false
hitState: false,
currentLabel: this.label
};
},
@ -92,7 +93,7 @@
},
queryChange(query) {
this.queryPassed = new RegExp(query, 'i').test(this.label);
this.queryPassed = new RegExp(query, 'i').test(this.currentLabel);
if (!this.queryPassed) {
this.parent.filteredOptionsCount--;
}
@ -106,7 +107,7 @@
},
created() {
this.label = this.label || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : '');
this.currentLabel = this.currentLabel || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : '');
this.parent.options.push(this);
this.parent.optionsCount++;
this.parent.filteredOptionsCount++;

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

@ -9,7 +9,7 @@
:hit="item.hitState"
type="primary"
@click.native="deleteTag($event, item)"
close-transition>{{ item.label }}</el-tag>
close-transition>{{ item.currentLabel }}</el-tag>
</transition-group>
<input
type="text"
@ -290,7 +290,7 @@
this.bottomOverflowBeforeHidden = this.selected.$el.getBoundingClientRect().bottom - this.$refs.popper.$el.getBoundingClientRect().bottom;
}
if (this.selected && this.selected.value) {
this.selectedLabel = this.selected.label;
this.selectedLabel = this.selected.currentLabel;
}
}
} else {
@ -360,7 +360,7 @@
}
} else {
this.selected = option;
this.selectedLabel = option.label;
this.selectedLabel = option.currentLabel;
this.hoverIndex = option.index;
}
},
@ -402,12 +402,12 @@
handleOptionSelect(option) {
if (!this.multiple) {
this.selected = option;
this.selectedLabel = option.label;
this.selectedLabel = option.currentLabel;
this.visible = false;
} else {
let optionIndex = -1;
this.selected.forEach((item, index) => {
if (item === option || item.label === option.label) {
if (item === option || item.currentLabel === option.currentLabel) {
optionIndex = index;
}
});

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

@ -196,6 +196,7 @@
if (this.styleNode) {
let styleSheet = this.styleNode.sheet;
if (!styleSheet) return;
for (let i = 0, j = styleSheet.cssRules.length; i < j; i++) {
styleSheet.deleteRule(0);
}