다른 사람의 Vue 구성 요소를 사용하는 방법

Vue 를 사용합니다.js, 웹 응용 프로그램에 구성 요소 기반 구조를 제공합니다.설치 중인 사용자 환경은 슬라이더, 영웅 배너, 드롭다운 메뉴, 제어판 등 여러 구성 요소로 분해됩니다.구성 요소가 서로 통신할 수 있기 때문에, 이러한 구조의 장점 중 하나는 모든 구성 요소에 자신이 책임지는 응용 프로그램 논리의 다른 부분을 제공하여 응용 프로그램을 조직하는 데 도움을 줄 수 있다는 것이다.구성 요소의 다른 부분에서 구성 요소를 다시 사용할 수 있습니다. 예를 들어 두 개의 밑에 있는 메뉴가 있는데, 그 중에는 서로 다른 항목 집합이 포함되어 있습니다.
이 강좌에서 소개해 드릴 또 다른 장점은 Vue 구성 요소가 통일된 통신 방식(도구와 이벤트를 통해)을 가지고 있기 때문에 이것은 사용자가 직접 작성한 구성 요소를 사용하는 것에 국한되지 않는다는 것을 의미합니다.만약 누군가가 응용 프로그램이 해야 할 일을 완성하기 위해 구성 요소를 작성하고 원본을 작성한다면, 응용 프로그램이 어떻게 역할을 발휘하는지에 대한 세부 사항이 아니라 전체 응용 프로그램의 디자인에 더 많은 시간을 투자할 수 있다.

🐣 우리 자신의 구성 요소만 사용하여 응용 프로그램을 시작합니다

간단한 웹 응용 프로그램부터 시작하자. 우리는 자신의 구성 요소만 사용한다.이 프로그램에는 메시지를 입력하는 입력 상자와 메시지를 표시하는 제목, 텍스트 색을 선택하는 단추가 있습니다.다음과 같이 표시됩니다.

우리가 사용하기 시작한 소스 코드를 찾을 수 있습니다 here. 따라서 계속하려면 저장소를 복제하고 follow-along 로 이동한 다음 코드를 편집하십시오.만약 위에서 나의 두 강좌를 읽었다면, 코드는 이 프로그램에서 가져온 것이므로 이 절을 건너뛰십시오.
우리가 관심 있는 서류는 다음과 같다.

src/components/ColorPicker.vue, 텍스트 색상 표시를 선택할 수 있는 버튼 세트가 포함되어 있습니다.

src/App.vue, 텍스트 표시 및 텍스트 변경을 위한 입력 상자를 포함한 전체 응용 프로그램을 포함합니다.이 응용 프로그램은 ColorPicker 구성 요소를 사용합니다.

구성 요소를 봅시다.

색상 선택기.vue

<template>
  <form>
    <h3> Select a color</h3>
    <button
      v-for="color in colors"
      :key="color"
      @click.prevent="selectColor(color)"
    >
      {{ color }}
    </button>
  </form>
</template>

<script>
export default {
  name: 'ColorPicker',
  props: ['colors'],
  methods: {
    selectColor(color) {
      this.$emit('color-change', color);
    },
  },
}
</script>

주요 관심사는 다음과 같습니다.

일련의 색을 도구로 하고 각 색에 단추를 표시합니다.

버튼 중 하나를 클릭하면 ColorPicker 구성 요소가 selectColor 메서드를 호출하여 color-change 이벤트를 보냅니다.이 이벤트에는 사용자가 선택한 색상에 대한 정보가 포함되어 있습니다.

우리는 그것을 더 많은 구성 요소로 분해할 수 있지만, 이 강좌에서 나는 단지 몇 개의 구성 요소만 고려하고 싶다.

응용 프로그램.vue

<template>
  <div class="whole-thing">
    <h1 :style="{color: color}">{{ message }}</h1>
    <div aria-label="message input">
      <input type="text" v-model="message" />
    </div>
    <color-picker
      @color-change="colorChange"
      :colors="['black', 'red', 'green', 'blue']"
    ></color-picker>
  </div>
</template>

<script>
import ColorPicker from './components/ColorPicker.vue';

