@neatui/vue 5.5.2 → 5.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.5.2",
+  "version": "5.6.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^5.5.2",
+    "@neatui/css": "^5.6.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/src/components/basic/IFollowView.vue

@@ -16,14 +16,23 @@
         @mouseout="tipHover(0)"
         @click="clickhide"
       >
-        <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
-          <div ui-hide=">mob" class="mob-follow-tips w-full nx-sl nt-sl nb-ss" ui-flex="row xm">
+        <div
+          ref="box"
+          :ui-tips-box="state.pos"
+          :class="tipBoxClass"
+          :style="tipBoxStyle"
+          @touchstart="onSheetTouchStart"
+          @touchmove="onSheetTouchMove"
+          @touchend="onSheetTouchEnd"
+          @touchcancel="onSheetTouchCancel"
+        >
+          <div ui-hide=">mob" :class="`mob-follow-tips w-full nx-sl nt-sl ${closable ? 'nb-ss' : 'nb-sl'}`" ui-flex="row xm">
             <div class="w-xs*s"></div>
             <div>
               <h5 class="bold">{{ title }}</h5>
             </div>
             <div class="w-xs*s" ui-flex="row rm">
-              <button ui-btn="@a none s :square" @click="toggle">
+              <button v-if="closable" ui-btn="@a none s :square" aria-label="关闭" @click="toggle">
                 <i ui-icon="close"></i>
               </button>
             </div>
@@ -41,6 +50,12 @@
   // hover：Teleport 内容的鼠标进出不会冒泡到祖先，需要逐级通知。
   type FollowContext = { children: Set<FollowBoundary>; hover: (on: boolean) => void };
   const followContextKey = Symbol('follow-context');
+  // 按打开顺序记录已打开的浮层，Esc 只由最后打开的一层处理。
+  const openStack: FollowBoundary[] = [];
+  const removeOpen = (item: FollowBoundary) => {
+    const idx = openStack.indexOf(item);
+    if (idx > -1) openStack.splice(idx, 1);
+  };
 </script>
 <script setup lang="ts">
   import { reactive, ref, onMounted, onUnmounted, watch, inject, provide } from 'vue';
@@ -66,6 +81,8 @@
     dragTipHide?: boolean;
     mobile?: boolean;
     title?: string;
+    /** 移动端底部面板标题栏是否显示关闭按钮。 */
+    closable?: boolean;
     zIndex?: string | number | null;
     /** 桌面端是否放入浏览器 top layer（Popover API），盖住整页任意层级；移动端底部面板始终放入。 */
     topLayer?: boolean;
@@ -88,6 +105,7 @@
     dragTipHide: undefined,
     mobile: true,
     title: '',
+    closable: false,
     zIndex: undefined,
     topLayer: true,
   });
@@ -162,8 +180,13 @@
     () => state.show,
     (show) => {
       if (show) {
+        removeOpen(containsFollow);
+        openStack.push(containsFollow);
         emits('onshow');
       } else {
+        removeOpen(containsFollow);
+        // 拖动中被其他途径关闭时，清理拖动残留的内联样式。
+        if (sheetDrag) endSheetDrag(false);
         children.forEach(item => item.hide());
         emits('onhide');
       }
@@ -359,6 +382,156 @@
   };
   const onTouchCancel = () => { outsideTouch = null; };
 
