web-component-gallery 2.0.9 → 2.0.11

package/dist/style.css

@@ -2,12 +2,6 @@
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
-/* 布局（ 纯为了不想多写一行 */
-/* 正方体盒子 */
-/* 滚动条样式 */
-/* 文字换行省略（默认1行）*/
-/* flex布局 */
-/* flex排版方式 */
 .weather {
   font-size: 16px;
   display: flex;

package/lib/form-comp/ASelectCustom.vue

@@ -1,26 +1,28 @@
 <template>
+
   <div
-    @mousedown="
-      e => {
-        e.preventDefault()
-        !attrs.disabled && (selectOpen = true)
-      }
-    "
+    @mousedown="e => {
+      e.preventDefault()
+      !attrs.disabled && (isSelectOpen = true)
+    }"
     ref="main"
     class="ASelectCustom"
   >
     <Select
-      class="t_select"
-      v-model="childSelectedValue"
+      show-search
       :style="{ width: width || '100%' }"
+      :mode="mode"
+      :open="isSelectOpen"
       :placeholder="placeholder"
-      :open="selectOpen"
-      :filterOption="filterOption"
+      :filterOption="false"
+      :getPopupContainer="tirggerNode => tirggerNode.parentNode"
       @select="handleSelect"
-      v-bind="attrs"
+      @search="handleSearch"
+      @popupScroll="handleScroll"
       v-on="$listeners"
-      :mode="mode"
-    > 
+      v-bind="attrs"
+      v-model="childSelectedValue"
+    >
       <template v-for="(index, name) in $slots" v-slot:[name]>
         <slot :name="name" />
       </template>
@@ -28,25 +30,11 @@
         <slot :name="name" v-bind="data"></slot>
       </template>
       <div slot="dropdownRender" slot-scope="menu">
-        <Checkbox v-if="mode && !isShowPagination" :checked="selectChecked" @change="selectAll">
-          全选
-        </Checkbox>
+        <Checkbox v-if="mode" :checked="selectChecked" @change="handleSelectAll">全选</Checkbox>
         <v-nodes :vnodes="menu" />
-        <div class="t_select__pagination" v-if="isShowPagination">
-          <Pagination
-            :page-size.sync="paginationOption.pageSize"
-            v-model="paginationOption.current"
-            :total="paginationOption.total"
-            @change="currentChange"
-            v-bind="{
-              size: 'small',
-              'hide-on-single-page': true,
-              showQuickJumper: true,
-              ...$attrs,
-              ...paginationOption.bind
-            }"
-            v-on="$listeners"
-          />
+        <div v-if="isLoadingMore" class="loading-more">
+          <Icon type="loading" />
+          加载中...
         </div>
       </div>
       <SelectOption v-for="(item, index) in options" :key="index" :value="item[valueKey]">
@@ -55,8 +43,10 @@
     </Select>
   </div>
 </template>
+
 <script>
-import { Select, Checkbox, Pagination } from 'ant-design-vue'
+import { Icon, Select, Checkbox } from 'ant-design-vue'
+import debounce from 'lodash/debounce'
 
 export default {
   name: 'ASelectCustom',
@@ -65,78 +55,62 @@ export default {
       functional: true,
       render: (h, ctx) => ctx.props.vnodes
     },
+    Icon,
     Select,
     SelectOption: Select.Option,
-    Checkbox,
-    Pagination
+    Checkbox
   },
   props: {
     value: {
       type: [String, Number, Array, Boolean, Object],
       default: undefined
     },
-    // 多选 'multiple'
-    mode: {
-      type: String
-    },
-    // 是否支持输入
+    // 是否多选
+    mode: String,
+    // 是否支持输入保留字符
     isInput: {
       type: Boolean,
       default: false
     },
+    // 提示文字
     placeholder: {
       type: String,
       default: '请选择'
     },
-    // 选择框宽度
-    width: {
-      type: String
-    },
-    // 是否自定义设置下拉label
-    customLabel: {
-      type: String
-    },
-    // 传入的option数组中，要作为最终选择项的键值key
+    width: String,
+    // 根据valueKey来进行自定义label
+    customLabel: String,
     valueKey: {
       type: String,
       default: 'value'
     },
-    // 传入的option数组中，要作为显示项的键值名称
     labelKey: {
       type: String,
       default: 'label'
     },
-    // 下拉框组件数据源
+    // 数据源
     options: {
-      type: Array
+      type: Array,
+      default: () => ([])
     },
-    // 是否显示分页
-    isShowPagination: {
-      type: Boolean,
-      default: false
-    },
-    // 分页配置项
-    paginationOption: {
-      type: Object,
-      default: () => {
-        return {
-          pageSize: 6, // 每页显示条数
-          current: 1, // 当前页
-          total: 0 // 总条数
-        }
-      }
-    }
+    // 分页页数
+    pSize: Number,
+    // 分页总数，如要实现完整分页功能要传递接口总数
+    pTotal: Number
   },
   data() {
     return {
-      selectOpen: false
+      isSelectOpen: false,
+      currentPage: 1,
+      isLoadingMore: false,
+      searchKeyword: ''
     }
   },
   computed: {
     childSelectedValue: {
       get() {
         return this.value
-      }, 
+      },
       set(val) {
         this.$emit('input', val)
       }
@@ -148,6 +122,9 @@ export default {
         ...this.$attrs
       }
     },
