Post

[Vue] 인스타그램 필터 cssgram

Posted
By songmiok
1 min read

cssgram

index.html

1
2
3
4
5

(index.html)

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">
</head>

나는 cssgram.css 파일을 다운로드하여 /assets/css 폴더에 넣고
App.vue CSS 영역에 import 해줬다.

1
2
3

(App.vue)

@import './assets/css/cssgram.css';

인스타그램 필터명을 data로 넣어준 후

1
2
3
4
5
6
7
8
9
10
11
12

(Container.vue)

export default {
  name: 'compContainer',
  data(){
    return {
      filter: [ "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"],
    }
  },
}

v-for로 필터 갯수만큼 FilterBox component를 넣어준다.

1
2
3
4
5
6
7

(Container.vue)

<ul>
  <li class="filter-1" v-for="(a,i) in filter" :key="i">
    <FilterBox :uploadImage="uploadImage" :filter="a"></FilterBox>
  </li>
</ul>

FilterBox.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

(FilterBox.vue)

<template>
  <div class="filter-item" :class="`${filter}`" :style="{ backgroundImage : `url(${uploadImage})` }"></div> 
</template>

<script>
export default {
  name: 'compFilterBox',
  props: {
    uploadImage: String,
    filter: String,
  }
}
</script>

<style scoped>
.filter-item {display:block; width:10rem; height:10rem; background-size:cover; background-position:center;}
</style>
JavaScript, Vue
This post is licensed under CC BY 4.0 by the author.