Vue에서 사용자 지정 전환 구성 요소를 생성합니다.js.🎛

사용자 정의 구성 요소를 만드는 것은 엉망이어서는 안 된다.Vue의 네이티브 기능을 사용하여 더 좋은 것을 만들 수 있는 것은 무엇입니까!시작합시다.처음부터 사용자 정의나 수동 또는 당신이 구성 요소라고 부르고 싶은 것을 만들어 봅시다!

우리는 지금 약간의 스위치를 제조해야 한다...

뭐 공부 해요?❓

이것:

알아요, 알아요. 엉망으로 보여요. 하지만 실현에만 집중하자고요.)

사용자 지정 전환 시작🦵

1단계️⃣: 설치

Fire open your terminal:

vue create custom-toggle

만약 기계에 Vue CLI이 설치되어 있지 않다면, official website에서 설치 절차를 찾을 수 있습니다.
다른 모든 파일을 삭제하고 다음 프로젝트 구조에서 보듯이 새 파일을 만듭니다.

custom-toggle
│
└───public
│   │   index.html
└───src
│   │
│   └───components
│       │   Toggle.vue
│   │   App.vue
│   │   main.js
└───package.json

보시다시피 사용자 정의 구성 요소는/구성 요소/전환.vue 파일.

2단계️⃣: 코드 응용 프로그램.vue

이것은 우리의 입구점 구성 요소다.보시다시피 우리는 두 가지 보여줄 것이 있습니다.우선, 구성 요소 자체와 아래의 텍스트를 전환합니다. 이것은 켜든 끄든 전환 상태를 알려 줍니다.<script>에서 data() 방법으로 return을 구성 요소의 기본 상태로 설정합니다.true 또는 false이 되도록 부울 값으로 설정합니다.전환을'켜기'로 표시하고 싶기 때문에 기본값은 true입니다.
다음은 components 옵션을 사용하여 다음 단계에서 제작할 구성 요소를 등록합니다.이것은 그의 이름 appToggle입니다.올바른 가져오기를 확인합니다.그런 다음 템플릿에 등록하여 Vue의 v-model 명령을 사용하여 양방향 데이터 바인딩을 수행합니다.상태를 동적으로 검사할 수 있도록 dataToggle 속성을 전송합니다.
아래의 텍스트에 대해 우리는 <p> 표기만 가지고 있으며, template 문법의 string interpolation을 사용한다.

App.vue:

<template>
  <div>
    <app-toggle v-model="dataToggle"></app-toggle>
    <p style="text-align: center">Toggle: {{ dataToggle }}</p>
  </div>
</template>

<script>
import Toggle from "./components/Toggle";

export default {
  data() {
    return {
      dataToggle: true
    };
  },
  components: {
    appToggle: Toggle
  }
};
</script>

단계 3️⃣: 전환 인코딩

열기 전환.vue 파일.여기서 우리는 두 개의 div 요소만 필요로 한다. (사용자 정의 요소를 만들고 있기 때문에) 열기와 끄기 상태에 사용된다.이것들은 상위 toggleContainer div에 포장될 것이다.
우리의 수요에 따라 그들의 스타일을 설계하기 위해서는 각각 idon과 off을 주면 된다.적용된 전체 CSS 스타일은 기본 스타일입니다. 다음은 원하는 스타일입니다.

.toggleContainer {
  margin-top: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#on,
#off {
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background-color: lightgray;
  padding: 2px;
  text-align: center;
  margin: 10px -5px;
  cursor: pointer;
}

#on:hover,
#on.active {
  background-color: lightgreen;
}

#off:hover,
#off.active {
  background-color: lightcoral;
}

