Vue Mouse 포인터 커스텀

 

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>