fix(select): 下拉效果

1. 菜单项位置可通过`shouldMenuOverlap`配置
2. 修复多选可过滤的下拉框位置错误问题

Author: AngusFu

src/components/select/index.md

@@ -38,6 +38,34 @@ export default {
 </script>
 ```
 
+### 弹出选项是否覆盖
+
+select 组件触发后，弹出的选项默认会覆盖在选择框上。但有时候产品并不想要这种效果。这时候可以通过`shouldMenuOverlap` 属性（`should-menu-overlap`）加以调整。下面分别是两种不同的效果：
+
+```html
+
+<c-select v-model="dim" :options="options" />
+<c-select v-model="dim" :options="options" :should-menu-overlap="false" />
+
+<script>
+export default {
+  data () {
+    return {
+      dim: '',
+      options: [
+        { label: '浏览量', value: 'pv' },
+        { label: '访客数', value: 'uv' },
+        { label: '新访客数', value: 'nv' },
+        { label: '访问时长', value: 'du' },
+        { label: '转化次数', value: 'cv' },
+        { label: 'IP 数', value: 'ip' }
+      ]
+    }
+  }
+}
+</script>
+```
+
 ### 多选
 
 给 `c-select` 添加 `multiple` 属性可以将其设置为多选。在多选时，`v-model` 绑定的值是一个数组。

src/components/select/index.vue

@@ -40,6 +40,7 @@
       :class="multiple ? 'is-multiple' : 'is-single'"
     )
       input(
+        ref="input"
         v-model="query"
         autocomplete="off"
         @click.stop="noop"
@@ -87,7 +88,7 @@
 import throttle from 'lodash/throttle'
 
 import zIndex from '@util/zIndexManager'
-import { getPosition, POSITION } from './position'
+import { getPosition } from './position'
 import resettable from '@scripts/mixins/resettable'
 import validatable from '@scripts/mixins/validatable'
 import PortalComponent from '../portal'
@@ -118,6 +119,10 @@ export default {
       type: String,
       default: '请选择...'
     },
+    shouldMenuOverlap: {
+      type: Boolean,
+      default: true
+    },
     multiple: Boolean,
     combobox: Boolean,
     autocomplete: Boolean,
@@ -205,7 +210,7 @@ export default {
     },
     showPlaceholder () {
       const empty = !this.selectedOptions.length
-      return empty && !this.isOpen
+      return empty && !this.showInput
     },
     exceedMaxChipCount () {
       return this.selectedOptions.length > this.maxChipCount
@@ -225,7 +230,10 @@ export default {
     isOpen () {
       if (this.isOpen) {
         this.menuStyle.minWidth = `${this.$el.offsetWidth}px`
-        this.positionMenu()
+        // reset positon to next tick
+        // this would fix cases where input element in `<c-select autocomplete />`
+        // is expanding (add a new line)
+        this.$nextTick(this.positionMenu)
         window.addEventListener('click', this.onBodyClick, true)
       } else {
         window.removeEventListener('click', this.onBodyClick, true)
@@ -248,9 +256,7 @@ export default {
 
     selectedOptions: function () {
       if (!this.multiple || this.$isServer) return
-      this.$nextTick(function () {
-        this.positionMenu()
-      })
+      this.$nextTick(this.positionMenu)
     }
   },
 
@@ -354,14 +360,18 @@ export default {
       }
     },
 
+    focusOnInput () {
+      this.$nextTick(() => {
+        this.$refs.input.focus()
+      })
+    },
+
     open () {
       this.isOpen = true;
       [this.activeOption] = this.filteredOptions
       if (this.showInput) {
         this.query = ''
-        this.$nextTick(_ => {
-          this.$el.querySelector('input').focus()
-        })
+        this.focusOnInput()
       }
     },
 
@@ -426,15 +436,20 @@ export default {
       const index = this.selectedOptions.indexOf(option)
       this.selectedOptions.splice(index, 1)
       this.emitChange()
+      // 输入框重新获得焦点
+      this.focusOnInput()
     },
 
     positionMenu () {
-      const pos = this.canInput ? POSITION.BOTTOM : POSITION.TOP
-      const { top, left } = getPosition(this.menuEl, this.$el, pos)
-      const { style } = this.menuEl
-      style.top = `${top}px`
-      style.left = `${left}px`
-      style.zIndex = zIndex.next()
+      const { shouldMenuOverlap, canInput, menuEl } = this
+      const { top, left, height } = getPosition(menuEl, this.$el)
+      const overlap = shouldMenuOverlap && !canInput
+
+      const offset = 4
+      const menuTop = overlap ? top : (top + height + offset)
+      menuEl.style.left = `${left}px`
+      menuEl.style.top = `${menuTop}px`
+      menuEl.style.zIndex = zIndex.next()
     },
 
     onBodyClick (e) {

src/components/select/position.js

@@ -1,17 +1,22 @@
-/**
- * get absolute position relative to another element
- */
 export const POSITION = {
   TOP: 'top',
   BOTTOM: 'bottom'
 }
-export function getPosition (el, refEl, pos = POSITION.TOP) {
-  const refRect = refEl.getBoundingClientRect()
-  const refTop = refRect.top + window.pageYOffset
-  const refLeft = refRect.left + window.pageXOffset
-  const left = refLeft
-  const top = pos === POSITION.TOP ? refTop : refTop + refEl.clientHeight
-  return { left, top }
+
+/**
+ * get absolute position relative to another element
+ */
+export function getPosition (el, refEl) {
+  const { top, left, width, height } = refEl.getBoundingClientRect()
+  const refTop = top + window.pageYOffset
+  const refLeft = left + window.pageXOffset
+
+  return {
+    width,
+    height,
+    left: refLeft,
+    top: refTop
+  }
 }
 
 export default { getPosition }