スイッチでランプを点けよう【スイッチ】

前回（というべきか昨日ですが）、
webで使えるスイッチ
という記事を書いたのですが、せっかくですので今日はその続き。

そのものずばりで

「スイッチでランプを点けよう」

ということで今日のサンプルはこれです

スイッチのアイコンをクリックすると

ランプが点いたり消えたりする画像

完全に遊んでいますね。😅

しかしVus.jsおそるべしです。
こんなに簡単にできるとは。。。

ソースはこんな感じ

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="sampleMaterial">
    <h1>スイッチ2</h1>
    <span id="switch1">
        <div id="lamp1">
            <span v-if="switch1On"><img src="../../img/diagram/110658_on.png"></span>
            <span v-else><img src="../../img/diagram/110658_off.png"></span>
        </div>
        <div id="diagram1">
            <span v-if="switch1On"><img src="../../img/diagram/base1on.jpg"></span>
            <span v-else><img src="../../img/diagram/base1.jpg"></span>
        </div>
        <span class="material-icons materials">
            <span v-if="switch1On" @click="toOff">toggle_on</span>
            <span v-else @click="toOn">toggle_off</span>
        </span>
    </span>
</div>
<script>
    var switch1 = new Vue({
        el: '#switch1',
        data: {
            switch1On: false
        },
        methods: {
            toOff: function(e) {
                this.switch1On = false;
            },
            toOn: function(e) {
                this.switch1On = true;
            }
        }
    })
</script>

スクリプトの部分は修正なし。

実は昨日のソースを少し書き換えたものなのですが、
スクリプトの部分は1文字も触っていません。
→ きっとここがポイントですね。

ランプと配線の画像を追加して、スタイルシートを修正しただけです。

その代わり、 cssのpositionの使い方をすっかり忘れていた（これこそ還暦エンジニアの敵？）のを思い出しました。
→ もしかすると今日の主題はこれですかね。

親要素の`position`を`relative`にして
自分の`position`は`absolute`にする

あとはtopとleftを調整すればOKです。

これで、スイッチと配線とランプの画像の位置を調整しました。

配線図で書くとこんな感じであっているのかなぁ

しかし、こんなことをやっていて、本当に第2種電気工事士の試験に合格できるのでしょうかね？💦

---

今日のランプの画像はふに＠ぐみさん のイラストを使わせていただきました。
久しぶりにillustratorをちょっと触れて楽しかったです。

---