Zenn
🧪

Vue3 + Typescript で作る画像スライダーっぽいやつ

2022/07/12に公開
TypeScript
Vue 3
tech

動機

  • vue3を試していた。

環境

  • vue3 composition api
  • Vite
  • typescript

コード

src/components/modules/ImageSlider.vue

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import image1 from '@images/image1.jpg';
  import image2 from '@images/image2.jpg';
  import image3 from '@images/image3.jpg';

  const images: string[] = [image1, image2, image3];
  const imageAmount: number = images.length;
  let currentImageIndex = ref<number>(0);

  onMounted(() => {
    setInterval(() => {
      if(currentImageIndex.value < imageAmount - 1) currentImageIndex.value++;
      else currentImageIndex.value = 0;
    }, 4000)
  })
</script>
<template>
  <div>
    <img :src="images[currentImageIndex]" />
  </div>
</template>



@imagesを使うためにvite.config.tsとtsconfig.jsonにaliasを追記(普通にパス指定してimportしてもいい)

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@images': path.resolve(__dirname, 'src/assets/images'),
    }
  }
})

pathが入っていなかったのでインストール

$ npm i -D @types/node

tsconfig.json

{
  "compilerOptions": {
    ///省略////
    "baseUrl": "src",
    "paths": {
      "@images/*": ["assets/images/*"],
    },
    ///省略///
  }

もっといい書き方があるとは思うが、上記で動いた。
スライダーとかどうでもよくて、Vue3のsetupが素晴らしい。書き心地最高でした。
なんかReactっぽいなぁ。。。
てかスライドはしてないし。。。

Discussion

ログインするとコメントできます