various-ui

Version:

This is a test version of the Vue 3 component library

1 lines • 4.29 kB

Source Map (JSON)

{"version":3,"file":"index.vue2.mjs","sources":["../../../../../packages/components/carousel/default/index.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent as __MACROS_defineComponent } from \"vue\";\nexport default /*#__PURE__*/ __MACROS_defineComponent({ name: \"UiCarousel\" });\n</script>\n<template>\r\n <div class=\"ui-carousel\" :class=\"className\" :style=\"style\" v-on=\"ons.main\">\r\n \r\n <div class=\"ui-carousel-main\" ref=\"main\">\r\n <div class=\"ui-carousel-container\" ref=\"container\" v-on=\"ons.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-carousel-control ui-carousel-left-control\" @click=\"switchCarousel(active - 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-carousel-control ui-carousel-right-control\" @click=\"switchCarousel(active + 1)\">\r\n <UiIcon name=\"arrow\" />\r\n </div>\r\n </slot>\r\n\r\n \r\n <div class=\"ui-carousel-schedules\" v-if=\"pagination\">\r\n <template v-for=\"(value, index) in childrens\">\r\n <div class=\"ui-carousel-schedule\" :class=\"{ active: index == active }\" @click=\"switchCarousel(index, value)\"></div>\r\n </template>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\n//* 资源引入\r\nimport { UiCarouselPropsOption, UiCarouselEmits } 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(UiCarouselPropsOption);\r\nconst emits = defineEmits(UiCarouselEmits);\r\n\r\nconst { ons, refs, watchs, methods, computeds, variable } = useComposable(define, emits);\r\nconst { main, active, container, childrens } = refs;\r\nconst { switchCarousel, switchBack, switchNext, init } = methods;\r\nconst { style, className, isLastControl, isFirstControl } = computeds;\r\n\r\n//* 挂载函数\r\nonMounted(() => {\r\n variable.observer = new ResizeObserver(() => methods.init());\r\n if (main.value) {\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 watchs.stopAutoPlay && watchs.stopAutoPlay();\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,cAAc,CAAA,CAAA;;;;;;AA4C5E,IAAA,MAAM,MAAS,GAAA,OAAA,CAAA;AACf,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAA;AAEd,IAAM,MAAA,EAAE,GAAK,EAAA,IAAA,EAAM,MAAQ,EAAA,OAAA,EAAS,WAAW,QAAS,EAAA,GAAI,aAAc,CAAA,MAAA,EAAQ,KAAK,CAAA,CAAA;AACvF,IAAA,MAAM,EAAE,IAAA,EAAM,MAAQ,EAAA,SAAA,EAAW,WAAc,GAAA,IAAA,CAAA;AAC/C,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;AACZ,MAAA,QAAA,CAAS,WAAW,IAAI,cAAA,CAAe,MAAM,OAAA,CAAQ,MAAM,CAAA,CAAA;AAC3D,MAAA,IAAI,KAAK,KAAO,EAAA;AACZ,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;AAE1D,MAAO,MAAA,CAAA,YAAA,IAAgB,OAAO,YAAa,EAAA,CAAA;AAAA,KAC9C,CAAA,CAAA;AAGD,IAAA,CAAA;AAEA,IAAA,QAAA,CAAa,EAAE,IAAA,EAAM,UAAY,EAAA,UAAA,EAAY,gBAAgB,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}