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 });