featfix: 修复 CTreeDrop 下拉框定位错误

Author: ChuChencheng

CHANGELOG.md

@@ -5,6 +5,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/lang/zh-CN/
 
 ## [Unreleased]
 
+## [2.2.5] - 2019-12-11
+
+### Added
+
+### Changed
+
+### Deprecated
+
+### Removed
+
+### Fixed
+
+- 修复 `CTreeDrop` 下拉框定位不正确的问题
+
+### Security
+
 ## [2.2.4] - 2019-11-22
 
 ### Added

examples/Drop.vue

@@ -7,6 +7,7 @@
       clearable
       :cascade="false"
       drop-placeholder="请选择"
+      :placement="placement"
       :dropdown-min-width="300"
       dropdown-width-fixed
       @checked-change="handleCheckedChange"
@@ -48,6 +49,7 @@ export default {
     return {
       data,
       value: '2',
+      placement: 'bottom-start',
     }
   },
   methods: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsfe/ctree",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "main": "./dist/ctree.umd.min.js",
   "types": "./types",
   "description": "A vue tree component using virtual list.",

src/components/TreeDrop.vue

@@ -264,17 +264,21 @@ export default (Vue as VueConstructor<Vue & {
     /** 定位下拉框 */
     locateDropdown (): void {
       const referenceRect = this.$refs.reference.getBoundingClientRect()
-      const referenceWidth = referenceRect.right - referenceRect.left
-      const referenceHeight = referenceRect.bottom - referenceRect.top
+      const referenceWidth = referenceRect.width
+      const referenceHeight = referenceRect.height
 
       // Set dropdown width
       const minWidth = `${typeof this.dropdownMinWidth === 'number' ? this.dropdownMinWidth : referenceWidth}px`
       this.$refs.dropdown.style.minWidth = minWidth
       this.$refs.dropdown.style.width = this.dropdownWidthFixed ? minWidth : 'auto'
 
       const dropdownRect = this.$refs.dropdown.getBoundingClientRect()
-      const dropdownWidth = dropdownRect.right - dropdownRect.left
-      const dropdownHeight = dropdownRect.bottom - dropdownRect.top
+      const dropdownStyleDeclaration = window.getComputedStyle(this.$refs.dropdown)
+      const dropdownMarginHorizontal = parseFloat(dropdownStyleDeclaration.marginLeft) + parseFloat(dropdownStyleDeclaration.marginRight)
+      const dropdownMarginVertical = parseFloat(dropdownStyleDeclaration.marginTop) + parseFloat(dropdownStyleDeclaration.marginBottom)
+      const dropdownWidth = dropdownRect.width + dropdownMarginHorizontal
+      // 0.8 这个值写在 css 里，因为有动画，所以获取到的是 scaleY 变换后的值
+      const dropdownHeight = dropdownRect.height / 0.8 + dropdownMarginVertical
       let top = 0
       let left = 0
       if (this.transfer) {
@@ -302,7 +306,7 @@ export default (Vue as VueConstructor<Vue & {
         case 'bottom':
           if (this.transfer) {
             top = window.pageYOffset + referenceRect.bottom
-            left = window.pageXOffset + referenceRect.right - dropdownWidth
+            left = (window.pageXOffset + referenceRect.right - dropdownWidth) / 2
           } else {
             top = referenceHeight
             left = (referenceWidth - dropdownWidth) / 2
@@ -328,7 +332,7 @@ export default (Vue as VueConstructor<Vue & {
         case 'top':
           if (this.transfer) {
             top = window.pageYOffset + referenceRect.top - dropdownHeight
-            left = window.pageXOffset + referenceRect.right - dropdownWidth
+            left = (window.pageXOffset + referenceRect.right - dropdownWidth) / 2
           } else {
             top = -dropdownHeight
             left = (referenceWidth - dropdownWidth) / 2