Vue implementiert Mehrfachauswahl im unteren Popup-Fenster

<Vorlage>
  <div Klasse="Veröffentlichungsbeitrag">
    <div Klasse="Lebenslauf_main">
      <div Klasse="Lebenslauf_Inhalt">
        <van-form>
          <div Klasse="Tabellenliste Beitragswohlfahrt">
            <p class="name_title">Stellenvorteile<span class="required">*</span></p>
            <van-feld
              Klasse="Kalender"
              Eingabeausrichtung = "links"
              v-Modell="Vorteile"
              Platzhalter="Bitte wählen Sie die Jobvorteile aus"
              @focus="imFokus"
              :Klasse="{ borderStyle: welfareChange }"
              @click.stop="clickWelfare"
              :deaktiviert="wahr"
            />
          </div>
        </van-form>
        <!-- Vorteile des Jobs-->
        <van-popup v-model="showWelfare" position="bottom">
          <div Klasse="Wohlfahrt_top">
            <p></p>
            <p class="welfare_title">Leistungen (Mehrfachauswahl möglich)</p>
            <p class="welfare_btn" @click.stop="onConfirmSpeed">Fertig</p>
          </div>
          <div Klasse="Wohlfahrtsinhalt">
            <div
              v-for="(Element, Index) in Wohlfahrtsliste"
              :Schlüssel="Index"
              :Klasse="{ aktiv: item.active }"
              id="Wohlfahrtsgegenstand"
              @click.stop="clickWelfareItem(item, index)"
            >
              <p :class="item.active ? 'Wohlfahrtstext' : 'kein_Wohlfahrtstext'">
                {{ item.text }}
              </p>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
    <div>
      <div Klasse="Maske">
        <Schaltfläche
          Klasse="btn"
          @click="senden"
          :Klasse="{ btnBg: Farbänderung() }"
          v-preventReClick="1000"
        >
          Fertig</button>
      </div>
    </div>
  </div>
</Vorlage>
 
<Skript>
importiere Vue von „vue“;
importiere { Kreis, DatetimePicker, Formular, Feld, Toast, Kalender, Picker, Overlay, ActionSheet, Popup } von 'vant';
importiere „vant/lib/index.less“;
Vue.use(Kreis).use(Datums-/Uhrzeitauswahl).use(Formular).use(Feld).use(Toast).use(Kalender).use(Auswahl).use(Überlagerung).use(Aktionsblatt).use(Popup);
 
Standard exportieren {
  Name: "PerfectPost",
  Daten () {
    zurückkehren {
      Wohlfahrtsliste: [
        {
          ID: 1,
          Text: „Mahlzeiten inbegriffen“
        },
        {
          ID: 2,
          Text: "Wrap"
        },
        {
          ID: 3,
          Text: „Fünf Sozialversicherungen und eine Wohnungsbaukasse“
        },
        {
          ID: 4,
          Text: „Doppeltes Gehalt am Jahresende“
        },
        {
          ID: 5,
          Text: "Gewerbeversicherung"
        },
        {
          ID: 6,
          Text: "Unfallversicherung"
        },
        {
          Ich würde: 7,
          Text: "Teambildung"
        },
        {
          ID: 8,
          Text: "Wochenende frei"
        },
        {
          ID: 9,
          Text: "Nachmittagstee"
        },
        {
          ID: 10,
          Text: "Verpflegungsgeld"
        },
        {
          Ich würde: 11,
          Text: „Transportkostenzuschuss“
        },
        {
          Ich würde: 12,
          Text: "Abholung Shuttlebus"
        },
        {
          Ich würde: 13,
          Text: "Bonus"
        },
        {
          Ich würde: 14,
          Text: „Öffentlich geförderte Ausbildung“
        },
        {
          Ich würde: 15,
          Text: „öffentlicher Verkehr“
        },
      ],
      showWelfare: false, //Job Sozialhilfe Online-Formular: {
        Vorteile: "",//Arbeitsvorteile},
      geprüfteListe: [],
      : FALSCH,
    };
  },
  Methoden: {
    //Popup-Jobvorteile clickWelfare () {
      dies.showRedTips()
      this.showWelfare = true
    },
    //Wohlfahrtsartikel auswählen clickWelfareItem (v) {
      wenn (v.aktiv) {
        Vue.set(v, 'aktiv', falsch)
      } sonst wenn (this.checkedList.length < 5) {
        Vue.set(v, „aktiv“, wahr)
      }
      diese.checkedList = diese.welfareList.filter(Funktion (Element) {
        Artikel zurückgeben.aktiv
      })
      wenn (this.checkedList.length >= 5) {
        Toast('Sie können nur bis zu 5 auswählen')
      }
    },
    //Komplette Wohlfahrtsoptionen onConfirmSpeed ​​​​() {
      this.showWelfare = falsch
      this.welfareChange = falsch
      let itemList = this.checkedList.map((item) => {
        Artikeltext zurückgeben
      });
      let str = itemList.join('/')
      let str1 = itemList.join(';')
      diese.Vorteile = str ? str : diese.Vorteile
      this.onlineForm.benefits = str1 ? str1 : this.benefits
    },
    zeigeRedTips() {
      this.welfareChange = falsch
    },
    bei Fokus () {
      dies.showRedTips()
    },
    //Weiter-Schaltfläche Farbwert colorChange () {
      wenn (dieses.onlineFormular.Vorteile) {
        returniere wahr
      }
    },
    // ValidierenvalidierenOnlineFormular () {
      sei gültig = wahr;
      wenn (!this.onlineForm.benefits || !this.onlineForm.benefits.trim()) {
        gültig = falsch;
        Toast('Bitte wählen Sie die Jobvorteile aus')
        this.welfareChange = wahr
      }
      Rückgabe gültig;
    },
    //Senden submit () {
      wenn (dieses.validateOnlineForm()) {
        Toast('Senden')
      }
    },
  },
};
</Skript>
 
