在 Vue.js 中創建一個自定義切換組件。 🎛
製作自定義組件不應該是一團糟。還有什麼比使用 Vue 的原生功能創建一個更好的呢！所以讓我們去做吧。讓我們自定義或手動或 隨便你想調用它 從頭開始組件！
我們在做什麼❓
這個：
啟動自定義切換 🦵
步驟 1️⃣：設置
打開你的終端以創建一個新的 Vue 項目：
vue create custom-toggle
如果你的機器上沒有安裝 Vue CLI，你可以在他們的官網找到安裝步驟。
刪除所有其他文件並創建新文件，就像您在以下項目結構中看到的一樣：
custom-toggle
│
└───public
│ │ index.html
└───src
│ │
│ └───components
│ │ Toggle.vue
│ │ App.vue
│ │ main.js
└───package.json
如您所見，我們的自定義組件將存在於 ./components/Toggle.vue 文件。
步驟 2️⃣：編寫 App.vue
這是我們的入口點組件。如您所見，我們有兩件事要展示。首先，是切換組件本身，下面的文本告訴我們切換的狀態，是打開還是關閉。
在 <script> 下 , 使用 data() return 的方法 組件的默認狀態。將其設為布爾值，因此它可以是 true 或 false .由於我想將切換顯示為“ON”，因此我將其設為 true 默認情況下。
接下來，使用 components 註冊我們將在下一步中製作的組件 選項。這是它的名字 appToggle .確保正確導入。然後將其註冊到模板上，確保使用 Vue 的 v-model 指令使雙向數據綁定成為可能。傳入dataToggle 屬性，以便它可以動態檢查狀態。
至於下面的文字，我們只是有一個<p> 使用 template 的標籤 語法的字符串插值。
<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️⃣：編碼切換
打開 Toggle.vue 文件。這裡我們只需要兩個div 元素（因為我們正在製作 custom 元素）用於“ON”和“OFF”狀態。這些將被包裝在父 toggleContainer div .
為了給它們設置我們想要的樣式，只需為每個設置一個 on 的 id 和 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 對像以便從 App.vue 傳遞數據 到 Toggle.vue .我們只需要 value 的父組件。這是因為我們傳遞的道具將決定單擊哪個切換，“ON”或“OFF”。添加動態 CSS 屬性更改也很有用。
從上面的 CSS 代碼可以看出，我們有不同的 background-color 和 active /hover #on 的偽類 和 #off .這些是從 value 激活的 支柱。但是要讓這個東西起作用，我們需要使用 Vue 的類/樣式綁定功能和 v-bind .
為了實現這一點，我們可以使用 v-bind:class 或簡寫語法，即 :class .在這裡，只需製作 active 對象為 value （類似於 dataToggle: true ) 在 "ON" 和相反的情況下 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>
對於這個方法的主體，我們需要emit 鼠標單擊時的新自定義事件。 Vue 為我們提供了 $emit 此功能的語法。第一個參數是自定義事件的類型，在我們的例子中，它是一個 input 第二個參數是isOn .
<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.js 進行了自定義切換，這就是我喜歡這個框架的地方。製作這樣的組件真的很快。
如果您卡在代碼中的某個地方或者只是想與輸出交互，我在下面嵌入了 CodeSandbox 項目：
下一步去哪裡？ 🤔
使用以下資源提升您的自定義組件製作技能：
- 組件基礎——Vue.js
- 使用 Vue.js 創建自定義輸入，作者 Joseph Zimmerman
- Joshua Bemenderfer 為自定義 Vue.js 組件添加 v-model 支持
- 學習 Vue 2：第 25 部分 - Laracasts 的自定義輸入組件
感謝閱讀，非常感謝！祝你有美好的一天。 (✿◕‿◕✿)
