Vue implementiert die Verpackung und Verwendung von Komponenten zur Kontrolle der Warenanzahl

<Vorlage>
    <div Klasse="xtx-numbox">
    <div Klasse="Bezeichnung">
      <Steckplatz />
    </div>
    <div Klasse="numbox">
      <a href="javascript:;" @click='toggle(-1)'>-</a>
      <Eingabetyp="Text" schreibgeschützt :Wert="Nummer">
      <a href="javascript:;" @click='toggle(1)'>+</a>
    </div>
  </div>
</Vorlage>
<Skript>
importiere { useVModel } von '@vueuse/core'

Standard exportieren {
  Name: "XtxNumbox",
  Requisiten: {
    Modellwert: {
      Typ: Nummer,
      Standard: 1
    },
    Inventar:
      Typ: Nummer,
      erforderlich: true
    }
  },
  setup (eigenschaften, { emit }) {
    // Bidirektionale Bindung von Daten, die durch eine Drittanbietermethode gesteuert werden const num = useVModel(props, 'modelValue', emit)
    // Änderungsvorgang der Produktdaten steuern const toggle = (n) => {
      wenn (n < 0) {
        // Eine Operation subtrahieren, wenn (num.value > 1) {
          num.value -= 1
        }
      } anders {
        // Füge eine Operation hinzu, wenn (num.value < 10) {
          num.value += 1
        }
      }
    }
    return { num, umschalten }
  }
}
</Skript>
<style scoped lang="weniger">
.xtx-numbox {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  .Etikett {
    Breite: 60px;
    Farbe: #999;
    Polsterung links: 10px;
  }
  .numbox {
    Breite: 120px;
    Höhe: 30px;
    Rand: 1px durchgezogen #e4e4e4;
    Anzeige: Flex;
    > ein {
      Breite: 29px;
      Zeilenhöhe: 28px;
      Textausrichtung: zentriert;
      Hintergrund: #f8f8f8;
      Schriftgröße: 16px;
      Farbe: #666;
      &:erster-vom-Typ {
        Rahmen rechts: 1px durchgezogen #e4e4e4;
      }
      &:letzter-vom-Typ {
        Rahmen links: 1px durchgezogen #e4e4e4;
      }
    }
    > Eingabe {
      Breite: 60px;
      Polsterung: 0,5px;
      Textausrichtung: zentriert;
      Farbe: #666;
    }
  }
}
</Stil>

<Numbox v-model='num' >Menge</XtxNumbox>
aufstellen(){
 //Die Anzahl der Produkte//Der Standardwert ist 1
  Konstante Nummer = Ref(1)
  zurückkehren {
    Nummer 
  }
}