various-ui
Version:
This is a test version of the Vue 3 component library
1 lines • 3.83 kB
Source Map (JSON)
{"version":3,"file":"index.vue2.mjs","sources":["../../../../../packages/components/carousel/multiple-view/index.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({ name: \"UiCarouselMultipleView\" });\n</script>\n<template>\r\n <div class=\"ui-mv-carousel\" :class=\"className\" :style=\"style\">\r\n <!-- 轮播图容器, 用来控制轮播滚动 -->\r\n <div class=\"ui-mv-carousel-main\" ref=\"main\">\r\n <div class=\"ui-mv-carousel-container\" ref=\"container\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n\r\n <!-- 轮播图左侧箭头 -->\r\n <slot name=\"arrow-back\" v-if=\"isFirstControl\">\r\n <div class=\"ui-mv-carousel-control ui-mv-carousel-left-control\" @click=\"switchCarousel(-1)\">\r\n <UiIcon name=\"arrow\" />\r\n </div>\r\n </slot>\r\n\r\n <!-- 轮播图右侧箭头 -->\r\n <slot name=\"arrow-next\" v-if=\"isLastControl\">\r\n <div class=\"ui-mv-carousel-control ui-mv-carousel-right-control\" @click=\"switchCarousel(1)\">\r\n <UiIcon name=\"arrow\" />\r\n </div>\r\n </slot>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\n//* 资源引入\r\nimport { UiCarouselMultipleViewPropsOption, UiCarouselMultipleViewEmits } from \"./index\";\r\nimport { useComposable } from \"./src/composable\";\r\nimport { onMounted, onBeforeUnmount } from \"vue\";\r\n\r\n//* 组件引入\r\nimport UiIcon from \"@various/components/icon\";\r\n\r\n//* 获取组件属性\r\nconst define = defineProps(UiCarouselMultipleViewPropsOption);\r\nconst emits = defineEmits(UiCarouselMultipleViewEmits);\r\n\r\n//* 组合函数\r\nconst { refs, methods, computeds, variable } = useComposable(define, emits);\r\nconst { main, container } = refs;\r\nconst { switchCarousel, switchBack, switchNext, init } = methods;\r\nconst { style, className, isLastControl, isFirstControl } = computeds;\r\n\r\n//* 挂载函数\r\nonMounted(() => {\r\n //* 检测是否向下执行\r\n if (!main.value) return;\r\n else {\r\n variable.observer = new ResizeObserver(() => methods.init());\r\n variable.observer.observe(main.value);\r\n }\r\n});\r\n\r\n//* 卸载函数\r\nonBeforeUnmount(() => {\r\n //* 注销挂载的Observer\r\n variable.observer && variable.observer.disconnect();\r\n //* 清除残留的定时器\r\n refs.autoTimer.value && clearInterval(refs.autoTimer.value);\r\n});\r\n\r\n//* 组件配置\r\n;\r\n//* 函数导出\r\ndefineExpose({ init, switchBack, switchNext, switchCarousel });\r\n</script>\r\n"],"names":["__MACROS_defineComponent"],"mappings":";;;;;AAEA,MAA6B,WAAA,GAAAA,eAAA,CAAyB,EAAE,IAAA,EAAM,0BAA0B,CAAA,CAAA;;;;;;AAqCxF,IAAA,MAAM,MAAS,GAAA,OAAA,CAAA;AACf,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAA;AAGd,IAAM,MAAA,EAAE,MAAM,OAAS,EAAA,SAAA,EAAW,UAAa,GAAA,aAAA,CAAc,QAAQ,KAAK,CAAA,CAAA;AAC1E,IAAM,MAAA,EAAE,IAAM,EAAA,SAAA,EAAc,GAAA,IAAA,CAAA;AAC5B,IAAA,MAAM,EAAE,cAAA,EAAgB,UAAY,EAAA,UAAA,EAAY,MAAS,GAAA,OAAA,CAAA;AACzD,IAAA,MAAM,EAAE,KAAA,EAAO,SAAW,EAAA,aAAA,EAAe,gBAAmB,GAAA,SAAA,CAAA;AAG5D,IAAA,SAAA,CAAU,MAAM;AAEZ,MAAI,IAAA,CAAC,KAAK,KAAO,EAAA,OAAA;AAAA,WACZ;AACD,QAAA,QAAA,CAAS,WAAW,IAAI,cAAA,CAAe,MAAM,OAAA,CAAQ,MAAM,CAAA,CAAA;AAC3D,QAAS,QAAA,CAAA,QAAA,CAAS,OAAQ,CAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AAAA,OACxC;AAAA,KACH,CAAA,CAAA;AAGD,IAAA,eAAA,CAAgB,MAAM;AAElB,MAAS,QAAA,CAAA,QAAA,IAAY,QAAS,CAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAElD,MAAA,IAAA,CAAK,SAAU,CAAA,KAAA,IAAS,aAAc,CAAA,IAAA,CAAK,UAAU,KAAK,CAAA,CAAA;AAAA,KAC7D,CAAA,CAAA;AAGD,IAAA,CAAA;AAEA,IAAA,QAAA,CAAa,EAAE,IAAA,EAAM,UAAY,EAAA,UAAA,EAAY,gBAAgB,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}