+    hasMore() {
+      return this.options.length < this.pTotal
+    },
     selectChecked: {
       get() {
         return this.childSelectedValue?.length === this.options?.length
@@ -157,6 +134,10 @@ export default {
       }
     }
   },
+  created() {
+    this.debouncedSearch = debounce(this.handleSearch, 800)
+    this.debouncedLoadMore = debounce(this.loadMoreData, 300)
+  },
   mounted() {
     document.addEventListener('click', this.bodyCloseMenus)
   },
@@ -164,56 +145,74 @@ export default {
     document.removeEventListener('click', this.bodyCloseMenus)
   },
   methods: {
-    filterOption(input, option) {
-      this.isInput && (this.childSelectedValue = input)
-      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-    },
-    // 点击空白区域
+    // 下拉滚动加载更多
+    handleScroll(e) {
+      const { scrollTop, scrollHeight, clientHeight } = e.target
+      const reachBottom = scrollTop + clientHeight >= scrollHeight - 10
+      if (reachBottom && !this.isLoadingMore && this.hasMore) this.debouncedLoadMore()
+    },
+    // 搜索事件
+    handleSearch(value) {
+      this.isInput && (this.childSelectedValue = value)
+      this.searchKeyword = value
+      this.currentPage = 1
+
+      // 根据是否有分页决定emit参数格式
+      this.$emit('search', this.pTotal ? {
+        keyword: value,
+        current: this.currentPage,
+        size: this.pSize
+      } : value)
+    },
+    // 点击选择器外内容下拉回收
     bodyCloseMenus(e) {
-      if (this.$refs.main && !this.$refs.main.contains(e.target)) {
-        if (this.selectOpen == true) {
-          this.selectOpen = false
-        }
-      }
+      if (this.$refs.main && !this.$refs.main.contains(e.target)) this.isSelectOpen = false
     },
-    // 点击全选
-    selectAll(val) {
-      const options = JSON.parse(JSON.stringify(this.options))
-      if (val.target.checked) {
-        const childSelectedValue = options?.map(item => {
-          return item[this.valueKey]
-        })
-        setTimeout(() => {
-          this.$emit('input', childSelectedValue)
-        }, 0)
-      } else {
-        this.$emit('input', null)
+    // 自定义label显示
+    customLabelHandler(item) {
+      try {
+        // 使用函数式替代eval
+        const func = new Function('item', `return ${this.customLabel}`)
+        return func(item)
+      } catch (e) {
+        console.error('自定义label解析错误:', e)
+        return item[this.labelKey]
       }
-      this.selectOpen = false
     },
+    // 选中全部
+    handleSelectAll(event) {
+      const isChecked = event.target.checked
+      const selectOptions = isChecked ? this.options.map(item => item[this.valueKey]) : []
+      this.$emit('input', selectOptions)
+      this.isSelectOpen = false
+    },
+    // 选中事件
     handleSelect(value, option) {
-      if (value) {
-        this.selectOpen = false
-      }
-      const options = this.options.find(e => e[this.valueKey] == value)
-      options[this.valueKey] && this.$emit('select', value, options)
-    },
-    // 切换分页
-    currentChange(val) {
-      // console.log('切换分页', val)
-      if (!this.mode) {
-        this.childSelectedValue = null
+      if (!value) return
+      this.isSelectOpen = false
+      const selectedOption = this.options.find(item => item[this.valueKey] === value)
+      selectedOption && this.$emit('select', value, selectedOption)
+    },
+    // 加载更多
+    loadMoreData() {
+      if (this.isLoadingMore || !this.hasMore) return
+      
+      this.isLoadingMore = true
+      this.currentPage++
+      
+      try {
+        this.$emit('load-more', {
+          keyword: this.searchKeyword,
+          current: this.currentPage,
+          size: this.pSize
+        })
+      } catch (error) {
+        this.currentPage--
+        console.error('加载更多失败:', error)
+      } finally {
+        this.isLoadingMore = false
       }
-      setTimeout(() => {
-        this.selectOpen = true
-      }, 0)
-      this.$emit('current-change', val)
-    },
-    // 自定义label显示
-    customLabelHandler(item) {
-      // eslint-disable-next-line no-eval
-      return eval(this.customLabel)
     }
   }
 }
-</script>
+</script>

package/lib/form-comp/style/ASelectCustom.less

@@ -1,4 +1,20 @@
+@import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less';
+
 // 添加flex属性解决css中div莫名高度
 .ASelectCustom {
     width: 100%;
-}
+
+    .loading-more {
+        font-size: @font-size-base;
+        text-align: center;
+        padding: @padding-xs 0;
+        box-sizing: border-box;
+    }
+
+    .ant-select-dropdown-menu {
+        max-height: 300px;
+        overflow-y: auto;
+        .scrollbarStyle();
+    }
+}

package/lib/modal/index.jsx

@@ -6,8 +6,7 @@ const ModalProps = {
   mode: PropTypes.string.def('small'),
   title: PropTypes.string.def('标题'),
   visible: PropTypes.bool.def(false),
-  cancelHandle: PropTypes.func,
-  attrs: PropTypes.object.def({})
+  cancelHandle: PropTypes.func
 } 
 
 const ModalComp = {

package/lib/modal/style/index.less

@@ -20,6 +20,7 @@
     &__max {
         .ant-modal {
            top: 0;
+           padding-bottom: 0;
            .layout();
         }
     }

package/lib/style/mixins.less

@@ -1,14 +1,20 @@
-/* 布局（ 纯为了不想多写一行 */
-.layout( @w: 100%, @h: 100% ) {
+// 布局
+.layout(@w: 100%, @h: 100%) {
     width: @w;
     height: @h;
 }
 
-/* 正方体盒子 */
+// 正方体盒子
 .square(@size) {
   .layout(@size; @size);
 }
 
+// 页面间距混入
+.specing(@padding: @padding-lg) {
+  padding: @padding;
+  box-sizing: border-box;
+}
+
 // 提示文字样式
 .placeholder(@color: @input-placeholder-color) {
   // Firefox
@@ -20,7 +26,7 @@
   &:-ms-input-placeholder {
     color: @color;
   }
-  // Safari and Chrome
+  // Safari and Chrome 
   &::-webkit-input-placeholder {
     color: @color;
   }  
@@ -30,8 +36,8 @@
   } 
 } 
 
-/* 滚动条样式 */
-.scrollbarStyle( @w: 6px, @h: 6px, @color1: @primary-color, @color2: transparent ) { 
+// 滚动条样式
+.scrollbarStyle(@w: 6px, @h: 6px, @color1: @primary-color, @color2: transparent) { 
     &::-webkit-scrollbar-track {
       border-radius: 0;
       background-color: transparent;
@@ -52,8 +58,8 @@
     }
 }
 
-/* 文字换行省略（默认1行）*/
-.ellipsis( @row: 1 ) {
+// 文字换行省略（默认1行）
+.ellipsis(@row: 1) {
     text-overflow: -o-ellipsis-lastline;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -63,14 +69,14 @@
     -webkit-box-orient: vertical;
 }  
 
-/* flex布局 */
-.flex-layout( @flexDirection: row, @flexGap: 0 ) {
+// flex布局
+.flex-layout(@flexDirection: row, @flexGap: 0) {
     display: flex;
     gap: @flexGap;
     flex-direction: @flexDirection;
 }
 
-/* flex排版方式 */
+// flex排版
 .flex-mixins(@direction: row, @align: center, @justify: center, @gap: 0 ) {
     .flex-layout(@direction, @gap);
     flex-wrap: wrap;

package/lib/style/page.less

@@ -0,0 +1,144 @@
+@import '~ant-design-vue/lib/style/themes/default.less';
+@import './mixins.less';
+
+html,
+body,
+#app, #root {
+  height: 100%;
+}
+
+svg,
+canvas {
+  display: block;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+} 
+
+ul,
+ol {
+  list-style: none;
+}
+
+// 页面内边距
+.PageSpecing {
+  .specing()
+}
+
+// 表格——Title
+.Table__Name {
+  flex: 1;
+  color: @white;
+  font-size: @font-size-lg;
+  padding-left: @padding-sm;
+  box-sizing: border-box;
+  position: relative;
+
+  &::after {
+    left: 0;
+    top: calc((100% - 12px) / 2);
+    content: '';
+    position: absolute;
+    border-radius: @border-radius-sm;
+    background: @primary-color;
+    .layout(4px, 12px);
+  }
+}
+
+// 页面——分割式
+.Page {
+  .layout();
+  .flex-layout(column, @padding-md 0);
+
+  // 页面——搜索
+  &__Search {
+    background: @component-background;
+    .specing();
+  }
+
+  // 页面——列表
+  &__Table {
+    flex: 1;
+    min-height: 0;
+    background: @component-background;
+    .specing(0 @padding-lg @padding-md);
+  }
+}
+
+// 页面——合并式
+.PageOverall {
+  background: @component-background;
+  .layout();
+  .flex-layout(column);
+
+  // 页面——搜索
+  &__Search {
+    .specing();
+  }
+
+  // 页面——列表
+  &__Table {
+    flex: 1;
+    min-height: 0;
+    .specing(0 @padding-lg @padding-md);
+  }
+}
+
+// 页面——详情式
+.PageDeatils {
+  overflow-y: auto;
+  background: @component-background;
+  .layout();
+  .scrollbarStyle();
+}
+
+// 表单——Model
+.Model {
+  background: @component-background;
+  .layout();
+  .flex-layout(column);
+
+  // 禁用
+  &__Disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    .ant-form-item {
+      opacity: 0.6;
+    }
+  }
+
+  // 弹窗主体
+  &__BodyModal,
+  // 页面主体
+  &__BodyPage {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    .scrollbarStyle();
+  }
+
+  &__BodyPage {
+    padding: @padding-lg;
+    padding-right: 0;
+    box-sizing: border-box;
+  }
+
+  // 弹窗操作
+  &__ActionsModal,
+  // 页面操作
+  &__ActionsPage {
+    justify-content: flex-end;
+    padding-top: @padding-md;
+    box-sizing: border-box;
+    border-top: 1px solid @border-color-split;
+    .flex-layout(@flexGap: 0 @padding-xs);
+  }
+
+  &__ActionsPage {
+    .specing(@padding-md);
+  }
+}

package/lib/table/index.vue

@@ -67,6 +67,8 @@ export default {
         size: 10,
         current: 1
       },
+      // 尺寸观察器
+      resizeObserver: null,
       tableScrollBody: 600,
       /** 跨分页记录选中数据 */
       selectedRecords: []
@@ -156,6 +158,8 @@ export default {
   },
   mounted() {
     this.pagination = { ...this.paginationParams }
+    // 监听父级高度
+    this.initResizeObserver()
     const scrollTimer = setTimeout(() => {
       this.getScrollBodyH()
       clearTimeout(scrollTimer)
@@ -164,21 +168,36 @@ export default {
     this.removeDomElement()
   }, 
   destroyed() {
-    // window.removeEventListener( 'resize' )
+    if (this.resizeObserver) this.resizeObserver.disconnect()
+    window.removeEventListener('resize', this.getScrollBodyH)
   },
   methods: {
+    // 初始化尺寸观察器
+    initResizeObserver() {
+      if (typeof ResizeObserver !== 'undefined') {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.getScrollBodyH()
+        })
+        this.resizeObserver.observe(this.$refs.Table)
+      }
+    },
     /** 根据内容高度计算滚动长度 */
     getScrollBodyH() {
+      if (!this.$refs.Table || !this.$refs.TableHead || !this.$refs.TablePagination) return
+        
+      const tableTitleHeight = this.$refs.TableListTitle ? this.$refs.TableListTitle.offsetHeight : 0
+      const tableHeader = document.querySelector('.ant-table-thead')
+      const headerHeight = tableHeader ? tableHeader.offsetHeight : 0
+        
       this.tableScrollBody = 
         this.$refs.Table.clientHeight -
         this.$refs.TableHead.offsetHeight -
         this.$refs.TablePagination.offsetHeight -
-        16 -
-        this.$refs.TableListTitle.offsetHeight -
-        document.querySelector('.ant-table-thead').offsetHeight -
-        20
+        16 - // 基础间距
+        tableTitleHeight -
+        headerHeight -
+        20 // 浮动空间缓冲
       /** 20为获取高度时抹掉的小数点后两位的浮动空间(存在叠加多个获取错误的情况) */
-      console.log(this.$refs.Table.clientHeight, this.tableScrollBody, 'tableScrollBody滚动高度')
     },
     /** 根据高度判断dom元素是否加载 进行删除 */
     removeDomElement() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [