Vueは下部のポップアップウィンドウで複数選択を実装します

<テンプレート>
  <div class="リリースポスト">
    <div class="resume_main">
      <div class="resume_content">
        <バンフォーム>
          <div class="table_list post_welfare">
            <p class="name_title">仕事のメリット<span class="required">*</span></p>
            <ヴァンフィールド
              クラス="カレンダー"
              入力位置揃え="左"
              v-model="利点"
              placeholder="福利厚生を選択してください"
              @focus="フォーカス中"
              :class="{ borderStyle: 福祉変更 }"
              @click.stop="クリック福祉"
              :disabled="true"
            />
          </div>
        </van-form>
        <!-- 仕事のメリット-->
        <van-popup v-model="showWelfare" position="bottom">
          <div class="welfare_top">
            <p></p>
            <p class="welfare_title">福利厚生（複数選択）</p>
            <p class="welfare_btn" @click.stop="onConfirmSpeed">完了</p>
          </div>
          <div class="welfare_content">
            <div
              v-for="(item, index) in WelfareList"
              :key="インデックス"
              :class="{ アクティブ: アイテム.アクティブ }"
              id="福祉アイテム"
              @click.stop="clickWelfareItem(item, index)"
            >
              <p :class="item.active ? 'welfare_text' : 'not_welfare_text'">
                {{item.text}}
              </p>
            </div>
          </div>
        </バン-ポップアップ>
      </div>
    </div>
    <div>
      <div class="mask">
        <ボタン
          クラス="btn"
          @click="送信"
          :class="{ btnBg: colorChange() }"
          v-preventReClick="1000"
        >
          完了</button>
      </div>
    </div>
  </div>
</テンプレート>
 
<スクリプト>
'vue' から Vue をインポートします。
'vant' から { Circle、DatetimePicker、Form、Field、Toast、Calendar、Picker、Overlay、ActionSheet、Popup } をインポートします。
'vant/lib/index.less' をインポートします。
Vue.use(Circle).use(DatetimePicker).use(Form).use(Field).use(Toast).use(Calendar).use(Picker).use(Overlay).use(ActionSheet).use(Popup);
 
エクスポートデフォルト{
  名前: "PerfectPost",
  データ （） {
    戻る {
      福祉リスト: [
        {
          id: 1,
          テキスト:「食事付き」
        },
        {
          id: 2,
          テキスト: "ラップ"
        },
        {
          id: 3,
          テキスト: 「5つの社会保険と1つの住宅基金」
        },
        {
          id: 4,
          テキスト: 「年末に給料が2倍」
        },
        {
          id: 5,
          テキスト: 「商業保険」
        },
        {
          id: 6,
          テキスト: 「傷害保険」
        },
        {
          id: 7,
          テキスト: 「チームビルディング」
        },
        {
          id: 8,
          テキスト: 「週末休み」
        },
        {
          id: 9,
          テキスト:「アフタヌーンティー」
        },
        {
          id: 10,
          テキスト: 「食事手当」
        },
        {
          id: 11,
          テキスト：「交通費補助金」
        },
        {
          id: 12,
          テキスト: 「シャトルバス送迎」
        },
        {
          id: 13,
          テキスト: 「ボーナス」
        },
        {
          id: 14,
          テキスト: 「公的資金による研修」
        },
        {
          id: 15,
          テキスト: 「公共交通機関」
        },
      ]、
      showWelfare: false, // 雇用福利厚生 onlineForm: {
        benefits: "",//仕事のメリット},
      チェックリスト: [],
      ： 間違い、
    };
  },
  メソッド: {
    //求人特典ポップアップ clickWelfare () {
      this.showRedTips()
      this.showWelfare = true
    },
    //福祉項目を選択する clickWelfareItem (v) {
      （アクティブ）の場合{
        Vue.set(v, 'active', false)
      } それ以外の場合 (this.checkedList.length < 5) {
        Vue.set(v, 'active', true)
      }
      this.checkedList = this.welfareList.filter(function (item) {
        アイテムを返す。アクティブ
      })
      if (this.checkedList.length >= 5) {
        トースト('選択できるのは5つまでです')
      }
    },
    //完全な福祉オプション onConfirmSpeed ​​() {
      this.showWelfare = false
      this.welfareChange = false
      itemList = this.checkedList.map((item) => { とします。
        アイテムを返す.テキスト
      });
      str = itemList.join('/') とします。
      str1 = itemList.join(';') とします。
      this.benefits = str ? str : this.benefits
      this.onlineForm.benefits = str1 ? str1 : this.benefits
    },
    表示赤ヒント() {
      this.welfareChange = false
    },
    オンフォーカス（）{
      this.showRedTips()
    },
    //次へボタンの色の値 colorChange() {
      if (this.onlineForm.benefits) {
        真を返す
      }
    },
    // ValidateValidateOnlineForm() {
      有効 = true とします。
      if (!this.onlineForm.benefits || !this.onlineForm.benefits.trim()) {
        有効 = 偽;
        トースト('仕事のメリットを選択してください')
        this.welfareChange = true
      }
      有効な値を返します。
    },
    //送信するsubmit(){
      if (this.validateOnlineForm()) {
        トースト('送信')
      }
    },
  },
};
</スクリプト>
 
