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

fes-design for PC

import { defineComponent, ref, toRefs, createVNode } from 'vue';
import getPrefixCls from '../_util/getPrefixCls';
import InputInner from '../input/inputInner.js';
import { useLocale } from '../config-provider/useLocale';
import { COMPONENT_NAME } from './const';

const prefixCls = getPrefixCls('pagination');
var jumper = defineComponent({
  name: COMPONENT_NAME.PAGINATION_JUMPER,
  components: {
    InputInner
  },
  props: {
    total: {
      type: Number,
      default: 0
    }
  },
  emits: ['change'],
  setup(props, _ref) {
    let {
      emit
    } = _ref;
    const current = ref();
    const {
      total
    } = toRefs(props);
    const handleChange = val => {
      const cur = Number.parseInt(val, 10);
      if (Number.isNaN(cur)) {
        return;
      }
      const currentPage = cur < 1 ? 1 : cur > total.value ? total.value : cur;
      current.value = currentPage;
      emit('change', currentPage);
    };
    const {
      t
    } = useLocale();
    return () => createVNode("div", {
      "class": `${prefixCls}-jumper`
    }, [createVNode("span", {
      "class": `${prefixCls}-jumper-item`
    }, [t('pagination.goto')]), createVNode(InputInner, {
      "class": `${prefixCls}-jumper-input`,
      "modelValue": current.value,
      "onUpdate:modelValue": $event => current.value = $event,
      "placeholder": "",
      "onChange": handleChange
    }, null), createVNode("span", {
      "class": `${prefixCls}-jumper-item`
    }, [t('pagination.pageClassifier')])]);
  }
});

export { jumper as default };