vite+ts中使用＜el-carousel＞实现轮播图效果

最新推荐文章于 2024-09-20 09:15:09 发布

wlik

最新推荐文章于 2024-09-20 09:15:09 发布

阅读量604

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45220510/article/details/128535564

版权

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
const get_img_url= (name: any) => {
  return new URL(`/src/assets/img/${name}`, import.meta.url).href;
}
const data = reactive({
  img_url: [
    { url: get_img_url("login1.jfif") },
    { url: get_img_url("login2.jfif") },
    { url: get_img_url("login3.jfif") },
    { url: get_img_url("login4.jfif") },
  ],
});
const { img_url } = toRefs(data)
</script>

<template>
  <div class="login_body">
        <el-carousel>
          <el-carousel-item v-for="item in img_url" :key="item">
            <img :src="item.url" />
          </el-carousel-item>
        </el-carousel>
  </div>
</template>

<style scoped>

</style>