<Stil scoped lang="weniger" >
* {
  Rand: 0;
  Polsterung: 0;
}
::v-tief .van-picker__title {
  Schriftgröße: 17px;
  Schriftfamilie: PingFangSC, PingFangSC-Medium;
  Schriftstärke: 500;
  Textausrichtung: zentriert;
  Farbe: #333333;
}
.Veröffentlichungsbeitrag {
  Breite: 100 %;
  Polsterung unten: 64px;
  Polsterung oben: konstant (Safe-Area-Inset-oben);
  Polsterung oben: Umgebung (Safe-Area-Inset-oben);
}
.post_welfare {
  ::v-tief .van-field__control:deaktiviert {
    Schriftgröße: 15px;
    Schriftfamilie: PingFangSC, PingFangSC-Regular;
    Schriftstärke: 400;
    Textausrichtung: links;
    Farbe: #333333;
    -Webkit-Text-Füllfarbe: #333333;
  }
  ::v-tiefe Eingabe::-webkit-input-placeholder {
    Schriftgröße: 15px;
    Schriftfamilie: PingFangSC, PingFangSC-Regular;
    Schriftstärke: 400;
    Textausrichtung: links;
    Farbe: #999999;
    -webkit-text-Füllfarbe: #999999;
  }
}
::v-tief .van-field__control:deaktiviert {
  Schriftgröße: 15px;
  Schriftfamilie: PingFangSC, PingFangSC-Regular;
  Schriftstärke: 400;
  Textausrichtung: links;
  Farbe: #333333;
  -Webkit-Text-Füllfarbe: #333333;
}
 
.Wohlfahrtsinhalt {
  Polsterung oben: 10px;
  Polsterung unten: 30px;
  Anzeige: Flex;
  Inhalt ausrichten: Abstand herum;
  Elemente ausrichten: zentrieren;
  Flex-Wrap: Umwickeln;
  Rand: 0 16px;
}
#Wohlfahrtsartikel {
  Breite: 31%;
}
.Wohlfahrt_top {
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
  Elemente ausrichten: zentrieren;
  Polsterung: 13px 0;
  Rahmen unten: durchgezogen 0,5px #e5e5e5;
}
.Wohlfahrtstitel {
  Schriftgröße: 17px;
  Schriftfamilie: PingFangSC, PingFangSC-Medium;
  Schriftstärke: 500;
  Textausrichtung: zentriert;
  Farbe: #333333;
  Rand rechts: -16px;
}
.Wohlfahrt_btn {
  Schriftgröße: 16px;
  Schriftfamilie: PingFangSC, PingFangSC-Regular;
  Schriftstärke: 400;
  Textausrichtung: rechts;
  Farbe: #333333;
  Rand rechts: 16px;
}
.Wohlfahrtstext {
  Höhe: 36px;
  Hintergrund: #f4f8ff;
  Rand: 1px durchgezogen #bbdcff;
  Rahmenradius: 4px;
  Rand oben: 10px;
  Zeilenhöhe: 36px;
 
  Schriftgröße: 14px;
  Schriftfamilie: PingFangSC, PingFangSC-Medium;
  Schriftstärke: 500;
  Textausrichtung: zentriert;
  Farbe: #1283ff;
}
.kein_Wohlfahrtstext {
  Höhe: 36px;
  Hintergrund: #ffffff;
  Rand: 1px durchgezogen #e5e5e5;
  Rahmenradius: 4px;
  Rand oben: 10px;
  Zeilenhöhe: 36px;
 
  Schriftgröße: 14px;
  Schriftfamilie: PingFang, PingFang-SC;
  Schriftstärke: 500;
  Textausrichtung: zentriert;
  Farbe: #333333;
}
 
