アプリ サイト

【Nuxt.js】props実践編:switchボタンを作ろう!

前置き

今回はSwitchボタンです!✅
gifカクカクですが
実際はなめらかになります💦
inputの真偽値によって
クラスバインディングを行います!

propsを主に使います。
前回書いた記事と違うのは
Stringを渡すだけではなく
computed関数で切り替えを行う部分です🤗

propsでのクラスバインディングはこちら


構成

templateの構成
inputをlabelで囲うとコードが
スッキリするのでこちらを採用🌱

囲わない場合は


Step1: まずはlabel, inputを作成

解説

label

props

文字列は親で指定したいのでprops
文字列だけなのでslotでも大丈夫です!
今回はpropsを複数使うためpropsにします。

css

labelの幅を88pxにしたい!
が、labelに指定してしまうと
inputも含んだ長さのためspanを追加します。

input

input type="checkbox"

inputタグに指定可能な属性checkedを使用
後でクラスバインディングを紐づけるため、
まずはcheckedされた状態から作ります✅

@input="$emit('switch')"

inputタグにcheckした時(@input)に、
カスタムイベント$emitを渡します。
イベントハンドラ 一覧
$emit基礎編はこちら

コード

) components

直下セレクタ >

scssは他のコンポーネントに影響が出ないよう、
基本的に直下セレクタ > をつけています。

) pages

propsのlabelは
直接テキストを渡しています。
:label="変数名"でももちろんOK。
$emitに関しては現時点ではスルーでOK。propsのlabelは
直接テキストを渡しています。
:label="変数名"でももちろんOK。
$emitに関しては現時点ではスルーでOK。


Step2: クラスバインディングを追加

propsとcomputed関数を使った
クラスバインディングをしていきます。
まずはinputによる真偽値は無視しましょう。

やりたいこと
チェックされたかどうかに関係なく
クラスの付け替えで全体の色を変える🎈🧸
なのでこうなればOKです!

あとでチェックされていない状態
(●が左にある状態)で
この色に変わるように変更します。

解説

Point!

  • labelにクラスバインディング
  • computed関数でpropsをswitch関数で切り替え
  • 親でstatusがinactiveになればinactiveクラスがついてピンクになる
  • inactiveクラスがついた時のcssを追加

コード

) components

) pages

これで準備はOK✨💪


Step3: 真偽値とクラスバインディングの連携

いよいよinputによるクラス付け替えです!
子ではもう全てのpropsを
書いているのでやることはありません。

親で渡したpropsの
・Boolean
・String
これを変数で連携させましょう!

解説

Point!

  • :checked="value"でvalueの初期値をfalseに
    最初は選択されていない状態に変更
  • statusに三項演算を使うので:を忘れず追加
    valueがtrueなら'', falseなら'inactive'
  • @switch="value = !value"で
    switchイベント発火時にtrue, falseの切り替え

つまり初期値チェックしてない状態の時は
inactiveクラスがついて
ピンクになって●が左にある状態🍩
チェックをつけるとinactiveが外れて
通常クラスの赤になって●が右にある状態🍩

コード

) pages

) components

-アプリ, サイト
-, ,

© 2020 aLiz Nuxt