export default {
  name: 'App',
  components: {
    'color-picker': ColorPicker,
  },

  data() {
    return {
      color: 'black',
      message: 'write a message',
    };
  },

  methods: {
    colorChange(color) {
      this.color = color;
    },
  },
}
</script>

검사의 주요 부분은 다음과 같습니다.

템플릿에서 우리는 color-picker 구성 요소를 사용합니다.우리는 사용자가 colors 도구를 사용하여 선택할 수 있도록 이 구성 요소에 색 목록을 전달합니다.

우리는 색 선택기가 보낸 color-change 사건을 감청한다.

이벤트를 받았을 때, 프로그램 구성 요소 데이터의 color-change 필드를 업데이트하고 스크린 제목 color 으로 전달합니다.

🎨 더 많은 색깔!

우리는 색깔 선택기가 있는데, 왜 네 가지 색깔만 선택합니까?우리는 사용자로 하여금 그들이 원하는 어떤 색깔을 선택하게 해야 한다.
우리는 응용 프로그램에 그들이 표시하고자 하는 색깔의 16진 코드를 입력할 수 있는 입력 상자를 줄 수 있지만, 16진 색 코드는 그렇게 직관적이지 않다.우리는 사용자가 선택한 색을 볼 수 있도록 더 재미있는 색 선택기를 원한다.누군가가 우리가 찾고 있는 구성 요소를 만들었습니다: radial-color-picker!
⚠️ 다른 사람의 구성 요소를 사용하기 전에, 우리는 그것의 사용 법률 규칙을 이해하기 위해 시종 허가증을 검사해야 한다.GitHub의 프로젝트 페이지로 이동하여 보기LICENSE.
다행히도 이것은 마성이공대학의 허가증에 따라 권한을 수여받은 것이다. 이것은 고도의 허가이다!
구성 요소를 가져오려면 다음을 실행하십시오.

yarn add @radial-color-picker/vue-color-picker

이제 응용 프로그램에서 사용해 보겠습니다.:style의<script> 레이블에서 다음과 같이 변경합니다.

+ import ColorPicker from '@radial-color-picker/vue-color-picker';
+ 
  export default {
    name: 'ColorPicker',
-   props: ['colors'],
+   components: {
+     'radial-color-picker': ColorPicker
+   },
    methods: {
      selectColor(color) {
        this.$emit('color-change', color);
      },
    },
  }

vue 색상 선택기를 가져온 다음 ColorPicker.vue 아래에 등록하여 components 에서 사용할 수 있도록 합니다. <template> 표시를 다음으로 바꿀 수 있습니다.

<radial-color-picker
  aria-label="color radial selector"
/>

우리는 이 구성 요소에 대한 접근성을 설명하는 아리아 탭을 제공합니다.웹 페이지의 접근성이 여전히 낯설고 더 많은 것을 배우고 싶지만, ChromeVox 화면 판독기를 시험적으로 사용할 때, 화면 판독기를 사용할 때 이 구성 요소를 선택하면,'색 지름 선택기'를 표시합니다.단, 이 탭이 없어도radial color picker는 기본적인aria 탭을 제공하고, 화면 리더는'color picker'를 표시합니다.
마지막으로, 많은 구성 요소와 마찬가지로, 이 구성 요소는 가져올 전용 CSS가 있기 때문에, <button v-for... 밑에 이것<style> 표시를 추가합니다

<style>
@import '~@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css';
</style>

이제 ColorPicker.vue 를 실행하여 yarn serve 로 이동하면 우리가 사용할 수 있는 레이디얼 색상 선택기 구성 요소를 볼 수 있습니다.

🤩 경탄했어나는 너의 상황을 모르겠지만, 이 무지개는 나로 하여금 인터넷의 플래시 시대를 그리워하게 한다.우리는 지금 텍스트의 색을 선택하는 데 사용할 예쁜 구성 요소가 있습니다!
그러나 한 가지 문제는 우리가 색을 선택하면 현재 텍스트의 색이 업데이트되지 않는다는 것이다.이를 위해 우리는 활동이 필요하다.

📡 이벤트를 사용하여 통신