+  // 底部面板下滑关闭（对齐 iOS/Android 原生嵌套滚动）：
+  // 标题栏随时可拖；内容区在手指下所有可滚动祖先都位于顶部时，向下拖动由面板接管；
+  // 同一手势中内容先滚回顶部、继续下拉也会接力为拖动；拖回原位后交还内容滚动。
+  const DRAG_SLOP = 4;
+  const SHEET_MASK_ALPHA = 0.5; // 与样式中暗层透明度一致
+  const VELOCITY_WINDOW = 100; // ms
+  type SheetDrag = {
+    id: number;
+    x: number;
+    y: number;
+    lastY: number;
+    anchor: number;
+    offset: number;
+    mode: 'pending' | 'drag' | 'scroll' | 'none';
+    scrollers: HTMLElement[];
+    samples: { y: number; t: number }[];
+  };
+  let sheetDrag: SheetDrag | null = null;
+  const isScrollableY = (el: HTMLElement) => /(auto|scroll|overlay)/.test(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight + 1;
+  const scrollersOf = (target: EventTarget | null) => {
+    const list: HTMLElement[] = [];
+    for (let el = target instanceof Element ? target : null; el && el !== box.value; el = el.parentElement) {
+      if (el instanceof HTMLElement && isScrollableY(el)) list.push(el);
+    }
+    return list;
+  };
+  // 留 3px 容差：惯性回弹或小数像素未完全归零时也视为顶部，被遮住的内容可忽略。
+  const TOP_TOLERANCE = 3;
+  const atTop = (d: SheetDrag) => d.scrollers.every(el => el.scrollTop < TOP_TOLERANCE);
+  const setSheetOffset = (offset: number | null) => {
+    const panel: HTMLElement | null = box.value;
+    const mask: HTMLElement | null = tip.value;
+    if (!panel || !mask) return;
+    if (offset === null) {
+      // 移除内联样式，交还 CSS 过渡：从当前位置动画到打开或关闭状态。
+      panel.style.removeProperty('transform');
+      panel.style.removeProperty('transition');
+      mask.style.removeProperty('background-color');
+      mask.style.removeProperty('transition');
+      return;
+    }
+    const height = panel.offsetHeight || 1;
+    panel.style.setProperty('transition', 'none', 'important');
+    panel.style.setProperty('transform', `translate3d(0, ${offset}px, 0)`, 'important');
+    mask.style.setProperty('transition', 'none', 'important');
+    mask.style.setProperty('background-color', `rgba(0, 0, 0, ${SHEET_MASK_ALPHA * Math.max(0, 1 - offset / height)})`, 'important');
+  };
+  const findTouch = (list: TouchList, id: number) => [...list].find(item => item.identifier === id);
+  const endSheetDrag = (dismiss: boolean) => {
+    sheetDrag = null;
+    setSheetOffset(null);
+    if (dismiss) dismissOutside();
+  };
+  const onSheetTouchStart = (event: TouchEvent) => {
+    // 拖动中有新手指落下：放弃本次拖动并回弹，不开始新的拖动；
+    // 单指时视为上一手势的结束事件丢失，清理后正常开始。
+    if (sheetDrag) {
+      endSheetDrag(false);
+      if (event.touches.length > 1) return;
+    }
+    const touch = event.touches[0];
+    if (!state.show || !isSheet() || event.touches.length !== 1 || !touch) return;
+    // 滑块等自身需要拖动的控件不参与。
+    if (event.target instanceof Element && event.target.closest('input[type="range"], [ui-sheet-nodrag]')) return;
+    sheetDrag = {
+      id: touch.identifier,
+      x: touch.clientX,
+      y: touch.clientY,
+      lastY: touch.clientY,
+      anchor: touch.clientY,
+      offset: 0,
+      mode: 'pending',
+      scrollers: scrollersOf(event.target),
+      samples: [{ y: touch.clientY, t: event.timeStamp }],
+    };
+  };
+  const onSheetTouchMove = (event: TouchEvent) => {
+    const d = sheetDrag;
+    if (!d) return;
+    const touch = findTouch(event.touches, d.id);
+    if (!touch || event.touches.length !== 1) {
+      // 多指介入：放弃本次拖动并回弹。
+      if (d.mode === 'drag') endSheetDrag(false);
+      sheetDrag = null;
+      return;
+    }
+    const y = touch.clientY;
+    if (d.mode === 'pending') {
+      const dx = touch.clientX - d.x;
+      const dy = y - d.y;
+      if (Math.abs(dx) < DRAG_SLOP && Math.abs(dy) < DRAG_SLOP) return;
+      if (Math.abs(dx) > Math.abs(dy)) d.mode = 'none';
+      else if (dy > 0 && atTop(d)) d.mode = 'drag';
+      else d.mode = 'scroll';
+      d.anchor = y;
+    } else if (d.mode === 'scroll' && y > d.lastY && atTop(d)) {
+      // 内容已滚到顶部仍在下拉：接力为拖动面板。
+      d.mode = 'drag';
+      d.anchor = y;
+    }
+    d.lastY = y;
+    if (d.mode !== 'drag') return;
+    if (event.cancelable) event.preventDefault();
+    const offset = y - d.anchor;
+    // 接管瞬间锚点即当前位置（offset 为 0），只有真正推过原位才交还。
+    if (offset < 0 && d.scrollers.length) {
+      // 拖回原位且继续上推：交还内容滚动。
+      d.offset = 0;
+      setSheetOffset(null);
+      d.mode = 'scroll';
+      return;
+    }
+    d.offset = Math.max(0, offset);
+    setSheetOffset(d.offset);
+    d.samples.push({ y, t: event.timeStamp });
+    while (d.samples.length > 2 && event.timeStamp - d.samples[0]!.t > VELOCITY_WINDOW) d.samples.shift();
+  };
+  const onSheetTouchEnd = (event: TouchEvent) => {
+    const d = sheetDrag;
+    if (!d || !findTouch(event.changedTouches, d.id)) return;
+    sheetDrag = null;
+    if (d.mode !== 'drag' || d.offset <= 0) {
+      setSheetOffset(null);
+      return;
+    }
+    const first = d.samples[0]!;
+    const last = d.samples[d.samples.length - 1]!;
+    const elapsed = event.timeStamp - last.t > VELOCITY_WINDOW ? Infinity : last.t - first.t;
+    const velocity = elapsed > 0 && elapsed !== Infinity ? (last.y - first.y) / elapsed : 0; // px/ms，向下为正
+    const height = box.value?.offsetHeight || 1;
+    // 按速度投射落点（快速下甩即关闭），明显上推时回弹。
+    const projected = d.offset + velocity * 200;
+    endSheetDrag(velocity > -0.2 && (projected > height / 2 || velocity > 0.6));
+  };
+
+  // 系统中断手势（来电、手势被接管等）：只回弹，不做关闭判定。
+  const onSheetTouchCancel = (event: TouchEvent) => {
+    const d = sheetDrag;
+    if (!d || !findTouch(event.changedTouches, d.id)) return;
+    endSheetDrag(false);
+  };
+
+  // Esc 关闭最后打开的浮层；捕获阶段先于 Layer 的 Esc 处理，并以 preventDefault 阻止其关闭外层弹窗。
+  const onKeydown = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing || !state.show) return;
+    if (openStack[openStack.length - 1] !== containsFollow) return;
+    event.preventDefault();
+    dismissOutside();
+  };
+
   const ensureTeleportTarget = () => {
     let area = document.querySelector('#ifollow');
     if (!area) {
@@ -370,6 +543,8 @@
   };
 
   onMounted(() => {
+    // 初始即显示（modelValue=1）时 show 监听不会触发，补登记打开顺序。
+    if (state.show && !openStack.includes(containsFollow)) openStack.push(containsFollow);
     ensureTeleportTarget();
     document.addEventListener('pointerdown', onPressStart, true);
     document.addEventListener('pointerup', onPressEnd, true);
@@ -380,6 +555,7 @@
     document.addEventListener('touchmove', onTouchMove, { passive: false });
     document.addEventListener('touchend', onTouchEnd, { passive: false });
     document.addEventListener('touchcancel', onTouchCancel);
+    document.addEventListener('keydown', onKeydown, true);
   });
 
   const ex: any = ref(null);
@@ -433,6 +609,9 @@
     document.removeEventListener('touchmove', onTouchMove);
     document.removeEventListener('touchend', onTouchEnd);
     document.removeEventListener('touchcancel', onTouchCancel);
+    document.removeEventListener('keydown', onKeydown, true);
+    sheetDrag = null;
+    removeOpen(containsFollow);
     parentChildren?.delete(containsFollow);
     releaseSheet();
     outsideTouch = null;
@@ -542,6 +721,12 @@
         [ui-tips-arrow] {
           display: none;
         }
+
+        // 内容滚到顶部后的继续下拉交给面板拖动，禁止滚动链与回弹抢手势。
+        &,
+        * {
+          overscroll-behavior-y: none;
+        }
       }
     }
 

