[Vuejs] 이미지를 단색으로 설정할 수 있는 구성 요소 만들기

작문의 경과

https://zenn.dev/grimm_marchen/articles/7ea42fe913c9068ec1c6
위 프로젝트를 단조로운 분위기로 만들려면 먼저 이미지를 CSS로 변환하는 단조로운 구성 요소를 만들어야 한다.

구성 요소 사양

이미지를 단조로운 CSS(컬러로 전환)

이미지 크기를 광각 100%

로 설정

레이블을 블록 레벨 요소로 취급

초기 텍스트를alt 속성으로 설정

이 세 가지 요구에 부합되는 부품을 주로 제작한다.
그림의 크기는 기본적으로 100% 너비로 설정되어 있으며, 호출하기 전에 크기를 변경할 수 있습니다.
CSS는 당연히 TailWindCSS를 사용합니다
https://tailwindcomponents.com/cheatsheet/

어셈블리 생성

src/components에 ImageBox.vue라는 파일을 생성합니다.
ImageBox.vue

<template>
	<img />
</template>

<script setup="props">

</script>

태그를 청크 레벨 요소로 설정하고 광각으로 설정합니다

ImageBox.vue

<template>
+  <img class="block w-full" />
</template>

<script setup="props">

</script>

내연 수준에서 블록 수준으로 변경된 이유는 글의 일부로 다루는 경우가 거의 없기 때문이다.
폭은 호출자가 설정한 디자인이기 때문에 이미지 자체는 100%이다

클래스 바인딩

클래스 귀속을 사용하여 Filter와grayscale 스타일의class를 기술했는지 여부를 설정합니다.
ImageBox.vue

<template>
+	<img
+		class="block"
+		:class="{ filter: isFilter, grayscale: isGrayscale }"
+	/>
</template>

<script setup="props">

</script>

흥정을 통해 Filter와grayscale의 유무를 받아들이다

ImageBox.vue

<template>
+	<img
+		class="block"
+		:class="{ filter: isFilter, grayscale: isGrayscale }"
+	/>
</template>

<script setup="props">
+  import { defineProps } from "vue";
  defineProps({
+   isFilter: { type: Boolean, default: true },
+   isGrayscale: { type: Boolean, default: true },
  });
</script>

filter와 grayscale의 통과 여부isFilter와 isGrayscale 유형의 변수로 호출원에서 그림을 단색으로 설정할지 여부를 결정합니다.
기본값Boolean

이미지 파일 경로 수신

ImageBox.vue

<template>
	<img
	  class="block"
		:class="{ filter: isFilter, grayscale: isGrayscale }"
+   :src="imgItem"
	/>
</template>

<script setup="props">
  import { defineProps } from "vue";
  defineProps({
    isFilter: { type: Boolean, default: true },
    isGrayscale: { type: Boolean, default: true },
    imgItem: { type: String, default: "" },
+    altText: { type: String, default: "WEB-Image" },
  });
</script>

alt 속성 설정

같은 Strue 유형의alt 속성도 호출 원본에서 수신할 수 있습니다
alt 속성은 설정하고 잊어버리는 경우가 있기 때문에 초기값을 설정해야 합니다
ImageBox.vue

<template>
	<img
	  class="block"
	  :class="{ filter: isFilter, grayscale: isGrayscale }"
    :src="imgItem"
+		:alt="altText"
	/>
</template>

<script setup="props">
  import { defineProps } from "vue";
  defineProps({
    isFilter: { type: Boolean, default: true },
    isGrayscale: { type: Boolean, default: true },
    imgItem: { type: String, default: "" },
+   altText: { type: String, default: "WEB-Image" },
  });
</script>

### 확인 수행
호출 원본에 다음 설명을 추가합니다

<template>
	<article
		class="
			max-w-7xl
			w-full
			bg-gray-200
			sm:bg-red-200
			md:bg-yellow-200
			lg:bg-green-200
			xl:bg-blue-200
		"
	>
		<p>モノトーン画像</p>
		<ImageBox imgItem="/src/assets/images/main-img.jpg" />
		<p>モノトーン設置OFF</p>
		<ImageBox imgItem="/src/assets/images/main-img.jpg" :isFilter="false" :isGrayscale="false" />
	</article>
</template>

<script setup>
import ImageBox from "../components/ImageBox.vue";

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
</script>

총결산

나는 조립품을 쓰는 보도가 생각보다 어렵다고 생각한다.
이런 사이트를 만들고 싶다는 큰 틀의 기사를 쓴 게 좋을 것 같아요.
더 예쁜 총결산 방법을 찾으면 고칠게요.