다음 단계는 이 직경 방향 색상 선택기 구성 요소를 localhost:1123 의 ColorPicker.vue 필드를 업데이트할 수 있도록 하는 것입니다.
Vue 구성 요소는 하위 구성 요소에 도구를 전달하고 이벤트를 상위 구성 요소에 전달하여 서로 통신합니다.기억하는 경우 원래 태그data.color는 다음과 같습니다.

    <color-picker
      @color-change="colorChange"
      :colors="['black', 'red', 'green', 'blue']"
    ></color-picker>

누가 클릭하여 색상을 선택할 때:

App.vue발송<color-picker>이벤트

이 변색 사건은 ColorPicker 지령

을 통해 포착된다

응용 프로그램 구성 요소는 배너

의 텍스트를 업데이트할 수 있도록 사용자가 선택한 색상을 color-change 방법으로 호출합니다.
따라서 새로운 색을 선택할 때 지름에서 색 선택기로 보내는 이벤트를 찾은 다음 이 이벤트를 위한 탐지기 @color-change 를 만드는 것이 필요합니다.
우리가 원하는 이벤트를 찾기 위해서, 다행히도, vuecolorpicker는 이 구성 요소를 어떻게 사용하는지 설명하는 참고 문서를 가지고 있습니다.너는 radial-color-picker.github.io에서 그것들을 찾을 수 있다.
구성 요소가 보내는 모든 이벤트와 우리가 전달할 수 있는 모든 도구를 보려면 제목이 config reference 인 부분으로 이동하십시오.많은 Vue 구성 요소 라이브러리의 문서에는 Go 패키지에서 내보내는 유형과 방법을 Gooc에서 알려주는 것과 같은 참고 부분이 있습니다.
구성 참조에서 이 구성 요소는 colorChange, v-on 및 input 세 가지 이벤트를 실행합니다.설명에서 알 수 있듯이 input and change 사용자가 표시할 텍스트 색을 선택할 때의 설명처럼 들린다.나는 change 을 사용할 것이다. 따라서 사용자가 색 사이를 순환할 때 제목 텍스트의 색이 변한다.
그래서 우리의 select 라벨은 현재 input 지령이 있는데, 이것은 우리의 radial-color-picker 방법을 호출할 것이다.

<radial-color-picker
  aria-label="hue radial selector"
  @input="selectColor"
/>

우리는 단지 다른 변화를 할 수 있을 뿐이다. 의사는 우리가'녹색'이나'주황색'과 같은 색깔을 얻지 못했고, 0에서 359까지의 숫자를 색조 값으로 삼았다고 말했다.그래서 우리는 이 색조 값을 취하여 그것으로 색조-포화도-밝기-색조HSL를 구성한 다음에 이 HSL 색을 @input 라벨의 색으로 사용해야 한다.

  methods: {
-   selectColor(color) {
-     this.$emit('color-change', color);
+   selectColor(hue) {
+     this.$emit('color-change', `hsl(${hue}, 100%, 50%)`);
    },
  },

우리는 만족스러운 JavaScript 문자열 삽입 문법으로 hsl 색 문자열을 만들고 ColorPicker 구성 요소에서 이 문자열을 보냅니다.CSS에서 selectColor 는 색상을 나타내는 유효한 형식이므로 <h1> 에서 hsl(...) 태그 App.vue 에 넣을 수 있습니다. 이제 색상 선택기가 작동합니다!

Vue 구성 요소를 설치하여 Vue 응용 프로그램에 추가하고 이벤트를 사용하여 다른 구성 요소와 통신하는 방법을 알고 있습니다.이제 도전으로서 이 직경 색 선택기는 색조만 선택할 수 있지만, 포화도와 밝기를 선택하고 싶다면?이 강좌를 따른다면 ColorPicker를 사용해 보십시오.vue에는 포화도 백분율과 밝기를 선택할 수 있는 두 개의 범위 슬라이더가 있습니다.그리고 이 세 부분을 모두 선택할 수 있는 상황에서 색을 발사하는 것 외에 지름 방향 색 선택기가 그 중심점에 표시된 색에 포화도와 밝기를 추가하려고 시도합니다.힌트로 레이디얼 색상 선택기config reference를 다시 확인합니다.이 구성 요소는 당신을 도울 수 있는 몇 가지 설정이 있습니다.
너는 나의 답안을 볼 수 있다here.