@opentiny/vue-renderless 3.13.1 → 3.14.0

package/cascader/index.js

@@ -50,12 +50,27 @@ const watchValue = ({ api, state }) => (value) => {
     setTimeout(api.computePresentContent);
   }
 };
-const watchCheckedValue = ({ api, emit, state }) => (value) => {
+const watchCheckedValue = ({
+  nextTick,
+  constants,
+  dispatch,
+  api,
+  emit,
+  state
+}) => (value) => {
+  state.presentText = state.presentTags.length ? "" : null;
   const { checkStrictly, multiple } = state.config;
-  api.computePresentContent();
+  nextTick(() => {
+    api.computePresentContent();
+  });
   if (!multiple && !checkStrictly && state.dropDownVisible) {
     api.toggleDropDownVisible(false);
   }
+  nextTick(() => {
+    dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormChange, [
+      state.multiple ? state.presentText : state.inputValue
+    ]);
+  });
   emit("update:modelValue", value);
   emit("change", value);
   setTimeout(api.updateStyle);
@@ -85,10 +100,16 @@ const isEmpty = (val) => {
   }
   return false;
 };
-const selfMounted = ({ api, parent, props, refs, state }) => () => {
-  const { input } = refs;
+const selfMounted = ({
+  api,
+  parent,
+  props,
+  vm,
+  state
+}) => () => {
+  const { input } = vm.$refs;
   const inputSizeMap = { medium: 36, small: 32, mini: 28 };
-  input && (input.$parent.popperElm = refs.popper);
+  input && (input.$parent.popperElm = vm.$refs.popper);
   if (input && input.$el) {
     state.inputInitialHeight = input.$el.offsetHeight || inputSizeMap[state.realSize] || 30;
   }
@@ -111,11 +132,16 @@ const selfMounted = ({ api, parent, props, refs, state }) => () => {
   });
   addResizeListener(parent.$el, api.updateStyle);
 };