<style スコープ lang="less" >
* {
  マージン: 0;
  パディング: 0;
}
::v-deep .van-picker__title {
  フォントサイズ: 17px;
  フォントファミリー: PingFangSC、PingFangSC-Medium;
  フォントの太さ: 500;
  テキスト配置: 中央;
  色: #333333;
}
.リリースポスト{
  幅: 100%;
  パディング下部: 64px;
  パディング上部: 定数(セーフエリアインセット上部);
  パディング上部: env(セーフエリアインセット上部);
}
.post_welfare {
  ::v-deep .van-field__control:disabled {
    フォントサイズ: 15px;
    フォントファミリ: PingFangSC、PingFangSC-Regular;
    フォントの太さ: 400;
    テキスト配置: 左;
    色: #333333;
    -webkit-テキスト塗りつぶし色: #333333;
  }
  ::v-deep入力::-webkit-input-placeholder {
    フォントサイズ: 15px;
    フォントファミリ: PingFangSC、PingFangSC-Regular;
    フォントの太さ: 400;
    テキスト配置: 左;
    色: #999999;
    -webkit-テキスト塗りつぶし色: #999999;
  }
}
::v-deep .van-field__control:disabled {
  フォントサイズ: 15px;
  フォントファミリ: PingFangSC、PingFangSC-Regular;
  フォントの太さ: 400;
  テキスト配置: 左;
  色: #333333;
  -webkit-テキスト塗りつぶし色: #333333;
}
 
.welfare_content {
  パディング上部: 10px;
  パディング下部: 30px;
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースを空ける;
  アイテムの位置を中央揃えにします。
  flex-wrap: ラップ;
  マージン: 0 16px;
}
#福祉項目 {
  幅: 31%;
}
.welfare_top {
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースの間;
  アイテムの位置を中央揃えにします。
  パディング: 13px 0;
  下境界線: 実線 0.5px #e5e5e5;
}
.welfare_title {
  フォントサイズ: 17px;
  フォントファミリー: PingFangSC、PingFangSC-Medium;
  フォントの太さ: 500;
  テキスト配置: 中央;
  色: #333333;
  右マージン: -16px;
}
.welfare_btn {
  フォントサイズ: 16px;
  フォントファミリ: PingFangSC、PingFangSC-Regular;
  フォントの太さ: 400;
  テキスト配置: 右;
  色: #333333;
  右マージン: 16px;
}
.welfare_text {
  高さ: 36px;
  背景: #f4f8ff;
  境界線: 1px 実線 #bbdcff;
  境界線の半径: 4px;
  上マージン: 10px;
  行の高さ: 36px;
 
  フォントサイズ: 14px;
  フォントファミリー: PingFangSC、PingFangSC-Medium;
  フォントの太さ: 500;
  テキスト配置: 中央;
  色: #1283ff;
}
.not_welfare_text {
  高さ: 36px;
  背景: #ffffff;
  境界線: 1px 実線 #e5e5e5;
  境界線の半径: 4px;
  上マージン: 10px;
  行の高さ: 36px;
 
  フォントサイズ: 14px;
  フォントファミリー: PingFang、PingFang-SC;
  フォントの太さ: 500;
  テキスト配置: 中央;
  色: #333333;
}
 
