Vue3.0 implementiert die Kapselung von Kontrollkästchenkomponenten

<!-- 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>