-const toggleDropDownVisible = ({ emit, nextTick, refs, state, updatePopper }) => (visible) => {
+const toggleDropDownVisible = ({
+  emit,
+  vm,
+  state,
+  updatePopper
+}) => (visible) => {
   if (state.isDisabled) {
     return;
   }
-  const { input } = refs;
+  const { input } = vm.$refs;
   visible = !isNull(visible) ? visible : !state.dropDownVisible;
   if (visible !== state.dropDownVisible) {
     state.dropDownVisible = visible;
@@ -152,21 +178,18 @@ const handleKeyDown = ({ api }) => (event) => {
 const handleFocus = (emit) => (e) => {
   emit("focus", e);
 };
-const handleBlur = ({ constants, dispatch, emit, state, api, props }) => (e) => {
+const handleBlur = ({ emit, api, props }) => (e) => {
   if (props.filterable) {
     api.computePresentContent();
   }
-  dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormBlur, [
-    state.multiple ? state.presentText : state.inputValue
-  ]);
   emit("blur", e);
 };
-const handleInput = ({ api, state, refs }) => (val, event) => {
+const handleInput = ({ api, state, vm }) => (val, event) => {
   event = event || window.event;
   if (!event) {
     return;
   }
-  const reference = refs.reference;
+  const reference = vm.$refs.reference;
   const key = "init-flag";
   const value = "true";
   const isIE = browser.name === "ie";
@@ -185,7 +208,7 @@ const handleInput = ({ api, state, refs }) => (val, event) => {
     state.filtering = false;
   }
 };
-const handleClear = (state) => () => {
+const handleClear = (state) => (_event) => {
   state.presentText = "";
   state.panel.clearCheckedNodes();
 };
@@ -194,13 +217,13 @@ const handleExpandChange = ({ constants, dispatch, emit, nextTick, state, update
     dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormBlur, [
       state.multiple ? state.presentText : state.inputValue
     ]);
-    updatePopper(state.panel.$parent);
+    updatePopper(state.panel.$parent.$el);
   });
   emit("expand-change", value);
   emit("active-item-change", value);
 };
-const focusFirstNode = ({ refs, state }) => () => {
-  const { popper, suggestionPanel } = refs;
+const focusFirstNode = ({ vm, state }) => () => {
+  const { popper, suggestionPanel } = vm.$refs;
   let firstNode = null;
   if (state.filtering && suggestionPanel) {
     firstNode = suggestionPanel.$el.querySelector(CASCADER.SugItem);
@@ -246,13 +269,19 @@ const computePresentTags = ({ api, props, state }) => () => {
   }
   state.checkedNodes = checkedNodes;
   state.presentTags = tags;
+  state.inputValue = null;
+  state.presentText = null;
   if (props.hoverExpand) {
     api.calcCollapseTags();
   }
 };
-const calcCollapseTags = ({ state, refs, nextTick }) => () => {
+const calcCollapseTags = ({
+  state,
+  vm,
+  nextTick
+}) => () => {
   nextTick(() => {
-    const content = refs["tags-content"];
+    const content = vm.$refs["tags-content"];
     if (state.inputHover || state.dropDownVisible) {
       return state.isHidden = true;
     }
@@ -292,17 +321,17 @@ const calcCollapseTags = ({ state, refs, nextTick }) => () => {
     }
   });
 };
-const watchInputHover = ({ refs }) => (newVal) => {
+const watchInputHover = ({ vm }) => (newVal) => {
   const [inputHover, dropDownVisible] = newVal;
   if (!inputHover && !dropDownVisible) {
-    const content = refs["tags-content"];
+    const content = vm.$refs["tags-content"];
     content && content.scrollTo({ top: 0, left: 0 });
   }
 };
-const handleMouseenter = ({ refs, state }) => ($event) => {
+const handleMouseenter = ({ vm, state }) => ($event) => {
   const dom = $event.target;
   const textNode = dom && dom.querySelector("span");
-  const { tooltip } = refs;
+  const { tooltip } = vm.$refs;
   if (textNode && tooltip && textNode.scrollWidth > textNode.offsetWidth) {
     const text = textNode.textContent;
     tooltip.state.referenceElm = dom;
@@ -314,7 +343,12 @@ const handleMouseenter = ({ refs, state }) => ($event) => {
   }
 };
 const handleMouseleave = ({ state }) => () => state.tooltipVisible = false;
-const getSuggestions = ({ nextTick, props, state, updatePopper }) => () => {
+const getSuggestions = ({
+  nextTick,
+  props,
+  state,
+  updatePopper
+}) => () => {
   let filterMethod = null;
   if (!(props.filterMethod && typeof props.filterMethod === "function")) {
     filterMethod = (node, keyword) => ~node.text.indexOf(keyword);
@@ -325,8 +359,9 @@ const getSuggestions = ({ nextTick, props, state, updatePopper }) => () => {
     if (node.isDisabled) {
       return false;
     }
+    ;
     node.text = node.getText(props.showAllLevels, props.separator) || "";
-    return filterMethod(node, state.inputValue);
+    return filterMethod == null ? void 0 : filterMethod(node, state.inputValue);
   });
   if (state.multiple) {
     state.presentTags.forEach((tag) => {
@@ -385,14 +420,19 @@ const handleSuggestionClick = ({ api, state }) => (index) => {
     api.toggleDropDownVisible(false);
   }
 };
-const deleteTag = ({ emit, state }) => (index) => {
+const deleteTag = ({
+  emit,
+  state,
+  api
+}) => (index) => {
   const val = state.checkedValue[index];
   state.checkedValue = state.checkedValue.filter((n, i) => i !== index);
+  api.handleMouseleave();
   emit("remove-tag", val);
 };
-const updateStyle = ({ parent, refs, state, updatePopper, nextTick, props }) => () => {
+const updateStyle = ({ parent, vm, state, updatePopper, nextTick, props }) => () => {
   const $el = parent.$el;
-  const { suggestionPanel } = refs;
+  const { suggestionPanel } = vm.$refs;
   const inputInner = $el.querySelector(CASCADER.InputClass);
   if (!inputInner) {
     return;
@@ -416,21 +456,28 @@ const updateStyle = ({ parent, refs, state, updatePopper, nextTick, props }) =>
     updatePopper();
   } else {
     nextTick(() => {
-      if (state.displayOnly) {
+      if (state.multiple && state.isDisplayOnly) {
         inputInner.style.height = "auto";
       }
     });
   }
 };
 const getCheckedNodes = (state) => (leafOnly) => state.panel.getCheckedNodes(leafOnly, state.checkedValue);
-const setInputHeightToTag = ({ nextTick, parent, state }) => () => {
+const setInputHeightToTag = ({
+  nextTick,
+  parent,
+  state
+}) => () => {
   nextTick(() => {
+    var _a;
     const parentEl = parent.$el;
-    const height = parentEl.querySelector(CASCADER.TagClass).offsetHeight + 6 + "px";
+    const height = ((_a = parentEl == null ? void 0 : parentEl.querySelector(CASCADER.TagClass)) == null ? void 0 : _a.offsetHeight) + 6 + "px";
     if (!state.isDisplayOnly) {
-      parentEl.querySelector(CASCADER.InputClass).style.height = height;
+      const inputDom = parentEl == null ? void 0 : parentEl.querySelector(CASCADER.InputClass);
+      inputDom && (inputDom.style.height = height);
     } else {
-      parentEl.querySelector(CASCADER.InputClass).style.height = "auto";
+      const inputDom = parentEl == null ? void 0 : parentEl.querySelector(CASCADER.InputClass);
+      inputDom && (inputDom.style.height = "auto");
     }
   });
 };
@@ -450,7 +497,12 @@ const handleBeforeUpdate = ({ props, api, state }) => () => {
     api.computePresentContent();
   }
 };
-const showPlaceholder = ({ props, state, t, constants }) => () => {
+const showPlaceholder = ({
+  props,
+  state,
+  t,
+  constants
+}) => () => {
   let placeholder = null;
   placeholder = state.multiple && state.presentTags.length || state.present ? "" : props.placeholder || t(constants.placeholder);
   return placeholder;

package/cascader/vue.js

@@ -58,7 +58,17 @@ const api = [
   "handleMouseenter",
   "handleMouseleave"
 ];
-const initState = ({ reactive, props, computed, parent, api: api2, t, constants, refs, inject }) => {
+const initState = ({
+  reactive,
+  props,
+  computed,
+  parent,
+  api: api2,
+  t,
+  constants,
+  vm,
+  inject
+}) => {
   const state = reactive({
     showAutoWidth: inject("showAutoWidth", null),
     /** popper 元素是否显示。 它是通过v-show 绑定到页面上，造成隐藏时，popperJs并没有destory,有一定的性能影响 */
@@ -85,7 +95,7 @@ const initState = ({ reactive, props, computed, parent, api: api2, t, constants,
     leafOnly: computed(() => !state.config.checkStrictly),
     readonly: computed(() => !props.filterable || state.multiple),
     clearBtnVisible: computed(() => api2.computClearVisible()),
-    panel: computed(() => refs.panel),
+    panel: computed(() => vm.$refs.panel),
     placeholder: computed(() => props.placeholder || t(constants.placeholder)),
     inputValues: computed(() => state.multiple ? state.presentText : state.inputValue),
     collapseTagsLength: 0,
@@ -95,18 +105,30 @@ const initState = ({ reactive, props, computed, parent, api: api2, t, constants,
   });
   return state;
 };
-const initApi = ({ api: api2, state, constants, dispatch, emit, refs, props, updatePopper, nextTick, parent, t }) => {
+const initApi = ({
+  api: api2,
+  state,
+  constants,
+  dispatch,
+  emit,
+  vm,
+  props,
+  updatePopper,
+  nextTick,
+  parent,
+  t
+}) => {
   Object.assign(api2, {
     state,
     handleFocus: handleFocus(emit),
     handleClear: handleClear(state),
     getCheckedNodes: getCheckedNodes(state),
-    deleteTag: deleteTag({ emit, state }),
+    deleteTag: deleteTag({ emit, state, api: api2 }),
     handleDropdownLeave: handleDropdownLeave(state),
-    focusFirstNode: focusFirstNode({ refs, state }),
+    focusFirstNode: focusFirstNode({ vm, state }),
     computClearVisible: computClearVisible({ props, state }),
     showPlaceholder: showPlaceholder({ props, state, t, constants }),
-    updateStyle: updateStyle({ parent, refs, state, updatePopper, nextTick, props }),
+    updateStyle: updateStyle({ parent, vm, state, updatePopper, nextTick, props }),
     getSuggestions: getSuggestions({ nextTick, props, state, updatePopper }),
     handleExpandChange: handleExpandChange({ constants, emit, dispatch, nextTick, state, updatePopper }),
     getConfig: getConfig({ parent, props }),
@@ -115,23 +137,30 @@ const initApi = ({ api: api2, state, constants, dispatch, emit, refs, props, upd
     handleDelete: handleDelete({ api: api2, state }),
     computePresentText: computePresentText({ props, state }),
     handleSuggestionKeyDown: handleSuggestionKeyDown({ api: api2 }),
-    handleInput: handleInput({ api: api2, state, refs }),
+    handleInput: handleInput({ api: api2, state, vm }),
     handleKeyDown: handleKeyDown({ api: api2 }),
     watchValue: watchValue({ api: api2, state }),
     computePresentTags: computePresentTags({ api: api2, props, state }),
     computePresentContent: computePresentContent({ api: api2, state }),
-    watchCheckedValue: watchCheckedValue({ api: api2, emit, state }),
-    toggleDropDownVisible: toggleDropDownVisible({ emit, nextTick, refs, state, updatePopper }),
-    selfMounted: selfMounted({ api: api2, parent, props, refs, state }),
+    watchCheckedValue: watchCheckedValue({ constants, dispatch, api: api2, nextTick, emit, state }),
+    toggleDropDownVisible: toggleDropDownVisible({ emit, vm, state, updatePopper }),
+    selfMounted: selfMounted({ api: api2, parent, props, vm, state }),
     handleBeforeUpdate: handleBeforeUpdate({ props, api: api2, state }),
-    handleBlur: handleBlur({ constants, dispatch, emit, state, api: api2, props }),
-    calcCollapseTags: calcCollapseTags({ refs, state, nextTick }),
-    watchInputHover: watchInputHover({ refs }),
-    handleMouseenter: handleMouseenter({ refs, state }),
+    handleBlur: handleBlur({ emit, api: api2, props }),
+    calcCollapseTags: calcCollapseTags({ vm, state, nextTick }),
+    watchInputHover: watchInputHover({ vm }),
+    handleMouseenter: handleMouseenter({ vm, state }),
     handleMouseleave: handleMouseleave({ state })
   });
 };
-const initWatch = ({ watch, state, api: api2, props, nextTick, updatePopper }) => {
+const initWatch = ({
+  watch,
+  state,
+  api: api2,
+  props,
+  nextTick,
+  updatePopper
+}) => {
   watch(() => state.disabled, api2.computePresentContent);
   watch(() => props.modelValue, api2.watchValue);
   watch(() => state.checkedValue, api2.watchCheckedValue);
@@ -165,7 +194,18 @@ const initWatch = ({ watch, state, api: api2, props, nextTick, updatePopper }) =
   );
   watch([() => state.inputHover, () => state.dropDownVisible], api2.watchInputHover);
 };
-const renderless = (props, { computed, onMounted, onBeforeUnmount, onDeactivated, onUpdated, onBeforeUpdate, reactive, toRefs, watch, inject }, { t, refs, emit, nextTick, constants, parent, slots, dispatch }) => {
+const renderless = (props, {
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  onDeactivated,
+  onUpdated,
+  onBeforeUpdate,
+  reactive,
+  toRefs,
+  watch,
+  inject
+}, { t, emit, nextTick, constants, parent, slots, dispatch, vm }) => {
   parent.tinyForm = parent.tinyForm || inject("form", null);
   const { updatePopper } = userPopper({
     reactive,
@@ -174,26 +214,27 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, onDeactivated
     props: __spreadProps(__spreadValues({}, props), {
       placement: DATEPICKER.PlacementMap.left,
       popperOptions: { boundariesPadding: 0, gpuAcceleration: false },
-      visibleArrow: true,
+      visibleArrow: false,
       offset: 0,
       boundariesPadding: 5,
       arrowOffset: 35
     }),
     toRefs,
-    refs,
+    vm,
     slots,
     nextTick,
     onBeforeUnmount,
     onDeactivated
   });
   const api2 = {};
-  const state = initState({ reactive, props, computed, parent, api: api2, t, constants, refs, inject });
-  initApi({ api: api2, state, constants, dispatch, emit, refs, props, updatePopper, nextTick, parent, t });
+  const state = initState({ reactive, props, computed, parent, api: api2, t, constants, vm, inject });
+  initApi({ api: api2, state, constants, dispatch, emit, vm, props, updatePopper, nextTick, parent, t });
   initWatch({ watch, state, api: api2, props, nextTick, updatePopper });
   onBeforeUpdate(api2.handleBeforeUpdate);
   onUpdated(api2.updateStyle);
   onMounted(api2.selfMounted);
   parent.$on("handle-clear", (event) => {
+    ;
     api2.handleClear(event);
   });
   onBeforeUnmount(() => removeResizeListener(parent.$el, api2.updateStyle));

package/cascader-menu/index.js

@@ -3,11 +3,11 @@ const handleExpand = (state) => (e) => state.activeNode = e.target;
 const handleMouseMove = ({
   api,
   parent,
-  refs,
+  vm,
   state,
   svg
 }) => (e) => {
-  const { hoverZone } = refs;
+  const hoverZone = vm.$refs.hoverZone;
   if (!state.activeNode || !hoverZone) {
     return;
   }
@@ -15,9 +15,9 @@ const handleMouseMove = ({
     if (state.hoverTimer) {
       clearTimeout(state.hoverTimer);
     }
-    const { left } = refs.cascaderMenu.$parent.$el.getBoundingClientRect();
+    const { left } = vm.$refs.cascaderMenu.$parent.$el.getBoundingClientRect();
     const startX = e.clientX - left;
-    const { offsetWidth, offsetHeight } = refs.cascaderMenu.$parent.$el;
+    const { offsetWidth, offsetHeight } = vm.$refs.cascaderMenu.$parent.$el;
     const top = state.activeNode.offsetTop;
     const bottom = top + state.activeNode.offsetHeight;
     hoverZone.innerHTML = `
@@ -25,11 +25,11 @@ const handleMouseMove = ({
       ${svg}${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z" />
     `;
   } else if (!state.hoverTimer) {
-    state.hoverTimer = setTimeout(api.clearHoverZone, parent.state.config.hoverThreshold);
+    state.hoverTimer = setTimeout(api.clearHoverZone, parent.$parent.state.config.hoverThreshold);
   }
 };
-const clearHoverZone = (refs) => () => {
-  const { hoverZone } = refs;
+const clearHoverZone = ({ vm }) => () => {
+  const { hoverZone } = vm.$refs.hoverZone;
   if (!hoverZone) {
     return;
   }

package/cascader-menu/vue.js

@@ -4,7 +4,6 @@ import { CASCADER } from "../common";
 import { random } from "../common/string";
 const api = ["state", "handleMouseMove", "handleExpand"];
 const renderless = (props, { computed, reactive }, { vm, parent }) => {
-  const refs = vm.$refs;
   const api2 = {};
   const state = reactive({
     activeNode: null,
@@ -15,9 +14,9 @@ const renderless = (props, { computed, reactive }, { vm, parent }) => {
   });
   Object.assign(api2, {
     state,
-    clearHoverZone: clearHoverZone(refs),
+    clearHoverZone: clearHoverZone({ vm }),
     handleExpand: handleExpand(state),
-    handleMouseMove: handleMouseMove({ api: api2, parent, refs, state, svg: CASCADER.SvgStr })
+    handleMouseMove: handleMouseMove({ api: api2, parent, vm, state, svg: CASCADER.SvgStr })
   });
   return api2;
 };

package/cascader-mobile/index.js

@@ -6,16 +6,13 @@ const close = ({ state, emit }) => () => {
   emit("close", false);
 };
 const syncCheckStatus = ({ state, props, api }) => (value) => {
-  const { valueField, textField, modelValue: propsModelValue, visible } = props;
+  const { valueField, textField, modelValue: propsModelValue } = props;
   const { lazy, isLeaf: leafField } = api.getNodeConfig();
   let currentData;
   let navList = [];
   let modelValue = value || propsModelValue || [];
   let len = modelValue.length;
   let isLeaf;
-  if (!visible) {
-    return;
-  }
   for (let i = 0; i < len; i++) {
     const id = modelValue[i];
     currentData = state.store.getNode(id);
@@ -42,7 +39,6 @@ const watchVisible = ({ emit, state, props, api }) => (visible) => {
   const { modelValue } = props;
   if (visible) {
     api.watchModelValue(modelValue);
-    api.initTreeStore();
   }
   setTimeout(() => {
     state.toggle = visible;
@@ -115,19 +111,35 @@ const loopSearchOption = ({
   textField,
   prefixValue,
   prefixText,
-  textSplit = "/"
+  textSplit = "/",
+  filterMethod,
+  level,
+  checkStrictly
 }) => {
   const list = [];
   options.forEach((item) => {
+    if (item.disabled) {
+      return;
+    }
     const text = item[textField];
     const textNavStr = prefixText ? prefixText + textSplit + text : text;
     const value = [...prefixValue, item[valueField]];
     const children = item[childrenField];
-    if (text.includes(input)) {
-      list.push({
-        [valueField]: value,
-        [textField]: textNavStr
-      });
+    if (checkStrictly === true || !children || children.length === 0) {
+      if (typeof filterMethod === "function") {
+        const matched = filterMethod({ data: item, label: item.label, value: item.value, level }, input);
+        if (matched) {
+          list.push({
+            [valueField]: value,
+            [textField]: textNavStr
+          });
+        }
+      } else if (text.includes(input)) {
+        list.push({
+          [valueField]: value,
+          [textField]: textNavStr
+        });
+      }
     }
     if (children && children.length) {
       const arr = loopSearchOption({
@@ -138,7 +150,10 @@ const loopSearchOption = ({
         textField,
         prefixValue: value,
         prefixText: textNavStr,
-        textSplit
+        textSplit,
+        filterMethod,
+        level: level + 1,
+        checkStrictly
       });
       list.push(...arr);
     }
@@ -160,7 +175,10 @@ const searchMethod = ({ state, props, api }) => () => {
       valueField,
       textField,
       prefixValue: [],
-      prefixText: ""
+      prefixText: "",
+      filterMethod: searchConfig.filterMethod,
+      level: 0,
+      checkStrictly: props.nodeConfig.checkStrictly
     });
   }
   if (typeof list.then === "function") {
@@ -169,12 +187,12 @@ const searchMethod = ({ state, props, api }) => () => {
     state.search.filterOptions = list;
   }
 };
-const searchBoxToggle = ({ state, props, api }) => (bool) => {
+const searchBoxToggle = ({ state, props, api }) => (isShow) => {
   const { searchConfig = {} } = props;
   const { lazy } = api.getNodeConfig();
-  state.search.show = bool;
+  state.search.show = isShow;
   state.search.input = "";
-  if (bool) {
+  if (isShow) {
     state.search.options = !lazy && searchConfig.options && searchConfig.options.length ? searchConfig.options : state.store.getAllData();
     api.searchMethod();
   }
@@ -198,8 +216,7 @@ const created = ({ api }) => () => {
   api.initTreeStore();
 };
 const loadData = ({ props, state }) => (data) => {
-  const { visible } = props;
-  if (!visible) {
+  if (!props.visible) {
     return;
   }
   state.store.setData(data);
@@ -230,7 +247,7 @@ const getNodeConfig = ({ constants, props }) => () => {
   return Object.assign({ nodeKey: valueField }, constants.defaultNodeConfig, nodeConfig);
 };
 const initTreeStore = ({ props, state, api }) => () => {
-  const { data, textField, visible } = props;
+  const { data, textField } = props;
   const {
     nodeKey,
     lazy,
@@ -247,10 +264,6 @@ const initTreeStore = ({ props, state, api }) => () => {
     defaultExpandAll,
     filterNodeMethod
   } = api.getNodeConfig();
-  if (!visible || state.store) {
-    api.syncCheckStatus();
-    return;
-  }
   state.store = new TreeStore({
     key: nodeKey,
     data,

package/cascader-mobile/vue.js

@@ -67,6 +67,11 @@ const renderless = (props, { computed, reactive, watch }, { emit, constants }) =
     computedNavList: computed(() => api2.computedNavListHandler()),
     showButton: computed(() => {
       const len = state.navList.length;
+      if (!props.nodeConfig.checkStrictly) {
+        if (state.level < len - 1) {
+          return false;
+        }
+      }
       return len && (props.nodeConfig.checkStrictly || state.navList[len - 1].isLeaf);
     })
   });
@@ -92,6 +97,7 @@ const renderless = (props, { computed, reactive, watch }, { emit, constants }) =
     isSelected: isSelected({ state, api: api2, props })
   });
   api2.created();
+  api2.syncCheckStatus();
   watch(() => props.visible, api2.watchVisible);
   watch(() => props.modelValue, api2.watchModelValue, { immediate: true, deep: true });
   watch(() => props.data, api2.loadData, { deep: true });

package/cascader-node/index.js

@@ -15,9 +15,11 @@ const handleExpand = ({ api, parent, props, state }) => () => {
       if (!state.isLeaf) {
         api.handleExpand();
       }
-      if (multiple) {
+      if (multiple && state.isLeaf) {
         const checked = state.isLeaf ? props.node.checked : false;
         api.handleMultiCheckChange(Boolean(checked));
+      } else {
+        parent.handleExpand(props.node);
       }
     });
   } else {
@@ -37,10 +39,20 @@ const isInPath = (props) => (pathNodes) => {
   const selectedPathNode = pathNodes[props.node.level - 1] || {};
   return selectedPathNode.uid === props.node.uid;
 };
+const handleNodeClick = ({ state, api }) => () => {
+  if (!state.isDisabled) {
+    if (state.isLeaf) {
+      api.handleCheckChange();
+    } else {
+      api.handleExpand();
+    }
+  }
+};
 export {
   comptCheckPath,
   handleCheckChange,
   handleExpand,
   handleMultiCheckChange,
+  handleNodeClick,
   isInPath
 };