.履歴書コンテンツ{
  左マージン: 30px;
  右マージン: 30px;
  ::v-ディープ{
    .van-popup--bottom {
      左上の境界線の半径: 12px;
      右上の境界線の半径: 12px;
    }
  }
}
。マスク {
  幅: 100%;
  背景: #ffffff;
  ボックスの影: 0px 0px 8px 0px rgba(204, 204, 204, 0.3);
  位置: 固定;
  下部: 0;
  左: 0;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  パディング: 10px 0;
  パディング下部: calc(env(セーフエリアインセット下部)+15px);
  パディング下部: calc(env(セーフエリアインセット下部) + 15px);
}
.btn{
  フォントサイズ: 16px;
  フォントファミリー: PingFangSC、PingFangSC-Medium;
  フォントの太さ: 500;
  テキスト配置: 左;
  色: #ffffff;
  マージン: 0 自動;
  テキスト配置: 中央;
  行の高さ: 1.6rem;
  幅: 100%;
  マージン: 0 16px;
  高さ: 48px;
  背景: #d8d8d8;
}
.btnBg {
  フォントサイズ: 16px;
  フォントファミリー: PingFangSC、PingFangSC-Medium;
  フォントの太さ: 500;
  テキスト配置: 左;
  色: #ffffff;
  マージン: 0 自動;
  テキスト配置: 中央;
  行の高さ: 1.6rem;
  幅: 100%;
  マージン: 0 16px;
  高さ: 48px;
  背景: #d8d8d8;
  境界線: なし;
  アウトライン: なし;
  背景: 線形グラデーション(90度, #50a3ff, #1283ff);
  境界線の半径: 4px;
}
 
.name_title {
  フォントサイズ: 16px;
  フォントファミリー: PingFangSC、PingFangSC-Medium;
  フォントの太さ: 500;
  色: #333333;
}
 
。必須 {
  フォントサイズ: 13px;
  フォントファミリ: PingFangSC、PingFangSC-Regular;
  フォントの太さ: 400;
  色: #ff1d28;
  位置: 絶対;
}
.カレンダー{
  幅: 100%;
  高さ: 49px;
  背景: #ffffff;
  境界線: 1px 実線 #e5e5e5;
  境界線の半径: 5px;
  上マージン: 10px;
  左パディング: 20px;
  背景: url("./images/drop-down.png") 繰り返しなし 96% 中央;
  背景サイズ: 10px 7px;
  右パディング: 25px;
  ::v-deep .van-field__control {
    フォントサイズ: 15px;
    フォントファミリ: PingFangSC、PingFangSC-Regular;
    フォントの太さ: 400;
    テキスト配置: 左;
    色: #333333;
    上マージン: 12px;
  }
}
::v-deep入力::-webkit-input-placeholder {
  フォントサイズ: 15px;
  フォントファミリ: PingFangSC、PingFangSC-Regular;
  フォントの太さ: 400;
  テキスト配置: 左;
  色: #afadad;
  -webkit-テキスト塗りつぶし色: #afadad;
}
.テーブルリスト{
  上マージン: 16px;
}
.borderStyle {
  境界線: 実線 1px #ff1d28;
  境界線の半径: 3px;
}
入力::-webkit-入力プレースホルダー {
  フォントサイズ: 15px;
  フォントファミリ: PingFangSC、PingFangSC-Regular;
  フォントの太さ: 400;
  テキスト配置: 左;
  色: #999999;
}
.van-field__control {
  色: #333333;
}
</スタイル>