package/src/components/form/Cascader.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''" class="mc-cascader">
-    <IFollowView :ui-tips="uiTips"
+    <IFollowView :ui-tips="uiTips" :closable="closable"
       ref="ifollow"
       :tipBoxStyle="`${state.flatOpts.length && state.flatOpts[0]?.length > 0 ? 'min-width: 10em;' : 'min-width: 100%'}`"
       pos="bl"
@@ -96,6 +96,7 @@
   const props = defineProps({
     theme: { type: String, default: '@a' },
     uiTips: { type: String, default: '@a' },
+    closable: { type: Boolean, default: false },
     sz: { type: String, default: 'm' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },

package/src/components/form/DatePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" ui-tips="@a co:well" :ui-tips-view="state.show">
-    <IFollowView :ui-tips="uiTips" ref="ifollow">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, maxlength, minlength, disabled, readonly, clearable, verify, prefix, suffix, interacted }"
         :clearable="false"
@@ -47,6 +47,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -78,6 +79,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/DateRangePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" ui-tips="@a co:well" :ui-tips-view="state.show">
-    <IFollowView :ui-tips="uiTips" ref="ifollow">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow">
       <InputRange
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, maxlength, minlength, disabled, readonly, clearable, verify, prefix, suffix, interacted }"
         :clearable="false"
@@ -40,6 +40,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -71,6 +72,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/DateView.vue

@@ -173,8 +173,8 @@
         <div>&nbsp;</div>
       </div>
       <div class="ml-ss-sub" ui-flex="row rm">
-        <button v-if="state.panel" ui-btn="@a xs none" class="nx-ss co-risk" @click="remove">清除</button>
-        <button v-if="state.panel && !state.isNoTime" ui-btn="@a xs none" class="nx-ss co-main" @click="update">确定</button>
+        <button v-if="state.panel" ui-btn="@a s none" class="nx-ss mob:nx-ms co-risk" @click="remove">清除</button>
+        <button v-if="state.panel && !state.isNoTime" ui-btn="@a s none" class="nx-ss mob:nx-ms co-main" @click="update">确定</button>
       </div>
     </div>
   </div>

package/src/components/form/MoreSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
       <slot>
         <Input
           v-bind="{ placeholder, rules, theme, sz, co, block, ready: true, type: 'text', tips, disabled, readonly, clearable: false, verify, prefix, suffix, interacted }"
@@ -108,6 +108,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -137,6 +138,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/MoreSelectTree.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : 'hide'">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type: 'text', tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
         :modelValue="state.label"
@@ -103,6 +103,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -133,6 +134,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/PageMoreSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`" :ui-form-open="state.show ? 'show' : ''" ref="dom">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
       <slot>
         <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd">
           <template #suffix><i ui-form-select=""></i></template>
@@ -61,6 +61,7 @@
   const props: any = defineProps({
     theme: { type: String, default: '@a' },
     uiTips: { type: String, default: '@a' },
+    closable: { type: Boolean, default: false },
     sz: { type: String, default: '' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },

package/src/components/form/PageSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''" ref="dom">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%">
       <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd.label" :interacted="interacted">
         <template #suffix><i ui-form-select=""></i></template>
       </Input>
@@ -56,6 +56,7 @@
     },
     theme: { type: String, default: '@a' },
     uiTips: { type: String, default: '@a' },
+    closable: { type: Boolean, default: false },
     sz: { type: String as PropType<'' | 'xs' | 's' | 'm' | 'l' | 'xl'>, default: 'm' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },

package/src/components/form/SearchMoreSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input v-bind="$props" :clearable="false" readonly v-model="state.selectd" @click="toggle" :interacted="interacted">
         <template #suffix><i ui-form-select=""></i></template>
       </Input>
@@ -60,6 +60,7 @@
     },
     theme: { type: String, default: '@a' },
     uiTips: { type: String, default: '@a' },
+    closable: { type: Boolean, default: false },
     sz: { type: String as PropType<'' | 'xs' | 's' | 'm' | 'l' | 'xl'>, default: 'm' },
     co: { type: String, default: '' },
     block: { type: Boolean, default: true },

package/src/components/form/SearchSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
         v-model="state.selectd.label"
@@ -101,6 +101,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -133,6 +134,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,

package/src/components/form/Select.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : ''">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
         v-model="state.displayLabel"
@@ -132,6 +132,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -167,6 +168,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: 'm',
     co: '',
     block: true,

package/src/components/form/SelectTree/SelectTree.vue

@@ -1,6 +1,6 @@
 <template>
   <div :ui-form="`${theme} type:select sz:${sz}`" :ui-form-open="state.show ? 'show' : 'hide'">
-    <IFollowView :ui-tips="uiTips" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
+    <IFollowView :ui-tips="uiTips" :closable="closable" ref="ifollow" v-model="state.show" tipBoxClass="ny-sm nx-ss" tipBoxStyle="min-width: 100%" @onshow="onshow" @onhide="onhide">
       <Input
         v-bind="{ placeholder, rules, theme, sz, co, block, ready, type, tips, disabled, readonly: true, clearable: false, verify, prefix, suffix, interacted }"
         v-model="state.label"
@@ -97,6 +97,7 @@
     rules?: Array<object>;
     theme?: string;
     uiTips?: string;
+    closable?: boolean;
     sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
     co?: string;
     block?: boolean;
@@ -132,6 +133,7 @@
     rules: () => [],
     theme: '@a',
     uiTips: '@a',
+    closable: false,
     sz: '',
     co: '',
     block: true,