ivue-material-plus

Version:

A high quality UI components Library with Vue.js

1 lines • 4.64 kB

Source Map (JSON)

{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-spin/index.vue"],"sourcesContent":["<template>\r\n <transition :name=\"`${prefixCls}-fade`\">\r\n <div :class=\"wrapperClass\" v-if=\"fullscreenVisible && show\">\r\n \r\n <div :class=\"`${prefixCls}-content`\">\r\n \r\n <div\r\n :class=\"`${prefixCls}-dot`\"\r\n :style=\"dotStyles\"\r\n v-show=\"!$slots.default\"\r\n ></div>\r\n \r\n <div :class=\"`${prefixCls}-text`\" v-show=\"$slots.default\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </div>\r\n </transition>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed, watch, getCurrentInstance, ref } from 'vue';\r\n\r\n// type\r\nimport { Props } from './types/spin';\r\n\r\nconst prefixCls = 'ivue-spin';\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n props: {\r\n /**\r\n * 显示\r\n *\r\n * @type {Boolean}\r\n */\r\n show: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n /**\r\n * 大小\r\n *\r\n * @type {Number,String}\r\n */\r\n size: {\r\n type: [Number, String],\r\n },\r\n /**\r\n * 是否固定需要父级有relative或absolute\r\n *\r\n * @type {Boolean}\r\n */\r\n fix: {\r\n type: Boolean,\r\n default() {\r\n const global = getCurrentInstance().appContext.config.globalProperties;\r\n\r\n return !global.$IVUE || !global.$IVUE.spin.fix\r\n ? false\r\n : global.$IVUE.spin.fix;\r\n },\r\n },\r\n /**\r\n * 全屏显示\r\n *\r\n * @type {Boolean}\r\n */\r\n fullscreen: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n },\r\n setup(props: Props) {\r\n // 使用 $IvueSpin 时显示\r\n const visible = ref<boolean>(false);\r\n\r\n // computed\r\n\r\n // 外层样式\r\n const wrapperClass = computed(() => {\r\n return [\r\n `${prefixCls}`,\r\n {\r\n [`${prefixCls}-fix`]: props.fix,\r\n },\r\n ];\r\n });\r\n\r\n // dot样式\r\n const dotStyles = computed(() => {\r\n // 大小\r\n let sizeStyle = {};\r\n\r\n // 是否有大小\r\n if (props.size) {\r\n const regexp = new RegExp(/[a-zA-Z]/g);\r\n\r\n // 是否有单位\r\n const isUnit = regexp.test(`${props.size}`);\r\n\r\n const size = !isUnit ? `${props.size}px` : props.size;\r\n\r\n // 样式\r\n sizeStyle = {\r\n height: size,\r\n width: size,\r\n };\r\n }\r\n\r\n return sizeStyle;\r\n });\r\n\r\n // 是否全屏显示\r\n const fullscreenVisible = computed(() => {\r\n if (props.fullscreen) {\r\n return visible.value;\r\n } else {\r\n return true;\r\n }\r\n });\r\n\r\n // watch\r\n\r\n // 监听显示\r\n watch(\r\n () => visible.value,\r\n (value) => {\r\n // overflow\r\n if (value) {\r\n document.body.style.overflow = 'hidden';\r\n }\r\n // 取消overflow\r\n else {\r\n document.body.style.overflow = '';\r\n }\r\n }\r\n );\r\n\r\n return {\r\n prefixCls,\r\n\r\n // data\r\n visible,\r\n\r\n // computed\r\n wrapperClass,\r\n dotStyles,\r\n fullscreenVisible,\r\n };\r\n },\r\n});\r\n</script>\r\n"],"names":["_withCtx","_openBlock","_normalizeClass","_createCommentVNode","_createElementVNode","_withDirectives","_vShow","_renderSlot"],"mappings":";;;;AACmB,SAAA,YAAK,IAAS,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;;;;IAC7B,OAAA,EAAAA,QAAA,MAAA;AAAA,MAAA,KAAA,iBAAA,IAAA,IAAA,CAAA,QAAAC,SAAW,EAAA,qBAAE,KAAY,EAAA;AAAA,QAAA,GAAA,EAAA,CAAA;AAAA,QACvB,KAAA,EAAWC,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA;AAAA,OACX,EAAA;AAAA,QAAWC,mBAAA,gBAAA,CAAA;AAAA,QAAAC,mBAAA,KAAA,EAAA;AAAA,UACT,KAAY,EAAAF,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,QAAA,CAAA,CAAA;AAAA,SAAA,EAAA;AAAA,UAEJC,mBAAA,OAAA,CAAA;AAAA,UAAAE,cAAA,CACAD,mBAAE,KAAS,EAAA;AAAA,YAAA,KAAA,EAAAF,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,IAAA,CAAA,CAAA;AAAA,iCACD,CAAA,IAAA,CAAO,SAAA,CAAA;AAAA,WAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA;AAAA,YAEzB,CAAaI,KAAA,EAAA,CAAA,IAAA,CAAA,OAAA,OAAA,CAAA;AAAA,WAAA,CAAA;AAAA,6BACF,4BAAK,CAAA;AAAA,UAAAD,cAAA,CAAAD,mBAAA,KAAA,EAAA;AAAA,YACd,KAAa,EAAAF,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAAA,WAAA,EAAA;AAAA,YAD2BK,UAAA,CAAA,IAAA,CAAA,MAAA,EAAO,SAAO,CAAA;AAAA,WAAA,EAAA,CAAA,CAAA,EAAA;AAAA;;;;;;;;;;;;"}