Merge pull request #106 from QingWei-Li/feat/date-picker

DatePicker: add align attribute

CHANGELOG.md

@@ -12,6 +12,8 @@
 - 修复 TimePicker 图标样式被默认图标样式覆盖
 - 修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题
 - 修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题
+- 新增 时间、日期选择器增加 align 属性，可设置对齐方式
+- 新增 TableColumn 的 align 属性
 
 #### 非兼容性更新
 - Select 组件样式的 `display` 属性默认值修改为 `block`

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
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

packages/autocomplete/src/autocomplete.vue

@@ -42,9 +42,7 @@
 </template>
 <script>
   import ElInput from 'packages/input/index.js';
-  import Vue from 'vue';
+  import Clickoutside from 'main/utils/clickoutside';
-  import VueClickoutside from 'main/utils/clickoutside';
-  Vue.use(VueClickoutside);
 
   export default {
     name: 'ElAutocomplete',
@@ -52,6 +50,7 @@
     components: {
       ElInput
     },
+    directives: { Clickoutside },
     props: {
       placeholder: String,
       disabled: Boolean,

packages/date-picker/src/css/picker.css

@@ -47,8 +47,8 @@
         cursor: pointer;
         position: absolute;
         display: inline-block;
-        width: 20px;
+        width: 13px;
-        right: 0;
+        right: 10px;
         top: 0;
         bottom: 0;
         color: var(--datepicker-trigger-color);

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