@fesjs/fes-design/es/pagination/sizes.js

fes-design for PC

import { defineComponent, createVNode } from 'vue';
import getPrefixCls from '../_util/getPrefixCls';
import { useNormalModel } from '../_util/use/useModel';
import { UPDATE_MODEL_EVENT } from '../_util/constants';
import FSelect from '../select/select.js';
import FOption from '../select/option';
import { useLocale } from '../config-provider/useLocale';
import { COMPONENT_NAME } from './const';

const prefixCls = getPrefixCls('pagination');
const pagerSizeProps = {
  modelValue: {
    type: Number,
    default: 10
  },
  pageSizeOption: {
    type: Array
  }
};
var sizes = defineComponent({
  name: COMPONENT_NAME.PAGINATION_SIZES,
  components: {
    FSelect,
    FOption
  },
  props: pagerSizeProps,
  emits: [UPDATE_MODEL_EVENT],
  setup(props, _ref) {
    let {
      emit
    } = _ref;
    const [pageSize] = useNormalModel(props, emit);
    const {
      t
    } = useLocale();
    const renderOptions = () => props.pageSizeOption && props.pageSizeOption.map(item => createVNode(FOption, {
      "key": item,
      "value": item,
      "label": `${item}${t('pagination.pageSize')}`
    }, null));
    return () => createVNode("div", {
      "class": `${prefixCls}-size`
    }, [createVNode(FSelect, {
      "class": `${prefixCls}-size-select`,
      "modelValue": pageSize.value,
      "onUpdate:modelValue": $event => pageSize.value = $event
    }, {
      default: () => [renderOptions()]
    })]);
  }
});

export { sizes as default };