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

Fix DatePicker panel bug & Fix menu router prop

pull/2/head
qingwei.li 2016-08-23 13:29:45 +08:00
parent c927dfb1da
commit 228fee1e16
6 changed files with 56 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

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;

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

@ -20,7 +20,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 +30,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 +46,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,10 +57,10 @@
: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>
@ -107,7 +111,6 @@
</div>
<div class="el-picker-panel__footer" v-if="showTime">
<a
href="JavaScript:"
class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('datepicker.today') }}</a>
<button
@ -237,6 +240,10 @@
}
},
directives: {
Clickoutside: require('main/utils/clickoutside').default
},
data() {
return {
date: new Date(),
@ -267,11 +274,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 +295,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');
@ -388,7 +403,6 @@
this.minDate.setSeconds(value.getSeconds());
this.minDate = new Date(this.minDate);
this.leftTimePickerVisible = false;
},
handleRightTimePick(value) {
@ -396,8 +410,6 @@
const now = new Date();
if (now >= this.minDate) {
this.maxDate = new Date();
} else {
}
}
@ -408,8 +420,6 @@
this.maxDate = new Date(this.maxDate);
}
this.rightTimePickerVisible = false;
},
prevMonth() {

36
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
@ -40,10 +40,14 @@
default: new Date()
},
visible: false
visible: Boolean
},
watch: {
visible(val) {
this.currentVisible = val;
},
value(newVal) {
let date;
if (newVal instanceof Date) {
@ -70,7 +74,9 @@
hours: 0,
minutes: 0,
seconds: 0,
selectableRange: []
selectableRange: [],
currentDate: this.date,
currentVisible: this.visible
};
},
@ -87,16 +93,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 +113,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 +128,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);
}
}
},