ivue-material-plus

Version:

A high quality UI components Library with Vue.js

1 lines • 5.44 kB

Source Map (JSON)

{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-skeleton/index.vue"],"sourcesContent":["<template>\r\n \r\n <template v-if=\"throttledLoading\">\r\n <div :class=\"wrapperClasses\" v-bind=\"$attrs\">\r\n \r\n <template v-for=\"item in total\" :key=\"item\">\r\n <slot v-if=\"loading\" :key=\"item\" name=\"template\">\r\n \r\n <skeleton-item\r\n v-for=\"(_, index) in isNumber(paragraph)\r\n ? paragraph\r\n : paragraph.rows\"\r\n :class=\"paragraphClasses(index)\"\r\n :style=\"paragraphStyles(index)\"\r\n :key=\"index\"\r\n type=\"p\"\r\n ></skeleton-item>\r\n </slot>\r\n </template>\r\n </div>\r\n </template>\r\n \r\n <template v-else>\r\n <slot v-bind=\"$attrs\"></slot>\r\n </template>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, toRef, computed } from 'vue';\r\nimport { isNumber } from '@vueuse/core';\r\nimport { isArray, isString } from '@vue/shared';\r\n\r\nimport { useThrottleRender } from '../../hooks';\r\n\r\nimport SkeletonItem from '../ivue-skeleton-item/index.vue';\r\n\r\nconst prefixCls = 'ivue-skeleton';\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n props: {\r\n /**\r\n * 是否显示加载结束后的 DOM 结构\r\n *\r\n * @type {Boolean}\r\n */\r\n loading: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n /**\r\n * 渲染延迟（以毫秒为单位）\r\n *\r\n * @type {Number}\r\n */\r\n throttle: {\r\n type: Number,\r\n default: 0,\r\n },\r\n /**\r\n * 渲染多少个 template, 建议使用尽可能小的数字\r\n *\r\n * @type {Number}\r\n */\r\n total: {\r\n type: Number,\r\n default: 1,\r\n },\r\n /**\r\n * 骨架屏段落数量\r\n *\r\n * @type {Number | Object}\r\n */\r\n paragraph: {\r\n type: [Number, Object],\r\n default: 4,\r\n },\r\n /**\r\n * 是否使用动画\r\n *\r\n * @type {Boolean}\r\n */\r\n animated: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n },\r\n setup(props) {\r\n // 节流渲染\r\n const throttledLoading = useThrottleRender(\r\n toRef(props, 'loading'),\r\n props.throttle\r\n );\r\n\r\n // computed\r\n\r\n // 外层样式\r\n const wrapperClasses = computed(() => {\r\n return [\r\n prefixCls,\r\n {\r\n 'is-animated': props.animated,\r\n },\r\n ];\r\n });\r\n\r\n // methods\r\n\r\n // 段落class\r\n const paragraphClasses = (index: number) => {\r\n const _paragraph = isNumber(props.paragraph)\r\n ? props.paragraph\r\n : props.paragraph.rows;\r\n\r\n const obj = {\r\n [`${prefixCls}--paragraph`]: true,\r\n // 第一个\r\n ['is-first']: index === 0,\r\n // 最后一个\r\n ['is-last']: index === _paragraph - 1 && _paragraph > 1,\r\n };\r\n\r\n return obj;\r\n };\r\n\r\n // 段落style\r\n const paragraphStyles = (index: number) => {\r\n const obj: {\r\n width?: number | string;\r\n } = {};\r\n\r\n // 不是NUMBER\r\n if (\r\n !isNumber(props.paragraph) &&\r\n props.paragraph.width &&\r\n isArray(props.paragraph.width)\r\n ) {\r\n let width = props.paragraph.width[index];\r\n\r\n if (props.paragraph.width.length < props.paragraph.rows) {\r\n width = props.paragraph.width[0];\r\n }\r\n\r\n // number\r\n if (isNumber(width)) {\r\n obj.width = `${width}px`;\r\n }\r\n // string\r\n else if (isString(width)) {\r\n obj.width = width;\r\n }\r\n }\r\n\r\n return obj;\r\n };\r\n\r\n return {\r\n prefixCls,\r\n\r\n // data\r\n throttledLoading,\r\n\r\n // computed\r\n wrapperClasses,\r\n\r\n // methods\r\n isNumber,\r\n paragraphClasses,\r\n paragraphStyles,\r\n };\r\n },\r\n components: {\r\n SkeletonItem,\r\n },\r\n});\r\n</script>\r\n"],"names":["_openBlock","_createElementBlock","_Fragment","_createCommentVNode","_mergeProps","_renderList","_createBlock","_normalizeClass","_normalizeStyle"],"mappings":";;;;;;SAEkBA,SAAgB,EAAA,EAAAC,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAA;AAAA,IAC9BC,mBAAA,sBAAA,CAAA;AAAA,IAAA,KAAA,gBAAA,IAAAH,SAAA,EAA2B,EAAAC,kBAAA,CAAA,OAAAG,UAAA,CAAA;AAAA,MAAU,GAAA,EAAA,CAAA;AAAA,MACnC,OAAA,IAAA,CAAA,cAAA;AAAA,KAAA,EAAA,IAAA,CAAA,MAAA,CAAA,EAAA;AAAA;iBAEc,IAAO,CAAA,EAAAH,kBAAA,CAAAC,QAAA,EAAA,MAAAG,UAAA,CAAA,IAAA,CAAA,KAAA,EAAA,CAAA,IAAA,KAAA;eAAnBL,WAWO,EAAAC,kBAAA,CAAAC,UAXoB,EAAI,GAAA,EAWxB,MAAA,EAAA;AAAA,UAAA,IAAA,CAVL,kCACA,YAQiB,EAAA,GAAA,EAAA,IAAA,EAAA,EAAA,MAAA;AAAA,YAP2CC,mBAAS,kCAAA,CAAA;AAAA,aAAkBH,UAAU,IAAI,CAAA,EAA1FC,mBAAOC,2FAGV,IAAE,EAAA,CAAA,GAAA,KAAA,KAAA;AACF,cAAA,OAAAF,SAAA,EAAA,EAAAM,WAAA,CAAE,wBAAqB,EAAA;AAAA,gBAC5B,KAAK,EAAAC,cAAA,CAAK,IAAA,CAAA,gBAAA,CAAA,KAAA,CAAA,CAAA;AAAA,gBACX,KAAK,EAAAC,cAAA,CAAG,IAAA,CAAA,eAAA,CAAA,KAAA,CAAA,CAAA;AAAA,gBAAA,GAAA,EAAA,KAAA;AAAA;;;;;OAOlB,GAAA,GAAA,CAAA;AAAA,KAAA,EADA,iBAEE,EAAA,EAA6BP,mBAAAC,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,MAAAC,mBAAA,gBAAA,CAAA;AAAA;;;;;;;;"}