✨(component): 优化 page 组件 limit 逻辑
This commit is contained in:
		
							parent
							
								
									dd86a40766
								
							
						
					
					
						commit
						68e754dc84
					
				@ -58,12 +58,7 @@ watch(
 | 
			
		||||
const totalPage = computed(() => {
 | 
			
		||||
  maxPage.value = Math.ceil(props.total / inlimit.value);
 | 
			
		||||
  let r: number[] = [];
 | 
			
		||||
  let start =
 | 
			
		||||
    maxPage.value <= props.pages
 | 
			
		||||
      ? 1
 | 
			
		||||
      : currentPage.value > pages
 | 
			
		||||
      ? currentPage.value - pages
 | 
			
		||||
      : 1;
 | 
			
		||||
  let start = maxPage.value <= props.pages ? 1 : currentPage.value > pages ? currentPage.value - pages : 1;
 | 
			
		||||
  for (let i = start; ; i++) {
 | 
			
		||||
    if (r.length >= props.pages || i > maxPage.value) {
 | 
			
		||||
      break;
 | 
			
		||||
@ -102,7 +97,10 @@ const jumpPage = () => {
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const changelimit = () => {
 | 
			
		||||
  currentPage.value = 1;
 | 
			
		||||
  const maxPage = Math.ceil(props.total / inlimit.value);
 | 
			
		||||
  if(currentPage.value > maxPage ) {
 | 
			
		||||
    currentPage.value = maxPage;
 | 
			
		||||
  }
 | 
			
		||||
  emit("change", { current: currentPage.value, limit: inlimit.value });
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -15,7 +15,7 @@ import {
 | 
			
		||||
  onMounted,
 | 
			
		||||
  VNode,
 | 
			
		||||
  Component,
 | 
			
		||||
  watch
 | 
			
		||||
  watch,
 | 
			
		||||
} from "vue";
 | 
			
		||||
import LayInput from "../input/index.vue";
 | 
			
		||||
import LayTagInput from "../tagInput/index.vue";
 | 
			
		||||
@ -65,16 +65,19 @@ onMounted(() => {
 | 
			
		||||
  }
 | 
			
		||||
  Object.assign(options.value, props.items);
 | 
			
		||||
 | 
			
		||||
  watch(selectedValue, () => {
 | 
			
		||||
    if (multiple.value) {
 | 
			
		||||
      // tag-input 格式化
 | 
			
		||||
 | 
			
		||||
    } else {
 | 
			
		||||
      singleLabel.value = options.value.find((item: any) => {
 | 
			
		||||
        return item.value === selectedValue.value;
 | 
			
		||||
      })?.label;
 | 
			
		||||
    }
 | 
			
		||||
  }, { immediate: true })
 | 
			
		||||
  watch(
 | 
			
		||||
    selectedValue,
 | 
			
		||||
    () => {
 | 
			
		||||
      if (multiple.value) {
 | 
			
		||||
        // tag-input 格式化
 | 
			
		||||
      } else {
 | 
			
		||||
        singleLabel.value = options.value.find((item: any) => {
 | 
			
		||||
          return item.value === selectedValue.value;
 | 
			
		||||
        })?.label;
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    { immediate: true }
 | 
			
		||||
  );
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const getOption = function (nodes: VNode[]) {
 | 
			
		||||
@ -111,24 +114,55 @@ provide("multiple", multiple);
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="layui-select">
 | 
			
		||||
    <lay-dropdown :disabled="disabled" :update-at-scroll="true" @show="openState = true" @hide="openState = false">
 | 
			
		||||
      <lay-tag-input v-if="multiple" v-model="selectedValue" :allow-clear="allowClear" :disabledInput="true">
 | 
			
		||||
    <lay-dropdown
 | 
			
		||||
      :disabled="disabled"
 | 
			
		||||
      :update-at-scroll="true"
 | 
			
		||||
      @show="openState = true"
 | 
			
		||||
      @hide="openState = false"
 | 
			
		||||
    >
 | 
			
		||||
      <lay-tag-input
 | 
			
		||||
        v-if="multiple"
 | 
			
		||||
        v-model="selectedValue"
 | 
			
		||||
        :allow-clear="allowClear"
 | 
			
		||||
        :disabledInput="true"
 | 
			
		||||
      >
 | 
			
		||||
        <template #suffix>
 | 
			
		||||
          <lay-icon type="layui-icon-triangle-d" :class="{ 'triangle': openState }"></lay-icon>
 | 
			
		||||
          <lay-icon
 | 
			
		||||
            type="layui-icon-triangle-d"
 | 
			
		||||
            :class="{ triangle: openState }"
 | 
			
		||||
          ></lay-icon>
 | 
			
		||||
        </template>
 | 
			
		||||
      </lay-tag-input>
 | 
			
		||||
      <lay-input v-else v-model="singleLabel" :placeholder="placeholder" :allow-clear="allowClear" :readonly="true">
 | 
			
		||||
      <lay-input
 | 
			
		||||
        v-else
 | 
			
		||||
        v-model="singleLabel"
 | 
			
		||||
        :placeholder="placeholder"
 | 
			
		||||
        :allow-clear="allowClear"
 | 
			
		||||
        :readonly="true"
 | 
			
		||||
      >
 | 
			
		||||
        <template #suffix>
 | 
			
		||||
          <lay-icon type="layui-icon-triangle-d" :class="{ 'triangle': openState }"></lay-icon>
 | 
			
		||||
          <lay-icon
 | 
			
		||||
            type="layui-icon-triangle-d"
 | 
			
		||||
            :class="{ triangle: openState }"
 | 
			
		||||
          ></lay-icon>
 | 
			
		||||
        </template>
 | 
			
		||||
      </lay-input>
 | 
			
		||||
      <template #content>
 | 
			
		||||
        <dl class="layui-select-options">
 | 
			
		||||
          <div class="layui-select-search" v-if="multiple">
 | 
			
		||||
            <lay-input v-model="searchValue" prefix-icon="layui-icon-search" placeholder="请搜索" size="sm"></lay-input>
 | 
			
		||||
            <lay-input
 | 
			
		||||
              v-model="searchValue"
 | 
			
		||||
              prefix-icon="layui-icon-search"
 | 
			
		||||
              placeholder="请搜索"
 | 
			
		||||
              size="sm"
 | 
			
		||||
            ></lay-input>
 | 
			
		||||
          </div>
 | 
			
		||||
          <template v-if="items">
 | 
			
		||||
            <lay-select-option v-for="(item, index) in items" v-bind="item" :key="index"></lay-select-option>
 | 
			
		||||
            <lay-select-option
 | 
			
		||||
              v-for="(item, index) in items"
 | 
			
		||||
              v-bind="item"
 | 
			
		||||
              :key="index"
 | 
			
		||||
            ></lay-select-option>
 | 
			
		||||
          </template>
 | 
			
		||||
          <slot></slot>
 | 
			
		||||
        </dl>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user