oxy-uni-ui 1.0.1 → 1.2.0

package/components/common/abstracts/variable.scss

@@ -227,7 +227,7 @@ $-calendar-range-color: var(--oxy-calendar-range-color, rgba(#4d80f0, 0.09)) !de
 $-calendar-active-border: var(--oxy-calendar-active-border, 8px) !default;
 $-calendar-info-fs: var(--oxy-calendar-info-fs, 10px) !default;
 $-calendar-item-margin-bottom: var(--oxy-calendar-item-margin-bottom, 4px) !default;
- 
+
 
 /* checkbox */
 $-checkbox-margin: var(--oxy-checkbox-margin, 10px) !default; // 多个复选框距离
@@ -361,7 +361,7 @@ $-textarea-color: var(--oxy-textarea-color, #262626) !default; // 文字颜色
 $-textarea-icon-color: var(--oxy-textarea-icon-color, #bfbfbf) !default; // 图标颜色
 $-textarea-clear-color: var(--oxy-textarea-clear-color, #585858) !default; // 关闭按钮颜色
 $-textarea-count-color: var(--oxy-textarea-count-color, #bfbfbf) !default; // 计数文字颜色
-$-textarea-count-current-color: var(--oxy-textarea-count-current-color, #262626) !default; // 当前长度颜色
+$-textarea-count-current-color: var(--oxy-textarea-count-current-color, $default-theme) !default; // 当前长度颜色
 $-textarea-bg: var(--oxy-textarea-bg, $-color-white) !default; // 默认背景颜色
 $-textarea-cell-border-color: var(--oxy-textarea-cell-border-color, $-color-border-light) !default; // cell 类型边框颜色
 $-textarea-cell-padding: var(--oxy-textarea-cell-padding, 10px) !default; // cell 容器padding
@@ -641,6 +641,36 @@ $-tag-close-size: var(--oxy-tag-close-size, 14px) !default; // 关闭按钮字
 $-tag-close-color: var(--oxy-tag-close-color, $-tag-info-color) !default; // 关闭按钮颜色
 $-tag-close-active-color: var(--oxy-tag-close-active-color, rgba(0, 0, 0, 0.45)) !default; // 关闭按钮 active 颜色
 
+/* corner */
+$-corner-radius: var(--oxy-corner-radius, 12px) !default; // 圆角大小
+$-corner-font-size: var(--oxy-corner-fs, $-fs-secondary) !default; // 字号
+$-corner-font-weight: var(--oxy-corner-fs, 400) !default; // 字号
+$-corner-color: var(--oxy-corner-color, $-color-white) !default; // 字体颜色
+$-corner-primary-color: var(--oxy-corner-primary-color, $-color-theme) !default; // 主颜色
+$-corner-info-color: var(--oxy-corner-info-color, #7e8fae) !default; // info 颜色
+$-corner-success-color: var(--oxy-corner-success-color, $-color-success) !default; // success 颜色
+$-corner-warning-color: var(--oxy-corner-warning-color, $-color-warning) !default; // warning 颜色
+$-corner-danger-color: var(--oxy-corner-danger-color, $-color-danger) !default; // danger 颜色
+$-corner-primary-bg: var(--oxy-corner-primary-bg, resultColor(90deg, $-color-theme, 'dark' 'light', #018cfc #5fb5fe, 0% 100%)) !default; // 主背景颜色
+$-corner-info-bg: var(--oxy-corner-info-bg, resultColor(90deg, $-color-info, 'dark' 'light', #647ba7 #9aa8cb, 0% 100%)) !default; // info 背景颜色
+$-corner-success-bg: var(--oxy-corner-success-bg, resultColor(90deg, $-color-success, 'dark' 'light', #19be6b #84e3ab, 0% 100%)) !default; // success 背景颜色
+$-corner-warning-bg: var(--oxy-corner-warning-bg, resultColor(90deg, $-color-warning, 'dark' 'light', #ff8124 #ffb48f, 0% 100%)) !default; // warning 背景颜色
+$-corner-danger-bg: var(--oxy-corner-danger-bg, resultColor(90deg, $-color-danger, 'dark' 'light', #fa4350 #fea1a8, 0% 100%)) !default; // danger 背景颜色
+$-corner-horizontal-font-size: var(--oxy-corner-fs, $-fs-content) !default; // 字号
+$-corner-horizontal-font-weight: var(--oxy-corner-fs, $-fw-semibold) !default; // 字号
+$-corner-horizontal-primary-bg: var(--oxy-corner-primary-bg, resultColor(90deg, $-color-theme, 'light' 'dark', #ffffff #cceaff, 0% 100%)) !default; // 主背景颜色
+$-corner-horizontal-info-bg: var(--oxy-corner-info-bg, resultColor(90deg, $-color-info, 'light' 'dark', #ffffff #adb6c6, 0% 100%)) !default; // info 背景颜色
+$-corner-horizontal-success-bg: var(--oxy-corner-success-bg, resultColor(90deg, $-color-success, 'light' 'dark', #ffffff #b2ebcf, 0% 100%)) !default; // success 背景颜色
+$-corner-horizontal-warning-bg: var(--oxy-corner-warning-bg, resultColor(90deg, $-color-warning, 'light' 'dark', #ffffff #fcedd6, 0% 100%)) !default; // warning 背景颜色
+$-corner-horizontal-danger-bg: var(--oxy-corner-danger-bg, resultColor(90deg, $-color-danger, 'light' 'dark', #ffffff #ffd5d8, 0% 100%)) !default; // danger 背景颜色
+$-corner-embedded-font-size: var(--oxy-corner-fs, $-fs-content) !default; // 字号
+$-corner-embedded-font-weight: var(--oxy-corner-fs, 400) !default; // 字号
+$-corner-embedded-primary-bg: var(--oxy-corner-primary-bg, #cceaff) !default; // 主背景颜色
+$-corner-embedded-info-bg: var(--oxy-corner-info-bg, #eef4fc) !default; // info 背景颜色
+$-corner-embedded-success-bg: var(--oxy-corner-success-bg, #b2ebcf) !default; // success 背景颜色
+$-corner-embedded-warning-bg: var(--oxy-corner-warning-bg, #fcedd6) !default; // warning 背景颜色
+$-corner-embedded-danger-bg: var(--oxy-corner-danger-bg, #ffd5d8) !default; // danger 背景颜色
+
 /* toast */
 $-toast-color: var(--oxy-toast-color, $-color-white) !default; // 文字颜色
 $-toast-padding: var(--oxy-toast-padding, 16px 24px) !default; // padding
@@ -728,7 +758,7 @@ $-upload-evoke-disabled-color: var(--oxy-upload-evoke-disabled-color, rgba(0, 0,
 $-upload-close-icon-size: var(--oxy-upload-close-icon-size, 16px) !default; // 移除按钮尺寸
 $-upload-close-icon-color: var(--oxy-upload-close-icon-color, rgba(0, 0, 0, 0.65)) !default; // 移除按钮颜色
 $-upload-progress-fs: var(--oxy-upload-progress-fs, 14px) !default; // 进度文字字号
-$-upload-file-fs: var(--oxy-upload-file-fs, 12px) !default; // 文件名字号
+$-upload-file-fs: var(--oxy-upload-file-fs, 14px) !default; // 文件名字号
 $-upload-file-color: var(--oxy-upload-file-color, $-color-secondary) !default; // 文件名字颜色
 $-upload-preview-name-fs: var(--oxy-upload-preview-name-fs, 12px) !default; // 预览图片名字号
 $-upload-preview-icon-size: var(--oxy-upload-preview-icon-size, 24px) !default; // 预览内部图标尺寸
@@ -736,6 +766,9 @@ $-upload-preview-name-bg: var(--oxy-upload-preview-name-bg, rgba(0, 0, 0, 0.6))
 $-upload-preview-name-height: var(--oxy-upload-preview-name-height, 22px) !default; // 预览文件名背景高度
 $-upload-cover-icon-size: var(--oxy-upload-cover-icon-size, 22px) !default; // 视频/文件图标尺寸
 
+/* file-list */
+$-file-list-height: var(--oxy-file-list-height, 100px) !default; // 文件高度
+
 /* curtain */
 $-curtain-content-radius: var(--oxy-curtain-content-radius, 24px) !default; // 内容圆角
 $-curtain-content-close-color: var(--oxy-curtain-content-close-color, $-color-white) !default; // 关闭按钮颜色
@@ -971,4 +1004,7 @@ $-signature-footer-margin-top: var(--oxy-signature-footer-margin-top, 8px) !defa
 $-signature-button-margin-left: var(--oxy-signature-button-margin-left, 8px) !default; // 底部按钮左边距
 
 
-
+/* tree */
+$-tree-node-current-bg:var(--oxy-tree-node-current-bg, var(--oxy-color-theme, #4d80ef1a));
+$-tree-node-current-color:var(--oxy-tree-node-current-color, $-text-primary-color);
+$-tree-node-disabled-color:var(--oxy-tree-node-disabled-color, $-color-icon-disabled);

package/components/common/util.ts

@@ -720,6 +720,17 @@ export function isVideoUrl(url: string): boolean {
   return videoRegex.test(url)
 }
 
+/**
+ * 检查提供的URL是否为音频文件。
+ * @param url 待检查的URL字符串。
+ * @returns 返回一个布尔值，如果URL是音频文件，则为true；否则为false。
+ */
+export function isAudioUrl(url: string): boolean {
+  // 使用正则表达式匹配音频文件URL
+  const audioRegex = /\.(mp3|wav|ogg|flac|aac|m4a|wma|amr|aac)(?=$|[?#])/i
+  return audioRegex.test(url)
+}
+
 /**
  * 检查提供的URL是否为图片URL。
  * @param url 待检查的URL字符串。
@@ -731,6 +742,39 @@ export function isImageUrl(url: string): boolean {
   return imageRegex.test(url)
 }
 
+/**
+ * 检查提供的URL是否为PDF文件。
+ * @param url 待检查的URL字符串。
+ * @returns 返回一个布尔值，如果URL是PDF文件，则为true；否则为false。
+ */
+export function isPdfUrl(url: string): boolean {
+  // 使用正则表达式匹配PDF文件URL
+  const pdfRegex = /\.(pdf)(?=$|[?#])/i
+  return pdfRegex.test(url)
+}
+
+/**
+ * 检查提供的URL是否为文档文件。
+ * @param url 待检查的URL字符串。
+ * @returns 返回一个布尔值，如果URL是文档文件，则为true；否则为false。
+ */
+export function isDocUrl(url: string): boolean {
+  // 使用正则表达式匹配文档文件URL
+  const docRegex = /\.(doc|docx|ppt|pptx|odt|odp|ods|odg|odf|txt|rtf|tex|wpd|wps|wp)(?=$|[?#])/i
+  return docRegex.test(url)
+}
+
+/**
+ * 检查提供的URL是否为excel文件。
+ * @param url 待检查的URL字符串。
+ * @returns 返回一个布尔值，如果URL是excel文件，则为true；否则为false。
+ */
+export function isExcelUrl(url: string): boolean {
+  // 使用正则表达式匹配excel文件URL
+  const excelRegex = /\.(xls|xlsx|xlsm|xlsb|xltx|xltm|xla|xlam|xll|xlw)(?=$|[?#])/i
+  return excelRegex.test(url)
+}
+
 /**
  * 判断环境是否是H5
  */

package/components/composables/index.ts

@@ -9,3 +9,4 @@ export { useRaf } from './useRaf'
 export { useTouch } from './useTouch'
 export { useTranslate } from './useTranslate'
 export { useUpload } from './useUpload'
+export { useVirtualScroll } from './useVirtualScroll'

package/components/composables/useVirtualScroll.ts

@@ -0,0 +1,172 @@
+/**
+ * 虚拟滚动组合式函数 - 用于复用虚拟滚动逻辑
+ */
+
+import { ref, computed, watch, nextTick, type Ref } from 'vue'
+import { VirtualScrollEngine } from '../oxy-virtual-scroll/virtual-scroll'
+
+export interface UseVirtualScrollOptions {
+  data: Ref<any[]>
+  virtual: Ref<boolean>
+  height: Ref<string>
+  itemHeight: Ref<string>
+  idKey: Ref<string>
+  backToTopThreshold: Ref<string>
+}
+
+export interface UseVirtualScrollReturn {
+  // 响应式数据
+  scrollTop: Ref<number>
+  showBackTopBtn: Ref<boolean>
+  virtualData: Ref<any[]>
+  startIndex: Ref<number>
+  virtualOffsetY: Ref<number>
+  totalHeight: Ref<number>
+  displayData: Ref<any[]>
+
+  // 方法
+  initScrollData: () => void
+  initScrollEngine: () => void
+  updateVisibleData: () => void
+  scrollToTop: () => void
+  scrollToBottom: () => void
+  scrollToPosition: (position: number | string) => void
+  scrollToElement: (item: any) => void
+  scrollToElementById: (id: string | number) => void
+  onScroll: (scrollTopValue: number) => void
+}
+
+export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualScrollReturn {
+  const { data, virtual, height, itemHeight, idKey, backToTopThreshold } = options
+
+  // 响应式数据
+  const scrollTop = ref<number>(0)
+  const showBackTopBtn = ref<boolean>(false)
+  const virtualData = ref<any[]>([])
+  const startIndex = ref<number>(0)
+  const virtualOffsetY = ref<number>(0)
+  const virtualEngine = ref<any>(null)
+
+  // 计算属性
+  const displayData = computed<any[]>(() => data.value)
+
+  const totalHeight = computed(() => {
+    return displayData.value.length * parseFloat(itemHeight.value)
+  })
+
+  // 监听数据变化
+  watch(
+    () => data.value,
+    () => {
+      nextTick(initScrollData)
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
+
+  // 初始化滚动数据
+  function initScrollData() {
+    if (!virtual.value) {
+      // 非虚拟滚动模式：直接使用全部数据
+      virtualData.value = displayData.value
+      virtualOffsetY.value = 0
+      return
+    }
+
+    virtualEngine.value = new VirtualScrollEngine({
+      containerHeight: parseFloat(height.value),
+      itemHeight: parseFloat(itemHeight.value),
+      data: displayData.value
+    })
+    updateVisibleData()
+  }
+
+  // 初始化滚动引擎
+  function initScrollEngine() {
+    if (!virtual.value) return
+
+    virtualEngine.value = new VirtualScrollEngine({
+      containerHeight: parseFloat(height.value),
+      itemHeight: parseFloat(itemHeight.value),
+      data: displayData.value
+    })
+  }
+
+  // 更新可见数据
+  function updateVisibleData() {
+    if (!virtual.value) return // 非虚拟模式不处理
+
+    if (virtualEngine.value) {
+      const { visibleData, offsetY } = virtualEngine.value.updateVisibleData(scrollTop.value || 0)
+      virtualData.value = visibleData
+      virtualOffsetY.value = offsetY
+    }
+  }
+
+  // 滚动事件处理
+  function onScroll(scrollTopValue: number) {
+    scrollTop.value = scrollTopValue
+    showBackTopBtn.value = scrollTopValue > parseFloat(backToTopThreshold.value)
+    updateVisibleData()
+  }
+
+  // 滚动到顶部
+  function scrollToTop() {
+    scrollTop.value = 0
+    nextTick(() => {
+      scrollTop.value = 0
+    })
+  }
+
+  // 滚动到底部
+  function scrollToBottom() {
+    scrollToPosition(totalHeight.value)
+  }
+
+  // 滚动到指定位置
+  function scrollToPosition(position: number | string) {
+    scrollTop.value = typeof position === 'number' ? position : parseFloat(position)
+  }
+
+  // 滚动到指定元素
+  function scrollToElement(item: any) {
+    const index = data.value.findIndex((o) => item[idKey.value] && o[idKey.value] && o[idKey.value] === item[idKey.value])
+    if (index > 0) {
+      const scrollDistance = parseFloat(itemHeight.value) * index
+      scrollToPosition(scrollDistance)
+    }
+  }
+
+  // 根据ID滚动到指定元素
+  function scrollToElementById(id: string | number) {
+    const index = data.value.findIndex((o) => id && o[idKey.value] && o[idKey.value] === id)
+    if (index > 0) {
+      const scrollDistance = parseFloat(itemHeight.value) * index
+      scrollToPosition(scrollDistance)
+    }
+  }
+
+  return {
+    // 响应式数据
+    scrollTop,
+    showBackTopBtn,
+    virtualData,
+    startIndex,
+    virtualOffsetY,
+    totalHeight,
+    displayData,
+
+    // 方法
+    initScrollData,
+    initScrollEngine,
+    updateVisibleData,
+    scrollToTop,
+    scrollToBottom,
+    scrollToPosition,
+    scrollToElement,
+    scrollToElementById,
+    onScroll
+  }
+}

package/components/oxy-checkbox/index.scss

@@ -1,5 +1,5 @@
-@import "./../common/abstracts/_mixin.scss";
-@import "./../common/abstracts/variable.scss";
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
 
 .oxy-theme-dark {
   @include b(checkbox) {
@@ -38,7 +38,6 @@
       }
 
       @include when(button) {
-
         .oxy-checkbox__label {
           border-color: #c8c9cc;
           background: #3a3a3c;
@@ -66,7 +65,6 @@
         }
       }
     }
-
   }
 }
 
@@ -137,8 +135,35 @@
     transition: opacity 0.2s;
   }
 
+  @include edeep(indeterminate) {
+    color: $-checkbox-check-color;
+    font-size: $-checkbox-icon-size;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  @include when(indeterminate) {
+    .oxy-checkbox__shape {
+      color: $-checkbox-checked-color;
+      background: currentColor;
+      border-color: currentColor;
+    }
+
+    :deep(.oxy-checkbox__indeterminate) {
+      opacity: 1;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    :deep(.oxy-checkbox__check) {
+      display: none;
+    }
+  }
+
   @include when(checked) {
     .oxy-checkbox__shape {
+      display: inline-block;
       color: $-checkbox-checked-color;
       background: currentColor;
       border-color: currentColor;
@@ -151,8 +176,13 @@
       top: 50%;
       transform: translate(-50%, -50%);
     }
+
+    :deep(.oxy-checkbox__indeterminate) {
+      display: none;
+    }
   }
 
+
   @include when(button) {
     display: inline-block;
     margin-bottom: 0;
@@ -265,7 +295,7 @@
     }
 
     &:last-child::after {
-      content: "";
+      content: '';
       display: table;
       clear: both;
     }
@@ -282,4 +312,4 @@
       font-size: $-checkbox-large-label-fs;
     }
   }
-}
+}

package/components/oxy-checkbox/oxy-checkbox.vue

@@ -1,10 +1,10 @@
 <template>
   <view
     :class="`oxy-checkbox ${innerCell ? 'is-cell-box' : ''} ${innerShape === 'button' ? 'is-button-box' : ''} ${isChecked ? 'is-checked' : ''} ${
-      isFirst ? 'is-first-child' : ''
-    } ${isLast ? 'is-last-child' : ''} ${innerInline ? 'is-inline' : ''} ${innerShape === 'button' ? 'is-button' : ''} ${
-      innerDisabled ? 'is-disabled' : ''
-    } ${innerSize ? 'is-' + innerSize : ''} ${customClass}`"
+      indeterminate ? 'is-indeterminate' : ''
+    } ${isFirst ? 'is-first-child' : ''} ${isLast ? 'is-last-child' : ''} ${innerInline ? 'is-inline' : ''} ${
+      innerShape === 'button' ? 'is-button' : ''
+    } ${innerDisabled ? 'is-disabled' : ''} ${innerSize ? 'is-' + innerSize : ''} ${customClass}`"
     :style="customStyle"
     @click="toggle"
   >
@@ -14,6 +14,7 @@
       :class="`oxy-checkbox__shape ${innerShape === 'square' ? 'is-square' : ''} ${customShapeClass}`"
       :style="isChecked && !innerDisabled && innerCheckedColor ? 'color :' + innerCheckedColor : ''"
     >
+      <oxy-icon custom-class="oxy-checkbox__indeterminate" name="decrease" />
       <oxy-icon custom-class="oxy-checkbox__check" name="check-bold" />
     </view>
     <!--shape为button时只保留oxy-checkbox__label-->

package/components/oxy-checkbox/types.ts

@@ -1,5 +1,5 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeStringProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
 export type CheckShape = 'circle' | 'square' | 'button'
 
@@ -15,6 +15,7 @@ export const checkboxProps = {
     required: true,
     default: false
   },
+  indeterminate: makeBooleanProp(false),
   /**
    * 单选框形状，可选值：circle / square / button
    */

package/components/oxy-col-picker/index.scss

@@ -60,9 +60,8 @@
         color: $-input-placeholder-color;
       }
     }
-  
   }
-  
+
   @include edeep(arrow) {
     display: block;
     font-size: $-cell-icon-size;
@@ -76,13 +75,13 @@
     color: $-col-picker-selected-color;
     overflow: hidden;
   }
-  
-  @include e(selected-container){
+
+  @include e(selected-container) {
     position: relative;
     display: flex;
     user-select: none;
   }
-  
+
   @include e(selected-item) {
     flex: 0 0 auto;
     height: $-col-picker-selected-height;
@@ -93,7 +92,7 @@
       font-weight: $-col-picker-selected-fw;
     }
   }
-  
+
   @include e(selected-line) {
     position: absolute;
     bottom: 5px;
@@ -105,11 +104,11 @@
     border-radius: calc($-col-picker-line-height / 2);
     box-shadow: $-col-picker-line-box-shadow;
   }
-  
-  @include e(list-container){
+
+  @include e(list-container) {
     position: relative;
   }
-  
+
   @include e(list) {
     height: $-col-picker-list-height;
     padding-bottom: $-col-picker-list-padding-bottom;
@@ -119,7 +118,7 @@
     font-size: $-col-picker-list-fs;
     -webkit-overflow-scrolling: touch;
   }
-  
+
   @include e(list-item) {
     display: flex;
     padding: $-col-picker-list-item-padding;
@@ -136,17 +135,21 @@
       color: $-col-picker-list-color-disabled;
     }
   }
-  
+
   @include e(list-item-label) {
     line-height: 1.285;
   }
-  
+
   @include e(list-item-tip) {
     margin-top: 2px;
     font-size: $-col-picker-list-fs-tip;
     color: $-col-picker-list-color-tip;
   }
-  
+
+  @include e(confirm) {
+    padding: 12px 25px 14px;
+  }
+
   @include edeep(checked) {
     display: block;
     margin-left: 4px;
@@ -154,7 +157,7 @@
     color: $-col-picker-list-color-checked;
     opacity: 0;
   }
-  
+
   @include e(loading) {
     display: flex;
     position: absolute;
@@ -165,4 +168,4 @@
     align-items: center;
     justify-content: center;
   }
-}
+}

package/components/oxy-col-picker/oxy-col-picker.vue

@@ -83,6 +83,9 @@
           </view>
         </view>
       </view>
+      <view v-if="showConfirm" class="oxy-col-picker__confirm">
+        <oxy-button block @click="handleBtnConfirm">{{ confirmText || translate('confirm') }}</oxy-button>
+      </view>
     </oxy-action-sheet>
   </view>
 </template>
@@ -102,7 +105,7 @@ import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyLoading from '../oxy-loading/oxy-loading.vue'
 import OxyActionSheet from '../oxy-action-sheet/oxy-action-sheet.vue'
 import OxyCell from '../oxy-cell/oxy-cell.vue'
-import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties, reactive } from 'vue'
+import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties, type ComponentPublicInstance, reactive } from 'vue'
 import { addUnit, debounce, getRect, isArray, isBoolean, isDef, isFunction, objToStyle } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import { colPickerProps, type ColPickerExpose } from './types'
@@ -314,7 +317,7 @@ function getSelectedItem(value: string | number, colIndex: number, selectList: R
   }
 }
 
-function chooseItem(colIndex: number, index: number) {
+function chooseItem(colIndex: number, index: number, triggerColChange: boolean = true) {
   const item = selectList.value[colIndex][index]
   if (item.disabled) return
 
@@ -331,7 +334,9 @@ function chooseItem(colIndex: number, index: number) {
     updateLineAndScroll(true)
   }
 
-  handleColChange(colIndex, item, index)
+  if (triggerColChange) {
+    handleColChange(colIndex, item, index)
+  }
 }
 
 function handleColChange(colIndex: number, item: Record<string, any>, index: number, callback?: () => void) {
@@ -396,6 +401,26 @@ function handleColChange(colIndex: number, item: Record<string, any>, index: num
       }
     })
 }
+function handleBtnConfirm() {
+  const { beforeConfirm } = props
+  if (beforeConfirm) {
+    beforeConfirm(
+      pickerColSelected.value,
+      pickerColSelected.value.map((item, colIndex) => {
+        return getSelectedItem(item, colIndex, selectList.value)
+      }),
+      (isPass: boolean) => {
+        if (isPass) {
+          onConfirm()
+        } else {
+          loading.value = false
+        }
+      }
+    )
+  } else {
+    onConfirm()
+  }
+}
 function onConfirm() {
   isChange.value = false
   loading.value = false

package/components/oxy-col-picker/types.ts

@@ -100,6 +100,18 @@ export const colPickerProps = {
    * 弹窗层级
    */
   zIndex: makeNumberProp(15),
+  /**
+   * 是否显示确定按钮
+   */
+  showConfirm: makeBooleanProp(false),
+  /**
+   * 多选时，添加按钮文字
+   */
+  addText: String,
+  /**
+   * 确定按钮文字
+   */
+  confirmText: String,
   /**
    * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
    */