In diesem Artikelbeispiel wird der spezifische Code von vue3.0 zur Implementierung der Kontrollkästchenkomponentenkapselung zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Allgemeine Schritte:
<!-- Grundlegender Komponentenstil --> <Vorlage> <div Klasse="xtx-checkbox" @click="changeChecked()"> <i v-if="geprüft" class="iconfont icon-geprüft"></i> <i v-else class="iconfont icon-unchecked"></i> <span v-if="$slots.default"><slot /></span> </div> </Vorlage> <Skript> importiere { ref } von 'vue' Standard exportieren { Name: "XtxCheckbox", aufstellen () { const geprüft = ref(false) const changeChecked = () => { geprüfter Wert = !geprüfter Wert } return { geprüft, geändert geprüft } } } </Skript> <style scoped lang="weniger"> // Der Stil kann nach Bedarf geändert werden.xtx-checkbox { Anzeige: Inline-Block; Rand rechts: 2px; .icon-geprüft { Farbe: @xtxColor; ~ Spanne { Farbe: @xtxColor; } } ich { Position: relativ; oben: 1px; } Spanne { Rand links: 2px; } } </Stil> // Hinweis: Wenn Sie es global verwenden müssen, müssen Sie es als globale Komponente registrieren <!-- Implementieren Sie die v-model-Direktive --> ... Lassen Sie die Struktur <script> weg. importiere { toRef } von 'vue' Standard exportieren { Name: "XtxCheckbox", Requisiten: { modelValue: { // Der Standardbindungswert von v-model ist modelValue Typ: Boolean, Standard: false } }, setup (eigenschaften, { emit }) { const checked = toRef(props, 'modelValue') // Definieren Sie „checked“, um den empfangenen Booleschen Wert zu speichern const changeChecked = () => { emit('update:modelValue', !checked.value) // Übergebe den Wert an die übergeordnete Komponente, um das Kontrollkästchen zu aktivieren} return { geprüft, geändert geprüft } } } </Skript> ... Elliptischer Stil <!-- Grundlegende Verwendung --> <!-- Benutzerdefinierter Kontrollkästchentest --> <xtx-checkbox v-model="checked">Benutzerdefiniertes Kontrollkästchen</xtx-checkbox> <Skript> importiere { ref } von 'vue' Standard exportieren { Name: 'Unterkategorie', aufstellen () { const geprüft = ref(true) return { geprüft} } } </Skript> <!-- @vueuse/Kernfunktion schreiben --> <Vorlage> <div Klasse="xtx-checkbox" @click='checked=!checked'> <i v-if="geprüft" class="iconfont icon-geprüft"></i> <i v-else class="iconfont icon-unchecked"></i> <span> <Steckplatz /> </span> </div> </Vorlage> <Skript> importiere { useVModel } von '@vueuse/core' // erfordert npm i @vueuse/core oder yarn add @vueuse/core Standard exportieren { Name: "XtxCheckbox", Requisiten: { Modellwert: { Typ: Boolean, Standard: false } }, setup (eigenschaften, { emit }) { // Den von der übergeordneten Komponente übergebenen Wert von modelValue abrufen const checked = useVModel(props, 'modelValue', emit) return { geprüft} } } </Skript> // Verwendungsmethode wie oben <xtx-checkbox v-model="checked">Benutzerdefiniertes Kontrollkästchen</xtx-checkbox> <Skript> importiere { ref } von 'vue' Standard exportieren { Name: 'Unterkategorie', aufstellen () { const geprüft = ref(true) return { geprüft} } } </Skript> Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: So installieren Sie Nginx in Docker
>>: MySQL-Variablenprinzipien und Anwendungsbeispiele
Inhaltsverzeichnis Verwenden Sie bidirektionale B...
Code kopieren Der Code lautet wie folgt: <!DOC...
Dieser Artikel zeichnet das Installations-Grafik-...
MongoDB -Installation Wählen Sie die Installation...
Inhaltsverzeichnis 1. Mehrere Syntaxen von Insert...
In diesem Artikelbeispiel wird der spezifische Ja...
1. addtime() Füge die angegebene Anzahl Sekunden ...
Offizielle Hyperf-Website Hyperf offizielle Dokum...
Einführung von zwei Methoden zum Anzeigen von MyS...
stat-Funktion und stat-Befehl Erklärung von [inod...
Inhaltsverzeichnis 1 Master-Slave-Lese-/Schreibtr...
Wenn Sie MySQL zum ersten Mal auf Ihrem Computer ...
Einführung in den Lastenausgleich Bevor wir die L...
Inhaltsverzeichnis Der Begriff der Affären Der St...
Wenn die Position absolut ist, wird der Prozentsa...