Vue3 swiper jsx 写法

背景

自己使用的是Vue3，然后写的是jsx文件，没有用vue文件的写法，网上关于jsx的写法和例子很少，自己总结的如下

vue 官网

swiperjs.com/vue

swiper API

www.swiper.com.cn/api/

swiper 例子

github.surmon.me/vue-awesome…

demo

// header
import { defineComponent } from "vue";

import { Swiper, SwiperSlide } from "swiper/vue";
// 引入核心插件和自动播放组件
import SwiperCore, { Autoplay, Pagination, Navigation } from "swiper/core"; 
import styled from "@css/header.module.scss";
import "swiper/css";
import "swiper/css/pagination";


export default defineComponent({
  name: "Header",
  setup(props) {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };

    return {
      onSwiper,
      onSlideChange,
    };
  },
  render() {
    const { swiper_h } = styled;

    const arr = ["https://makecode.trafficmanager.cn/blob/a6dd090923541b68ff64f50878f2e9f940c38d0a/static/herogallery/send-messages-radio.png", "https://makecode.trafficmanager.cn/blob/6803775786543efbbb9f6529dc6aaf34f1d27701/static/herogallery/behind-makecode-hardware.png", "https://makecode.trafficmanager.cn/blob/a6dd090923541b68ff64f50878f2e9f940c38d0a/static/herogallery/send-messages-radio.png"];

    const slots = {
      'default': () => {
        return arr.map((item) => {
          return <SwiperSlide><img src={item} alt="" /></SwiperSlide>;
        });
      },
    };
    // 使用插件，插件名放入[]中，这一行是重点
    SwiperCore.use([Autoplay, Pagination]);

    return (
      <div id="header" className="header">
        <MainMenu />
        <div className={swiper_h}>
          <Swiper
            slides-per-view={1}
            space-between={50}
            onSlideChange={() => console.log("slide change")}
            onSwiper={(swiper) => console.log(swiper)}
            v-slots={slots}
            autoplay={{
              delay: 2000, // 默认延迟3s播放下一张
              stopOnLastSlide: false, // 播放到最后一张时停止：否
              disableOnInteraction: true, // 用户操作轮播图后停止 ：是
            }}
            loop
            speed={1000}
            pagination={{
              clickable: true,
            }}
          ></Swiper>
        </div>
      </div>
    );
  },
});