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`，默认为空 三种箭头方位：`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="box">
<div class="top"> <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-button>上左</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top"> <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
<el-button>上边</el-button> <el-button>上边</el-button>
</el-tooltip> </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-button>上右</el-button>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="left"> <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-button>左上</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left"> <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
<el-button>左边</el-button> <el-button>左边</el-button>
</el-tooltip> </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-button>左下</el-button>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="right"> <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-button>右上</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right"> <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
<el-button>右边</el-button> <el-button>右边</el-button>
</el-tooltip> </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-button>右下</el-button>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="bottom"> <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-button>下左</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom"> <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
<el-button>下边</el-button> <el-button>下边</el-button>
</el-tooltip> </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-button>下右</el-button>
</el-tooltip> </el-tooltip>
</div> </div>

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

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

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

@ -20,7 +20,9 @@
v-model="leftVisibleDate" v-model="leftVisibleDate"
@input="handleDateInput($event, 'min')" @input="handleDateInput($event, 'min')"
@change="handleDateChange($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 <input
placeholder="开始时间" placeholder="开始时间"
class="el-date-range-picker__editor" class="el-date-range-picker__editor"
@ -28,10 +30,10 @@
@focus="leftTimePickerVisible = true" @focus="leftTimePickerVisible = true"
@change="handleTimeChange($event, 'min')"/> @change="handleTimeChange($event, 'min')"/>
<time-picker <time-picker
v-ref:lefttimepicker ref="lefttimepicker"
:date="minDate" :date="minDate"
@pick="handleLeftTimePick" @pick="handleLeftTimePick"
v-show="leftTimePickerVisible"> :visible="leftTimePickerVisible">
</time-picker> </time-picker>
</span> </span>
</span> </span>
@ -44,7 +46,9 @@
:readonly="!minDate" :readonly="!minDate"
@input="handleDateInput($event, 'max')" @input="handleDateInput($event, 'max')"
@change="handleDateChange($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 <input
placeholder="结束时间" placeholder="结束时间"
class="el-date-range-picker__editor" class="el-date-range-picker__editor"
@ -53,10 +57,10 @@
:readonly="!minDate" :readonly="!minDate"
@change="handleTimeChange($event, 'max')" /> @change="handleTimeChange($event, 'max')" />
<time-picker <time-picker
v-ref:righttimepicker ref="righttimepicker"
:date="maxDate" :date="maxDate"
@pick="handleRightTimePick" @pick="handleRightTimePick"
v-show="rightTimePickerVisible"></time-picker> :visible="rightTimePickerVisible"></time-picker>
</span> </span>
</span> </span>
</div> </div>
@ -107,7 +111,6 @@
</div> </div>
<div class="el-picker-panel__footer" v-if="showTime"> <div class="el-picker-panel__footer" v-if="showTime">
<a <a
href="JavaScript:"
class="el-picker-panel__link-btn" class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('datepicker.today') }}</a> @click="changeToToday">{{ $t('datepicker.today') }}</a>
<button <button
@ -237,6 +240,10 @@
} }
}, },
directives: {
Clickoutside: require('main/utils/clickoutside').default
},
data() { data() {
return { return {
date: new Date(), date: new Date(),
@ -267,11 +274,11 @@
}, },
leftTimePickerVisible(val) { leftTimePickerVisible(val) {
if (val) this.$refs.lefttimepicker.ajustScrollTop(); if (val) this.$nextTick(() => this.$refs.lefttimepicker.ajustScrollTop());
}, },
rightTimePickerVisible(val) { rightTimePickerVisible(val) {
if (val) this.$refs.righttimepicker.ajustScrollTop(); if (val) this.$nextTick(() => this.$refs.righttimepicker.ajustScrollTop());
}, },
value(newVal) { value(newVal) {
@ -288,6 +295,14 @@
methods: { methods: {
$t, $t,
closeLeftTimePicker() {
this.leftTimePickerVisible = false;
},
closeRightTimePicker() {
this.rightTimePickerVisible = false;
},
handleDateInput(event, type) { handleDateInput(event, type) {
const value = event.target.value; const value = event.target.value;
const parsedValue = parseDate(value, 'yyyy-MM-dd'); const parsedValue = parseDate(value, 'yyyy-MM-dd');
@ -388,7 +403,6 @@
this.minDate.setSeconds(value.getSeconds()); this.minDate.setSeconds(value.getSeconds());
this.minDate = new Date(this.minDate); this.minDate = new Date(this.minDate);
this.leftTimePickerVisible = false;
}, },
handleRightTimePick(value) { handleRightTimePick(value) {
@ -396,8 +410,6 @@
const now = new Date(); const now = new Date();
if (now >= this.minDate) { if (now >= this.minDate) {
this.maxDate = new Date(); this.maxDate = new Date();
} else {
} }
} }
@ -408,8 +420,6 @@
this.maxDate = new Date(this.maxDate); this.maxDate = new Date(this.maxDate);
} }
this.rightTimePickerVisible = false;
}, },
prevMonth() { prevMonth() {

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

@ -1,7 +1,7 @@
<template> <template>
<transition name="md-fade-bottom"> <transition name="md-fade-bottom">
<div <div
v-show="visible" v-show="currentVisible"
class="el-time-panel"> class="el-time-panel">
<div class="el-time-panel__content"> <div class="el-time-panel__content">
<time-spinner <time-spinner
@ -40,10 +40,14 @@
default: new Date() default: new Date()
}, },
visible: false visible: Boolean
}, },
watch: { watch: {
visible(val) {
this.currentVisible = val;
},
value(newVal) { value(newVal) {
let date; let date;
if (newVal instanceof Date) { if (newVal instanceof Date) {
@ -70,7 +74,9 @@
hours: 0, hours: 0,
minutes: 0, minutes: 0,
seconds: 0, seconds: 0,
selectableRange: [] selectableRange: [],
currentDate: this.date,
currentVisible: this.visible
}; };
}, },
@ -87,16 +93,16 @@
handleChange(date) { handleChange(date) {
if (date.hours !== undefined) { if (date.hours !== undefined) {
this.date.setHours(date.hours); this.currentDate.setHours(date.hours);
this.hours = this.date.getHours(); this.hours = this.currentDate.getHours();
} }
if (date.minutes !== undefined) { if (date.minutes !== undefined) {
this.date.setMinutes(date.minutes); this.currentDate.setMinutes(date.minutes);
this.minutes = this.date.getMinutes(); this.minutes = this.currentDate.getMinutes();
} }
if (date.seconds !== undefined) { if (date.seconds !== undefined) {
this.date.setSeconds(date.seconds); this.currentDate.setSeconds(date.seconds);
this.seconds = this.date.getSeconds(); this.seconds = this.currentDate.getSeconds();
} }
this.handleConfirm(true); this.handleConfirm(true);
@ -107,7 +113,7 @@
}, },
handleConfirm(visible = false, first) { 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); this.$emit('pick', date, visible, first);
}, },
@ -122,12 +128,12 @@
}, },
created() { created() {
!this.date && Vue.set(this, 'date', new Date()); !this.currentDate && Vue.set(this, 'currentDate', new Date());
!this.visible && Vue.set(this, 'visible', false); !this.currentVisible && Vue.set(this, 'currentVisible', false);
this.hours = this.date.getHours(); this.hours = this.currentDate.getHours();
this.minutes = this.date.getMinutes(); this.minutes = this.currentDate.getMinutes();
this.seconds = this.date.getSeconds(); this.seconds = this.currentDate.getSeconds();
}, },
mounted() { mounted() {

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

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

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

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