ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 7.29 kB
Source Map (JSON)
{"version":3,"file":"options.mjs","sources":["../../../../../src/components/ivue-page/options.vue"],"sourcesContent":["<template>\r\n <div :class=\"prefixCls\">\r\n <!-- 显示分页 -->\r\n <div :class=\"`${prefixCls}--sizer`\" v-if=\"showSizer\">\r\n <ivue-select\r\n v-model=\"currentPageSize\"\r\n :placement=\"placement\"\r\n :transfer=\"transfer\"\r\n :disabled=\"disabled\"\r\n :transferClassName=\"`${prefixCls}--sizer__dropdown`\"\r\n @on-change=\"handleChangeSize\"\r\n >\r\n <ivue-option\r\n v-for=\"(item, index) in pageSizeOpts\"\r\n :key=\"index\"\r\n :value=\"(item as string | number)\"\r\n >{{ `${item} ${pageSizeText}` }}</ivue-option\r\n >\r\n </ivue-select>\r\n </div>\r\n <!-- 显示电梯 -->\r\n <div :class=\"`${prefixCls}--elevator`\" v-if=\"showElevator\">\r\n <span>{{ elevatorText[0] }}</span>\r\n <!-- 输入框 -->\r\n <input\r\n :class=\"`${prefixCls}--elevator__input`\"\r\n type=\"text\"\r\n :value=\"currentPage\"\r\n :disabled=\"disabled\"\r\n autocomplete=\"off\"\r\n spellcheck=\"false\"\r\n @keyup.enter=\"handleChangePage\"\r\n />\r\n <span>{{ elevatorText[1] }}</span>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, ref, watch, getCurrentInstance } from 'vue';\r\nimport { IvueSelect, IvueOption } from '../ivue-select/index';\r\nimport { isValueNumber } from '../../utils/helpers';\r\n\r\n// type\r\nimport type { Props } from './types/options';\r\n\r\nconst prefixCls = 'ivue-page-options';\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n emits: ['on-size', 'on-page'],\r\n props: {\r\n /**\r\n * 显示分页\r\n *\r\n * @type {Boolean}\r\n */\r\n showSizer: {\r\n type: Boolean,\r\n },\r\n /**\r\n * 每页条数\r\n *\r\n * @type {Number}\r\n */\r\n pageSize: {\r\n type: Number,\r\n },\r\n /**\r\n * 条数切换弹窗的展开方向，可选值为 bottom 和 top\r\n *\r\n * @type {String}\r\n */\r\n placement: {\r\n type: String,\r\n },\r\n /**\r\n * 是否将弹层放置于 body 内，在 Tabs、\r\n * 带有 fixed 的 Table 列内使用时，\r\n * 建议添加此属性，它将不受父级样式影响，\r\n * 从而达到更好的效果\r\n *\r\n * @type {Boolean}\r\n */\r\n transfer: {\r\n type: Boolean,\r\n default() {\r\n const global = getCurrentInstance().appContext.config.globalProperties;\r\n\r\n return !global.$IVUE || global.$IVUE.transfer === ''\r\n ? false\r\n : global.$IVUE.transfer;\r\n },\r\n },\r\n /**\r\n * 是否禁用\r\n *\r\n * @type {Boolean}\r\n */\r\n disabled: {\r\n type: Boolean,\r\n },\r\n /**\r\n * 页数选择选项\r\n *\r\n * @type {Array}\r\n */\r\n pageSizeOpts: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n /**\r\n * 页数选择文字\r\n *\r\n * @type {Array}\r\n */\r\n pageSizeText: {\r\n type: String,\r\n },\r\n /**\r\n * 是否显示电梯\r\n *\r\n * @type {Boolean}\r\n */\r\n showElevator: {\r\n type: Boolean,\r\n },\r\n /**\r\n * 电梯文字\r\n *\r\n * @type {Array}\r\n */\r\n elevatorText: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n /**\r\n * 当前页数\r\n *\r\n * @type {Number}\r\n */\r\n currentPage: {\r\n type: Number,\r\n },\r\n /**\r\n * 总页数\r\n *\r\n * @type {Number}\r\n */\r\n allPages: {\r\n type: Number,\r\n },\r\n },\r\n setup(props: Props, { emit }) {\r\n // 当前每页条数\r\n const currentPageSize = ref<number>(props.pageSize);\r\n\r\n // methods\r\n\r\n // 分页条数改变\r\n const handleChangeSize = (value: any) => {\r\n emit('on-size', value);\r\n };\r\n\r\n // 页数改变\r\n const handleChangePage = ({ target }) => {\r\n // 去除前后空格\r\n let value = target.value.trim();\r\n let page = 0;\r\n\r\n // 是否是纯数字\r\n if (isValueNumber(value)) {\r\n value = Number(value);\r\n\r\n // 不是当前页数\r\n if (value != props.currentPage) {\r\n const allPages = props.allPages;\r\n\r\n // 超过最大页数显示最大页数\r\n if (value > allPages) {\r\n page = allPages;\r\n }\r\n // 当前输入的值\r\n else {\r\n page = value;\r\n }\r\n }\r\n }\r\n // 不是数字默认第一页\r\n else {\r\n page = 1;\r\n }\r\n\r\n // 有页数\r\n if (page) {\r\n emit('on-page', page);\r\n\r\n // 重新赋值\r\n target.value = page;\r\n }\r\n };\r\n\r\n // watch\r\n\r\n // 监听每页条数\r\n watch(\r\n () => props.pageSize,\r\n (value) => {\r\n currentPageSize.value = value;\r\n }\r\n );\r\n\r\n return {\r\n prefixCls,\r\n\r\n // data\r\n currentPageSize,\r\n\r\n // methods\r\n handleChangeSize,\r\n handleChangePage,\r\n };\r\n },\r\n components: {\r\n IvueSelect,\r\n IvueOption,\r\n },\r\n});\r\n</script>\r\n"],"names":["_resolveComponent","_normalizeClass","_createCommentVNode","_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_createElementVNode","_toDisplayString"],"mappings":";;;;;;;iCACEA,iBAkCM,aAAA,CAAA,CAAA;;IAjCJ,KAAA,EAAaC,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;AAAA,GAC6B,EAAA;AAAA,IAA1CC,mBAAA,4BAAA,CAAA;AAAA,IAAA,IAAA,CAAA,SAAA,IAAAC,SAAW,EAAA,qBAAK,KAAS,EAAA;AAAA,MAAA,GAAA,EAAA,CAAA;AAAA,MACvB,KAcc,EAAAF,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,OAAA,CAAA,CAAA;AAAA,KAAA,EAAA;AAAA;QAZX,YAAW,IAAA,CAAA,eAAA;AAAA,QACX,qBAAA,EAAkB,OAAA,CAAA,CAAA,KAAA,MAAA,CAAA,KAAA,CAAA,MAAA,KAAA,KAAA,eAAA,GAAA,MAAA,CAAA;AAAA,QAClB,WAAU,IAAA,CAAA,SAAA;AAAA,QACV,UAAA,IAAA,CAAA,QAAA;AAAA,QACA,UAAS,IAAE,CAAA,QAAA;AAAA,QAAA,iBAAA,EAAA,GAAA,IAAA,CAAA,SAAA,CAAA,iBAAA,CAAA;AAAA;;;qBAIJ,IAAK,CAAA,EAAAG,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAAA,IAAA,CAAA,YAAA,EAAA,CAAA,IAAA,EAAA,KAAA,KAAA;YACL,OAAAH,SAAA,EAAO,EAAAI,WAAA,CAAA,sBAAA,EAAA;AAAA,cAAA,GAAA,EAAA,KAAA;AAAA;;;;;;;;;;;KAKnB,EAAA,CAAA,CAC6C,IAAAL,kBAAA,CAAY,QAAA,IAAA,CAAA;AAAA,IAAzDA,mBAAA,4BAAA,CAAA;AAAA,IAAA,IAAA,CAAA,YAAA,IAAAC,SAAW,EAAA,qBAAK,KAAS,EAAA;AAAA,MAAA,GAAA,EAAA,CAAA;AAAA,MACvB,KAAA,EAAAF,cAAA,CAAkC,CAAzB,EAAA,IAAA,CAAA,SAAA,CAAA,UAAA,CAAA,CAAA;AAAA,KACT,EAAA;AAAA,MACAO,kBAAA,CAQE,QAAA,IAAA,EAAAC,eAAA,CAAA,KAAA,YAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA;AAAA,MAPMP,mBAAA,sBAAA,CAAA;AAAA,MACKM,mBAAA,OAAA,EAAA;AAAA,QACV,KAAO,EAAAP,cAAA,CAAW,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,QAClB,IAAA,EAAA,MAAA;AAAA,QACD,OAAY,IAAA,CAAA,WAAA;AAAA,QACZ,UAAU,IAAC,CAAA,QAAA;AAAA,QACV,YAAK,EAAA,KAAA;AAAA,QAAA,UAAA,EAAA,OAAA;AAAA,QAER,SAAA,MAAA,CAAA,CAAA,CAAA,KAAkC,sBAAzB,GAAA,IAAA,KAAY,IAAA,CAAA,gBAAA,IAAA,KAAA,gBAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA;AAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAAA;;;;;;;;"}