MES手机端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

item.vue 1.1 KiB

3 weeks ago
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <script lang="ts" setup>
  2. import { useStackSwiperCustomStyle, useStackSwiperItem } from './composables'
  3. const {
  4. sliderDirection,
  5. swiperItemStyle,
  6. startTouchHandle,
  7. moveTouchHandle,
  8. endTouchHandle,
  9. } = useStackSwiperItem()
  10. const { itemNs } = useStackSwiperCustomStyle()
  11. </script>
  12. // #ifdef MP-WEIXIN
  13. <script lang="ts">
  14. export default {
  15. options: {
  16. // 在微信小程序中将组件节点渲染为虚拟节点,更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
  17. virtualHost: true,
  18. },
  19. }
  20. </script>
  21. // #endif
  22. <template>
  23. <view
  24. v-if="sliderDirection === 'horizontal'"
  25. :class="[itemNs.b()]"
  26. :style="swiperItemStyle"
  27. @touchstart="startTouchHandle"
  28. @touchmove="moveTouchHandle"
  29. @touchend="endTouchHandle"
  30. >
  31. <slot />
  32. </view>
  33. <view
  34. v-if="sliderDirection === 'vertical'"
  35. :class="[itemNs.b()]"
  36. :style="swiperItemStyle"
  37. @touchstart.stop.prevent="startTouchHandle"
  38. @touchmove="moveTouchHandle"
  39. @touchend="endTouchHandle"
  40. >
  41. <slot />
  42. </view>
  43. </template>
  44. <style lang="scss" scoped>
  45. @import './theme-chalk/index.scss';
  46. </style>