カスタムのトグルコンポーネントを作成します.js🎛

カスタムコンポーネントを作ることは混乱であるべきではありません.そして、何を作成するためにVueのネイティブ機能を使用するよりも優れている!それでそれをしましょう.のは、カスタムまたはマニュアルを作成したり、何からあなたはそれをコンポーネントのコンポーネントを呼び出す!

今製作中のスイッチがあります.

何を作っているの❓

これ

私は知っています、それはひどく見えます、しかし、ちょうど実装に集中しましょう

カスタムトグル🦵

ステップ1️⃣: セットアップ

Fire端末を開き、新しいVueプロジェクトを作成します.

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

これがエントリポイントコンポーネントです.ご覧のように、表示する2つのものがあります.最初に、トグルコンポーネント自体と下のテキストは、トグルの状態を指示します.
の下に<script> , 使用する data() メソッドreturn コンポーネントのデフォルト状態.それをbooleanにするので、どちらでも構いませんtrue or false . トグルを「ON」にしたいので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ファイル.ここで、我々はちょうど2つを必要としますdiv 要素は、「on」と「off」状態のために(カスタム要素を作っているように).これらは親に包まれるtoggleContainer div .
私たちが望むようにスタイルを整えるためにon and 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我々は、必要なだけvalue 親コンポーネントの.これはprop 私たちは、どのトグルがクリックされるかを決定します.また、動的なCSSプロパティの変更を加えるのも便利です.
上記のCSSコードからわかるようにbackground-color and active/hover 両方のための擬似クラス#on and #off . これらはvalue プロップしかし、この仕事をするためには、我々はVue's class/style binding feature with 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 2番目のパラメータは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 :今年から、Devコミュニティにここで書くことにしました.以前、私は媒体を書きました.誰かが私の記事を見たいならば.here 's私の媒体プロフィール.