refactor(cascader): support keyboard on lazyload

2025-02-17 13:20:52 +08:00 · 2019-08-28 19:19:31 +08:00 · 2019-08-28 19:19:31 +08:00 · fb7f8e0e00
commit fb7f8e0e00
parent 63b8fbd64b
9 changed files with 61 additions and 52 deletions
--- a/demo/components/cascaderDemo/multipleAllLazy.demo.vue
+++ b/demo/components/cascaderDemo/multipleAllLazy.demo.vue
@ -57,7 +57,6 @@ export default {
  },
  methods: {
    handleLoad (option, resolve) {
-      console.log(option)
      window.setTimeout(() => {
        resolve(genChildren(option))
      }, 1000)
--- a/demo/components/cascaderDemo/multipleLazy.demo.vue
+++ b/demo/components/cascaderDemo/multipleLazy.demo.vue
@ -56,7 +56,6 @@ export default {
  },
  methods: {
    handleLoad (option, resolve) {
-      console.log(option)
      window.setTimeout(() => {
        resolve(genChildren(option))
      }, 1000)
--- a/demo/components/cascaderDemo/singleAllLazy.demo.vue
+++ b/demo/components/cascaderDemo/singleAllLazy.demo.vue
@ -56,7 +56,6 @@ export default {
  },
  methods: {
    handleLoad (option, resolve) {
-      console.log(option)
      window.setTimeout(() => {
        resolve(genChildren(option))
      }, 1000)
--- a/demo/components/cascaderDemo/singleLazy.demo.vue
+++ b/demo/components/cascaderDemo/singleLazy.demo.vue
@ -46,7 +46,6 @@ export default {
  },
  methods: {
    handleLoad (option, resolve) {
-      console.log(option)
      window.setTimeout(() => {
        resolve(genChildren(option))
      }, 1000)
--- a/packages/common/Cascader/src/CascaderMenu.vue
+++ b/packages/common/Cascader/src/CascaderMenu.vue
@ -130,7 +130,8 @@ export default {
    return {
      trackId: null,
      loading: false,
-      masked: false
+      masked: false,
+      loadingId: null
    }
  },
  computed: {
@ -149,11 +150,11 @@ export default {
      return linkedCascaderOptions(this.options, this.type)
    },
    menuOptions () {
-      console.log('menuOptions called')
+      // console.log('menuOptions called')
      return menuOptions(this.linkedCascaderOptions, this.value, this.type)
    },
    menuModel () {
-      return menuModel(this.menuOptions, this.activeId, this.trackId)
+      return menuModel(this.menuOptions, this.activeId, this.trackId, this.loadingId)
    },
    firstCascaderOption () {
      if (this.menuModel && this.menuModel[0] && this.menuModel[0][0]) {
@ -218,7 +219,18 @@ export default {
        this.handleMenuTypeChange(selectMenuActive)
      })
    },
+    activeId (id) {
+      if (!id) return
+      /**
+       * lazy load
+       */
+      const option = this.idOptionMap.get(id)
+      if (option && !option.loaded) {
+        this.loadOptionChildren(option)
+      }
+    },
    trackId (id) {
+      if (!id) return
      /**
       * scroll to option element
       */
@ -303,38 +315,40 @@ export default {
    },
    handleOptionMouseLeave (e, option) {
    },
-    resolveLoad (option, children, setLoading) {
+    updateLoadingId (id) {
+      // console.log('updateLoadingId', id)
+      this.loadingId = id
+    },
+    resolveLoad (option, children, callback) {
      const newPatches = new Map(this.patches)
      newPatches.set(option.id, children)
      this.$emit('update:patches', newPatches)
      this.loading = false
-      setLoading(false)
+      this.updateLoadingId(null)
+      if (callback) callback()
    },
-    rejectLoad (setLoading) {
+    rejectLoad () {
      this.loading = false
-      setLoading(false)
+      this.updateLoadingId(null)
    },
-    handleOptionClick (e, option, setLoading) {
-      if (this.expandTriggeredByClick && !option.disabled) {
-        console.log(option)
-        this.updateActiveId(option.id)
-        this.updateTrackId(option.id)
-        if (this.lazy) {
-          if (!option.loaded) {
-            if (!this.loading) {
-              this.loading = true
-              setLoading(true)
-              this.onLoad(option, (children) => this.resolveLoad(option, children, setLoading), () => this.rejectLoad(setLoading))
-            }
+    loadOptionChildren (option) {
+      if (this.lazy) {
+        if (!option.loaded) {
+          if (!this.loading) {
+            this.loading = true
+            this.updateLoadingId(option.id)
+            this.onLoad(option, (children) => this.resolveLoad(option, children), () => this.rejectLoad())
          }
        }
-        console.log('here')
-        // if (!this.multiple && !this.lazy) {
-        //   this.handleCascaderOptionCheck(option.id)
-        // }
-        // if (this.multiple && !this.lazy && option.isLeaf) {
-        //   this.handleCascaderOptionCheck(option.id)
-        // }
+      }
+    },
+    handleOptionClick (e, option) {
+      if (this.expandTriggeredByClick && !option.disabled) {
+        this.updateActiveId(option.id)
+        this.updateTrackId(option.id)
+        if (option.isLeaf) {
+          this.handleCascaderOptionCheck(option.id)
+        }
      }
    },
    handleMenuTypeChange (typeisSelect) {
@ -425,7 +439,7 @@ export default {
    deep () {
      if (this.trackId) {
        const option = this.idOptionMap.get(this.trackId)
-        console.log('currentOption', option)
+        // console.log('currentOption', option)
        if (option && option.firstAvailableChildId) {
          this.updateTrackId(option.firstAvailableChildId)
          this.updateActiveId(option.firstAvailableChildId)
--- a/packages/common/Cascader/src/CascaderOption.vue
+++ b/packages/common/Cascader/src/CascaderOption.vue
@ -32,7 +32,7 @@
        :disabled="disabled"
        :value="true"
        :private-value="checked"
-        @click="handleOptionCheck"
+        @click.stop="handleOptionCheck"
      />
    </div>
    <div
@ -42,7 +42,7 @@
      <n-checkbox
        :disabled="disabled"
        :value="checked"
-        @click="handleOptionCheck"
+        @click.stop="handleOptionCheck"
      />
    </div>
    <span
@ -142,7 +142,7 @@ export default {
      type: Boolean,
      default: false
    },
-    menuIsLoading: {
+    loading: {
      type: Boolean,
      default: false
    },
@ -164,11 +164,6 @@ export default {
      required: true
    }
  },
-  data () {
-    return {
-      loading: false
-    }
-  },
  computed: {
    option () {
      return {
@ -197,13 +192,13 @@ export default {
  },
  methods: {
    handleClick (e) {
-      this.$emit('click', e, this.option, this.setLoading)
+      this.$emit('click', e, this.option)
    },
    handleMouseEnter (e) {
-      this.$emit('mouseenter', e, this.option, this.setLoading)
+      this.$emit('mouseenter', e, this.option)
    },
    handleMouseLeave (e) {
-      this.$emit('mouseleave', e, this.option, this.setLoading)
+      this.$emit('mouseleave', e, this.option)
    },
    handleOptionCheck (e) {
      this.$emit('check', this.option)
--- a/packages/common/Cascader/src/CascaderSubmenu.vue
+++ b/packages/common/Cascader/src/CascaderSubmenu.vue
@ -41,7 +41,7 @@
        :has-checked-leaf="option.hasCheckedLeaf"
        :loaded="option.loaded"
        :determined="option.determined"
-        :menu-is-loading="menuIsLoading"
+        :loading="option.loading"
        @check="handleOptionCheck"
        @click="handleOptionClick"
        @mouseenter="handleOptionMouseEnter"
@ -92,8 +92,8 @@ export default {
    handleOptionMouseLeave (e, option) {
      this.$emit('option-mouseleave', e, option)
    },
-    handleOptionClick (e, option, setLoading) {
-      this.$emit('option-click', e, option, setLoading)
+    handleOptionClick (e, option) {
+      this.$emit('option-click', e, option)
    },
    handleMouseLeave (e) {
      this.hideLightBar()
--- a/packages/utils/data/menuModel.js
+++ b/packages/utils/data/menuModel.js
@ -15,7 +15,7 @@ function isLeaf (option) {
  return true
 }

-function processedOption (option, activeIds, trackId) {
+function processedOption (option, activeIds, trackId, loadingId) {
  return {
    ...option,
    active: activeIds.has(option.id),
@ -24,7 +24,8 @@ function processedOption (option, activeIds, trackId) {
    checkboxIndeterminate: checkboxIndeterminate(option),
    isLeaf: isLeaf(option),
    tracked: tracked(option, trackId),
-    determined: !Number.isNaN(option.leafCount)
+    determined: !Number.isNaN(option.leafCount),
+    loading: option.id === loadingId
  }
 }

@ -315,16 +316,17 @@ function optionPath (options, optionId) {
  return path
 }

-function menuModel (options, activeId, trackId) {
+function menuModel (options, activeId, trackId, loadingId) {
+  // console.log('menuModel params', options, activeId, trackId, loadingId)
  const activeOptionPath = optionPath(options, activeId)
  const activeIds = new Set(activeOptionPath.map(option => option.id))
  const firstSubmenu = options[0].children
  // console.log('firstSubmenu', firstSubmenu)
-  console.log('menuModel', options, activeId, trackId, activeOptionPath)
+  // console.log('menuModel', options, activeId, trackId, activeOptionPath)
  const model = []
  if (firstSubmenu !== null) {
    model.push(firstSubmenu.map(option => {
-      return processedOption(option, activeIds, trackId)
+      return processedOption(option, activeIds, trackId, loadingId)
    }))
  } else {
    model.push([])
@ -336,11 +338,11 @@ function menuModel (options, activeId, trackId) {
    if (option.depth === 0) continue
    if (hasChildren(option)) {
      model.push(option.children.map(option => {
-        return processedOption(option, activeIds, trackId)
+        return processedOption(option, activeIds, trackId, loadingId)
      }))
    }
  }
-  console.log('menuModel model', model)
+  // console.log('menuModel model', model)
  return model
 }

--- a/think.md
+++ b/think.md
@ -32,6 +32,8 @@ activator 外面不应该包元素
 检查内存泄露可能性
 考虑级联异步api
 placement $refs 变化更改
+## 2018.8.28
+picker 在 input 聚焦的时候，esc 按钮不符合预期
 ## TODO
 issue fix, add delay prop
 add trigger to tooltip