colexiu-project/src/components/banner/index.tsx

import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
import classes from './index.module.less'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper'
import request from '@/helpers/request'
import bannerArrow from './images/bannerArrow.png'
import bannerArrowAcitive from './images/bannerArrowAcitive.png'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'banner',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  setup(props, conent) {
    const state = reactive({
      title: props.title,
      modules: [Navigation, Pagination, Scrollbar, Autoplay,A11y ],
      bannerList: [],
      leftHover: false,
      rightHover: false
    })
    const router = useRouter()
    const onSwiper = swiper => {
      // console.log(swiper)
    }
    const onSlideChange = () => {
      // console.log('slide change')
    }
    const getBannerList = async () => {
      try {
        const res = await request.get('/api-website/open/banner/list', {
          data: {}
        })

        state.bannerList = res.data
      } catch (e) {
        console.log(e)
      }
    }
    const gotoBannerInfo = (item: any) => {
      if (item.linkUrl.indexOf('http') != -1) {
        window.open(item.linkUrl)
      } else {
        router.push({ path: item.linkUrl })
      }
    }
    onMounted(() => {
      getBannerList()
    })
    return () => (
      <>
        <div class="bannerSwiper">
          <swiper
            modules={state.modules}
            class={[classes.mySwiper, 'mySwiper']}
            slides-per-view={1}
            space-between={0}
            pagination={{  clickable: true }}
            autoplay={{
              delay: 3000,
              disableOnInteraction: false,
              loop: true,
              pauseOnMouseEnter: true,
              reverseDirection: true
            }}

            navigation={{
              nextEl: '.myprev',
              prevEl: '.mynext'
            }}
            loop={true}
            onSwiper={onSwiper}
            onSlideChange={onSlideChange}
          >
            {state.bannerList.map((item: any) => {
              return (
                <>
                  <swiper-slide>
                    <img
                      src={item.coverImage}
                      alt=""
                      class={classes.bannerImg}
                      onClick={() => {
                        gotoBannerInfo(item)
                      }}
                    />
                  </swiper-slide>
                </>
              )
            })}

            <div
              class="myprev"
              onMouseover={() => {
                state.leftHover = true
              }}
              onMouseout={() => {
                state.leftHover = false
              }}
            >
              <img
                src={state.leftHover ? bannerArrowAcitive : bannerArrow}
                alt=""
              />
            </div>
            <div
              class="mynext"
              onMouseover={() => {
                state.rightHover = true
              }}
              onMouseout={() => {
                state.rightHover = false
              }}
            >
              <img
                src={state.rightHover ? bannerArrowAcitive : bannerArrow}
                alt=""
              />
            </div>
          </swiper>
        </div>
      </>
    )
  }
})