뚭

DropDownButtonCompent는 드롭다운버튼이고요. 

 MouseComponent는 마우스 포인터 및 커서 컴포넌트입니다.

마우스를 커스텀할수 있게 컴포넌트들을 만들어봤습니다. 

DropDownButtonCompent랑 MouseComponent를 만드는데 시간이 걸렸네요. ㅎㅎ 

<template>
  <div>
    <div class="border_area">
      <div class="drop-down-menu" >Border Color</div>
      <DropDownButtonComponent id="dropDown1" :categories="categories1" @CustomEventChanged="(msg) => this.borderColorValue = msg"/>
      <div class="drop-down-menu">Border Shape</div>
      <DropDownButtonComponent id="dropDown2" :categories="categories2" @CustomEventChanged="(msg) => this.shapeBorder = msg"/>
      <div class="drop-down-menu">Pointer Color</div>
      <DropDownButtonComponent id="dropDown3" :categories="categories1" @CustomEventChanged="(msg) => this.pointerColorValue = msg"/>
    </div>
    <div class="mouse_background">
      <MouseComponent :border-color="this.borderColorValue" :pointer-color="this.pointerColorValue" :border-shape="this.shapeBorder" />
    </div>
  </div>
</template>

<script>
import MouseComponent from "../commonComponents/mouseComponent";
import DropDownButtonComponent from "../commonComponents/DropDownButtonComponent";
export default {
  name: "TesterMouseCursor",
  components: {DropDownButtonComponent, MouseComponent},
  data(){
    return {
      borderColorValue : 'fff',
      pointerColorValue : 'fff',
      shapeBorder: 100,
      categories1: [
           {id: 'fff', name:"하양"},
           {id: 'ff0000', name:"빨강"},
           {id: '00ff00', name:"녹색"},
           {id: '0000ff', name:"파랑"},
      ],
      categories2: [
          {id: 100, name:"동그라미"},
          {id: 0, name:"네모"},
        ],
    }
  },
}
</script>

<style scoped>
  .mouse_background{
    background:black;
  }
  .border_area {
    width: 300px;
    height: 300px;
    background: gray;
  }
  .drop-down-menu{
    font-size: 10px;
    color: white;
  }
</style>

ImageSliderCompoenet 를 만들어서 자유로운  사이즈, 이미지량, 속도를 커스텀할수 있도록 만들어봤다. 

Vue 독학이라 쉽진 않네요~

<template>
  <div >
    <div class="horizontal_area">
      <ImageSliderComponent :img-list=imgList1 :p-height-data="400" :p-width-data="400" :p-trans-data="-400"  :b-check-horiz=false :p-second="0.5"></ImageSliderComponent>
      <ImageSliderComponent :img-list=imgList2 :p-height-data="200" :p-width-data="200" :p-trans-data="200" :b-check-horiz=false :p-second="5"></ImageSliderComponent>
    </div>
    <div class="horizontal_area">
      <ImageSliderComponent :img-list=imgList3 :p-height-data="100" :p-width-data="100" :p-trans-data="-100" :b-check-horiz=true :p-second="2"></ImageSliderComponent>
      <ImageSliderComponent :img-list=imgList4 :p-height-data="100" :p-width-data="100" :p-trans-data="100" :b-check-horiz=true :p-second="4"></ImageSliderComponent>
    </div>
    <div class="horizontal_area">
      <ImageSliderComponent :img-list=imgList5 :p-height-data="200" :p-width-data="200" :p-trans-data="-200" :b-check-horiz=false :p-second="1.25"></ImageSliderComponent>
      <ImageSliderComponent :img-list=imgList6 :p-height-data="200" :p-width-data="200" :p-trans-data="200" :b-check-horiz=true :p-second="8"></ImageSliderComponent>
    </div>
  </div>
</template>

<script>
import ImageSliderComponent from "../mainComponents/ImageSliderComponent";
export default {
  name: "Tester",
  components: {ImageSliderComponent},
  data () {
    return {
      imgList1: [
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://i.etsystatic.com/8800859/r/il/80b642/1645517321/il_570xN.1645517321_cbxw.jpg',
        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrHbY4UAdm3s05D7ZqTIJHl1B1SmND4HEd3VeoiuzR7fAaClmA_NGN4DL7upgjVjai8lE&usqp=CAU',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000',
        'https://i.icanvas.com/list-square/akitas.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
      ],
      imgList2: [
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0i9I6AMEZ9jjN0beTqDk_XOyjWzgFISZXCBvd5Va-WkDvkTXHs9fOYmKGy6AGCO7ci_Y&usqp=CAU',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://i.pinimg.com/originals/d5/b2/02/d5b202e34b196e430d737b713a2164de.jpg',
      ],
      imgList3: [
        'https://images.fineartamerica.com/images-medium-large-5/colorful-dog-art-heart-and-soul-by-sharon-cummings-sharon-cummings.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://i.pinimg.com/originals/66/9d/c1/669dc1fbb3100a780fbc2a1eb65f06d5.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/1-colorful-long-haired-cat-art-peggy-collins.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000'
      ],
      imgList4: [
        'https://i.pinimg.com/originals/fb/55/24/fb55244036ea68a2e511dd86917582f5.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000'
      ],
      imgList5: [
        'https://static.vecteezy.com/system/resources/previews/002/492/339/original/abstract-cat-pet-portrait-painting-vector.jpg',
        'https://royalthaiart.com/wp-content/uploads/2022/02/Dog-Painting.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://i.etsystatic.com/8800859/r/il/918819/1903524852/il_570xN.1903524852_ruxb.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000'
      ],
      imgList6: [
        'https://cdn.shopify.com/s/files/1/0017/7461/6627/products/abstract-cat-diamond-art-painting-30603514708161_2048x2048.jpg?v=1631438728',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151676383.jpg?w=2000',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1151632343.jpg?w=2000',
        'https://i.ebayimg.com/images/g/RHsAAOSwIvRgIbe0/s-l500.jpg',
        'https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2019/09/shutterstock_1429964489.jpg?w=2000'
      ],
    }
  }
}
</script>

<style scoped>

</style>

귀엽죵 
흐~ 회사다니면서 1시간이상 공부하기 힘드네요 ㅎㅎ 

스프링 공부겸
일단 앞은 그대로 가져오고 
 css같은 경우에는 귀찮으니 네이버에 있는거 그대로 사용할 예정이다 ㅎㅎ 
일단 검색란 로고 완료