[vue.js] 로드한 이미지 인스타그램 필터 기능 만들기

이번 시간은 필터 기능을 맹들기~

<!-- 필터선택페이지 -->
<div v-if="step == 1">
  <div class="upload-image" :style="`background-image:url(${이미지})`"></div>
  <div class="filters">
    <FilterBox></FilterBox>
  </div>
</div>

컨테이너 컴포넌트에서 필터박스라는 컴포넌트를 작성해주자

우엥,,.,? 우리는 그런 컴포넌트가 없는디…

그럼 만들어.

<template>
  <div class="filter-item"></div> 
</template>

<script>
export default {

}
</script>

<style>
    .filter-item {
  width: 100px;
  height: 100px;
  margin: 10px 10px 10px auto;
  padding: 8px;
  display: inline-block;
  color : white;
  background-size: cover;
  background-position : center;
}
</style>

넵넵,,,

이런식으로 디자인 했습니다

근데 어떤 칸만 생기고 조그매나게 밑에 이미지는 생성이 안된걸 볼 수 있다

걍 데이터 바인딩 해주면됨

 <FilterBox :이미지="이미지"></FilterBox>

컨테이너에서 props 처리 해주고

<template>
  <div class="filter-item" :style="`background-image:url(${이미지})`"></div> 
</template>

<script>
export default {
    name : 'FilterBox',
    props : {
        이미지 : String,
    }
}

filterbox에서 이미지를 props 등록해주고 햅틱 스트링 처리로 이미지를 등록해주면 된다

뿅..!

우리는 필터박스에서 이미지를 똑같이 밑에 조그마나게 생성되길 원하는거임

필터박스 라는 컴포넌트 생성을 하였으니 데이터 바인딩을 해야함

근데 이미지 라는 부모 컴포넌트의 데이터이니 props 처리를 해줘야함

그래서 처리 해주고 햅틱 처리도 해준거임

---

실제 인스타 처럼 필터 생성

실제 인스타는 20개의 필터가 있다고 한다…

그러면 필터박스 컴포넌트 20개 작성하거나 반복문 돌리면 될듯

그래서 필터 이름도 가져옴

바로 Container의 데이터로 저장해보자

  data(){
    return{
      필터들 : [ "aden", "_1977", "brannan", "brooklyn", "clarendon", "earlybird", "gingham", "hudson", 
"inkwell", "kelvin", "lark", "lofi", "maven", "mayfair", "moon", "nashville", "perpetua", 
"reyes", "rise", "slumber", "stinson", "toaster", "valencia", "walden", "willow", "xpro2"],
    }
  }
}

이제 데이터를 만들었으니 필터들 데이터를 활용해 반복문 사용해보자

<FilterBox v-for="(item, index) in 필터들" :key="index" :이미지="이미지"></FilterBox>

왕~ 20개나 생김ㅋ

근데 필터가 적용이 안되자나요 ㅠㅠ

그래서 라이브러리가 있습니다

ㄱㄱ

---

CSSgram

그냥 css파일 하나임

첨부만 하면 필터 효과가 생긴다고 한다

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.12/cssgram.min.css" integrity="sha512-kr3JaEexN5V5Br47Lbg4B548Db46ulHRGGwvyZMVjnghW1BKmqIjgEgVHV8D7V+Cbqm/VBgo3Rcbtv+mGLoWXA==" crossorigin="anonymous" />

그냥 이거 index.html에 넣으면댐

이제 다시 필터박스 컴포넌트로 돌아가서 직접해부장

필터의 이름을 클래스 명으로만 변경하면 된다고 함

이런식으로 필터박스 클래스 앞에 필터명을 적어주면 바뀐당

근데 뭔가 하나하나 다 적용하고 싶은딩…

---

찐 인스타그램 처럼 하나하나 필터를 적용해보자

그냥 데이터 바인딩 하면댐

<!-- 필터선택페이지 -->
<div v-if="step == 1">
  <div class="upload-image" :style="`background-image:url(${이미지})`"></div>
  <div class="filters">
    <FilterBox v-for="(필터, index) in 필터들" :key="index" :이미지="이미지" :필터="필터"></FilterBox>
  </div>
</div>

우리는 이미 반복문에서 필터들이라는 요소를 사용해서 돌리고 있었음

그럼 a를 필터로 바꾸고 데이터 바인딩과 props를 진행 시켜준다면 될듯

<template>
  <div :class="필터 +' filter-item'" :style="`background-image:url(${이미지})`"></div> 
</template>

반복문이 돌면서 필터의 이름도 같이 바뀌니 저렇게 사용하면됨

뒤에 필터 아이템은 상수여야 하니 + 하고 ‘’처리 해주면 된다.

데이터 바인딩 하니 : 처리도 해줘야함

성공~