.Lebenslauf_Inhalt {
  Rand links: 30px;
  Rand rechts: 30px;
  ::v-tief {
    .van-popup--bottom {
      Rahmen oben links – Radius: 12px;
      Rahmen oben rechts – Radius: 12px;
    }
  }
}
.Maske {
  Breite: 100 %;
  Hintergrund: #ffffff;
  Boxschatten: 0px 0px 8px 0px rgba (204, 204, 204, 0,3);
  Position: fest;
  unten: 0;
  links: 0;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Polsterung: 10px 0;
  Polsterung unten: berechnet (Umgebung (sicherer Bereich, Einschub unten) +15px);
  Polsterung unten: berechnet (Umgebung (Safe-Area-Inset-Bottom) + 15px);
}
.btn {
  Schriftgröße: 16px;
  Schriftfamilie: PingFangSC, PingFangSC-Medium;
  Schriftstärke: 500;
  Textausrichtung: links;
  Farbe: #ffffff;
  Rand: 0 automatisch;
  Textausrichtung: zentriert;
  Zeilenhöhe: 1,6rem;
  Breite: 100 %;
  Rand: 0 16px;
  Höhe: 48px;
  Hintergrund: #d8d8d8;
}
.btnBg {
  Schriftgröße: 16px;
  Schriftfamilie: PingFangSC, PingFangSC-Medium;
  Schriftstärke: 500;
  Textausrichtung: links;
  Farbe: #ffffff;
  Rand: 0 automatisch;
  Textausrichtung: zentriert;
  Zeilenhöhe: 1,6rem;
  Breite: 100 %;
  Rand: 0 16px;
  Höhe: 48px;
  Hintergrund: #d8d8d8;
  Rand: keiner;
  Gliederung: keine;
  Hintergrund: linearer Farbverlauf (90 Grad, Nr. 50a3ff, Nr. 1283ff);
  Rahmenradius: 4px;
}
 
.name_titel {
  Schriftgröße: 16px;
  Schriftfamilie: PingFangSC, PingFangSC-Medium;
  Schriftstärke: 500;
  Farbe: #333333;
}
 
.erforderlich {
  Schriftgröße: 13px;
  Schriftfamilie: PingFangSC, PingFangSC-Regular;
  Schriftstärke: 400;
  Farbe: #ff1d28;
  Position: absolut;
}
.Kalender {
  Breite: 100 %;
  Höhe: 49px;
  Hintergrund: #ffffff;
  Rand: 1px durchgezogen #e5e5e5;
  Rahmenradius: 5px;
  Rand oben: 10px;
  Polsterung links: 20px;
  Hintergrund: URL("./images/drop-down.png") keine Wiederholung 96 % Mitte;
  Hintergrundgröße: 10px 7px;
  Polsterung rechts: 25px;
  ::v-tief .van-field__control {
    Schriftgröße: 15px;
    Schriftfamilie: PingFangSC, PingFangSC-Regular;
    Schriftstärke: 400;
    Textausrichtung: links;
    Farbe: #333333;
    Rand oben: 12px;
  }
}
::v-tiefe Eingabe::-webkit-input-placeholder {
  Schriftgröße: 15px;
  Schriftfamilie: PingFangSC, PingFangSC-Regular;
  Schriftstärke: 400;
  Textausrichtung: links;
  Farbe: #afadad;
  -webkit-text-fill-color: #afadad;
}
.Tabellenliste {
  Rand oben: 16px;
}
.borderStyle {
  Rand: durchgezogen 1px #ff1d28;
  Rahmenradius: 3px;
}
Eingabe::-WebKit-Eingabe-Platzhalter {
  Schriftgröße: 15px;
  Schriftfamilie: PingFangSC, PingFangSC-Regular;
  Schriftstärke: 400;
  Textausrichtung: links;
  Farbe: #999999;
}
.van-field__control {
  Farbe: #333333;
}
</Stil>