From 66139664e4b6e07a730663163f9f3d3b59e1e3f7 Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Wed, 21 Sep 2016 12:46:53 +0800
Subject: [PATCH] DatePicker: add align attribute
---
CHANGELOG.md | 2 ++
examples/docs/date-picker.md | 2 ++
packages/autocomplete/src/autocomplete.vue | 5 ++---
packages/date-picker/src/css/picker.css | 4 ++--
packages/date-picker/src/picker.vue | 11 ++++++++++-
5 files changed, 18 insertions(+), 6 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 928b0d503..9be8723a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,8 @@
- 修复 TimePicker 图标样式被默认图标样式覆盖
- 修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题
- 修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题
+- 新增 时间、日期选择器增加 align 属性，可设置对齐方式
+- 新增 TableColumn 的 align 属性
#### 非兼容性更新
- Select 组件样式的 `display` 属性默认值修改为 `block`
diff --git a/examples/docs/date-picker.md b/examples/docs/date-picker.md
index fb2771c00..cdc954171 100644
--- a/examples/docs/date-picker.md
+++ b/examples/docs/date-picker.md
@@ -205,6 +205,7 @@
<el-date-picker
v-model="value7"
type="daterange"
+ align="right"
placeholder="选择日期范围"
:picker-options="pickerOptions2"
style="width: 220px">
@@ -257,6 +258,7 @@
| type | 显示类型 | string | year/month/date/datetime/week | date |
| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
| shortcuts | 快捷选项列表，配置信息<br>查看下表 | object[] | — | — |
+| align | 对齐方式 | left, center, right | left |
### Shortcuts
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
index f8a333ef9..f3e64a0f9 100644
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -42,9 +42,7 @@
</template>
<script>
import ElInput from 'packages/input/index.js';
- import Vue from 'vue';
- import VueClickoutside from 'main/utils/clickoutside';
- Vue.use(VueClickoutside);
+ import Clickoutside from 'main/utils/clickoutside';
export default {
name: 'ElAutocomplete',
@@ -52,6 +50,7 @@
components: {
ElInput
},
+ directives: { Clickoutside },
props: {
placeholder: String,
disabled: Boolean,
diff --git a/packages/date-picker/src/css/picker.css b/packages/date-picker/src/css/picker.css
index 70ec352c3..d8136a916 100644
--- a/packages/date-picker/src/css/picker.css
+++ b/packages/date-picker/src/css/picker.css
@@ -47,8 +47,8 @@
cursor: pointer;
position: absolute;
display: inline-block;
- width: 20px;
- right: 0;
+ width: 13px;
+ right: 10px;
top: 0;
bottom: 0;
color: var(--datepicker-trigger-color);
diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
index c12b34010..93eca9292 100644
--- a/packages/date-picker/src/picker.vue
+++ b/packages/date-picker/src/picker.vue
@@ -177,6 +177,11 @@ const TYPE_VALUE_RESOLVER_MAP = {
}
}
};
+const PLACEMENT_MAP = {
+ left: 'bottom-start',
+ center: 'bottom-center',
+ right: 'bottom-end'
+};
export default {
mixins: [emitter],
@@ -185,6 +190,10 @@ export default {
format: String,
readonly: Boolean,
placeholder: String,
+ align: {
+ type: String,
+ default: 'left'
+ },
value: {},
haveTrigger: {},
pickerOptions: {}
@@ -465,7 +474,7 @@ export default {
this.popper = new Popper(this.$refs.reference, this.picker.$el, {
gpuAcceleration: false,
- placement: 'bottom-start',
+ placement: PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left,
boundariesPadding: 0,
forceAbsolute: true
});