지금이 제일 좋은 부분이야.script에서 우리는 먼저 응용 프로그램에서 데이터를 전달하기 위해 props의 대상을 정의해야 한다.vue 전환.vue.우리는 부모 구성 요소의 value만 필요합니다.이것은 우리가 전달한 prop이 어떤 전환, "켜기"또는 "끄기"를 누르는지 결정하기 때문이다.동적 CSS 속성 변경 사항을 추가하는 것도 유용합니다.
위의 CSS 코드를 통해 알 수 있듯이 background-color과 active에 대해 우리는 서로 다른 hover과 #on/#off의 위류를 가지고 있다.이것들은 value 아이템에서 활성화되었습니다.그러나 이 일이 작용하기 위해서는 Vue's class/style binding feature과 v-bind 을 사용해야 한다.
이를 실현하기 위해 우리는 v-bind:class 또는 속기문법, 즉 :class을 사용할 수 있다.여기서 active 객체를 켜진 상태에서 value(dataToggle: true)으로 설정하면 꺼진 상태에서 반대의 active: !value(dataToggle: false)으로 설정합니다.
그러나 우리가 실제로 이 전환 옵션을 눌렀을 때, 우리는 무엇을 해야 하는지를 실현하지 못했다.마지막 할 준비 됐어요?우리 갑니다!
@click 을 누르면 탐지기를 용기의 두 개의 하위 항목에 추가합니다.그림과 같이 새 방법 switched()을 전달합니다.

<template>
  <div class="toggleContainer">
    <div id="on" @click="switched(true)" 
    :class="{active: value}">ON</div>
    <div id="off" @click="switched(false)" 
    :class="{active: !value}">OFF</div>
  </div>
</template>

이 방법의 주체에 대해 우리는 마우스를 눌렀을 때 새로운 custom event을 보내야 한다.Vue는 이 기능에 대해 $emit 구문을 제공합니다.첫 번째 파라미터는 사용자 정의 이벤트의 유형입니다. 우리의 예시에서 input이고 두 번째 파라미터는 isOn입니다.

Toggle.vue:

<template>
  <div class="toggleContainer">
    <div id="on" @click="switched(true)" 
    :class="{active: value}">ON</div>
    <div id="off" @click="switched(false)" 
    :class="{active: !value}">OFF</div>
  </div>
</template>

<script>
export default {
  props: ["value"],
  methods: {
    switched(isOn) {
      this.$emit("input", isOn);
    }
  }
};
</script>

<style scoped>
.toggleContainer {
  margin-top: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#on,
#off {
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background-color: lightgray;
  padding: 2px;
  text-align: center;
  margin: 10px -5px;
  cursor: pointer;
}

#on:hover,
#on.active {
  background-color: lightgreen;
}

#off:hover,
#off.active {
  background-color: lightcoral;
}
</style>

해냈어!🥳 다음 텍스트가 "true"에서 "false"로 바뀌고 되돌아오는 방법을 보십시오!
방금 Vue를 사용하여 사용자 정의 전환을 수행했습니다.몇 분 후, 이것이 바로 내가 이 틀을 좋아하는 곳이다.이런 부품을 만드는 것은 정말 빠르다.
코드의 어딘가에 갇혀 있거나 출력과 상호작용을 하려면, 아래에 CodeSandbox 항목을 삽입했습니다.

다음 단계는 어디로 갑니까?🤔

다음 리소스를 활용하여 맞춤형 구성 요소 제작 기술을 향상시키십시오.

Components Basics — Vue.js

Creating Custom Inputs With Vue.js by Joseph Zimmerman

Adding v-model Support to Custom Vue.js Components by Joshua Bemenderfer

읽어 주셔서 감사합니다.오늘 하루 즐겁게 보내세요.(✿◕‿◕✿)

Can you spot the difference? 😝

Image source: https://t.co/rhSnxZLNJa pic.twitter.com/MRmH1aKB9u

— Microsoft Developer UK (@msdevUK)

📫 나의 매주 개발자 통신에 구독하다📫

PS: 올해부터 저는 이곳에 지역사회 개발에 관한 글을 쓰기로 했습니다.전에 언론에 썼어요.만약 누군가가 나의 글을 보고 싶다면, here은 나의 매체 프로필이다.