This article example shares the specific code of Vue to implement multiple selections in the bottom pop-up window for your reference. The specific content is as follows Code: <template> <div class="release-post"> <div class="resume_main"> <div class="resume_content"> <van-form> <div class="table_list post_welfare"> <p class="name_title">Job Benefits<span class="required">*</span></p> <van-field class="calendar" input-align="left" v-model="benefits" placeholder="Please select job benefits" @focus="onFocus" :class="{ borderStyle: welfareChange }" @click.stop="clickWelfare" :disabled="true" /> </div> </van-form> <!-- Job Benefits--> <van-popup v-model="showWelfare" position="bottom"> <div class="welfare_top"> <p></p> <p class="welfare_title">Benefits (multiple choices)</p> <p class="welfare_btn" @click.stop="onConfirmSpeed">Done</p> </div> <div class="welfare_content"> <div v-for="(item, index) in welfareList" :key="index" :class="{ active: item.active }" id="welfare_item" @click.stop="clickWelfareItem(item, index)" > <p :class="item.active ? 'welfare_text' : 'not_welfare_text'"> {{ item.text }} </p> </div> </div> </van-popup> </div> </div> <div> <div class="mask"> <button class="btn" @click="submit" :class="{ btnBg: colorChange() }" v-preventReClick="1000" > Done</button> </div> </div> </div> </template> <script> import Vue from 'vue'; import { Circle, DatetimePicker, Form, Field, Toast, Calendar, Picker, Overlay, ActionSheet, Popup } from 'vant'; import '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); export default { name: "PerfectPost", data () { return { welfareList: [ { id: 1, text: "Meals included" }, { id: 2, text: "wrap" }, { id: 3, text: "Five social insurances and one housing fund" }, { id: 4, text: "Double salary at the end of the year" }, { id: 5, text: "commercial insurance" }, { id: 6, text: "Accidental Insurance" }, { id: 7, text: "Team Building" }, { id: 8, text: "Weekend off" }, { id: 9, text: "Afternoon Tea" }, { id: 10, text: "Meal allowance" }, { id: 11, text: "Transportation subsidy" }, { id: 12, text: "Shuttle bus pick-up" }, { id: 13, text: "bonus" }, { id: 14, text: "Publicly funded training" }, { id: 15, text: "public travel" }, ], showWelfare: false, //Job welfare onlineForm: { benefits: "",//Job benefits}, checkedList: [], : false, }; }, methods: { //Pop up job benefits clickWelfare () { this.showRedTips() this.showWelfare = true }, //Select welfare item clickWelfareItem (v) { if (v.active) { Vue.set(v, 'active', false) } else if (this.checkedList.length < 5) { Vue.set(v, 'active', true) } this.checkedList = this.welfareList.filter(function (item) { return item.active }) if (this.checkedList.length >= 5) { Toast('You can only select up to 5') } }, //Complete welfare options onConfirmSpeed () { this.showWelfare = false this.welfareChange = false let itemList = this.checkedList.map((item) => { return item.text }); let str = itemList.join('/') let str1 = itemList.join(';') this.benefits = str ? str : this.benefits this.onlineForm.benefits = str1 ? str1 : this.benefits }, showRedTips() { this.welfareChange = false }, onFocus () { this.showRedTips() }, //Next button color value colorChange () { if (this.onlineForm.benefits) { return true } }, // ValidatevalidateOnlineForm () { let valid = true; if (!this.onlineForm.benefits || !this.onlineForm.benefits.trim()) { valid = false; Toast('Please select job benefits') this.welfareChange = true } return valid; }, //Submit submit () { if (this.validateOnlineForm()) { Toast('Submit') } }, }, }; </script> <style scoped lang="less" > * { margin: 0; padding: 0; } ::v-deep .van-picker__title { font-size: 17px; font-family: PingFangSC, PingFangSC-Medium; font-weight: 500; text-align: center; color: #333333; } .release-post { width: 100%; padding-bottom: 64px; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); } .post_welfare { ::v-deep .van-field__control:disabled { font-size: 15px; font-family: PingFangSC, PingFangSC-Regular; font-weight: 400; text-align: left; color: #333333; -webkit-text-fill-color: #333333; } ::v-deep input::-webkit-input-placeholder { font-size: 15px; font-family: PingFangSC, PingFangSC-Regular; font-weight: 400; text-align: left; color: #999999; -webkit-text-fill-color: #999999; } } ::v-deep .van-field__control:disabled { font-size: 15px; font-family: PingFangSC, PingFangSC-Regular; font-weight: 400; text-align: left; color: #333333; -webkit-text-fill-color: #333333; } .welfare_content { padding-top: 10px; padding-bottom: 30px; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; margin: 0 16px; } #welfare_item { width: 31%; } .welfare_top { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: solid 0.5px #e5e5e5; } .welfare_title { font-size: 17px; font-family: PingFangSC, PingFangSC-Medium; font-weight: 500; text-align: center; color: #333333; margin-right: -16px; } .welfare_btn { font-size: 16px; font-family: PingFangSC, PingFangSC-Regular; font-weight: 400; text-align: right; color: #333333; margin-right: 16px; } .welfare_text { height: 36px; background: #f4f8ff; border: 1px solid #bbdcff; border-radius: 4px; margin-top: 10px; line-height: 36px; font-size: 14px; font-family: PingFangSC, PingFangSC-Medium; font-weight: 500; text-align: center; color: #1283ff; } .not_welfare_text { height: 36px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 4px; margin-top: 10px; line-height: 36px; font-size: 14px; font-family: PingFang, PingFang-SC; font-weight: 500; text-align: center; color: #333333; } .resume_content { margin-left: 30px; margin-right: 30px; ::v-deep { .van-popup--bottom { border-top-left-radius: 12px; border-top-right-radius: 12px; } } } .mask { width: 100%; background: #ffffff; box-shadow: 0px 0px 8px 0px rgba(204, 204, 204, 0.3); position: fixed; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; padding: 10px 0; padding-bottom: calc(env(safe-area-inset-bottom)+15px); padding-bottom: calc(env(safe-area-inset-bottom) + 15px); } .btn { font-size: 16px; font-family: PingFangSC, PingFangSC-Medium; font-weight: 500; text-align: left; color: #ffffff; margin: 0 auto; text-align: center; line-height: 1.6rem; width: 100%; margin: 0 16px; height: 48px; background: #d8d8d8; } .btnBg { font-size: 16px; font-family: PingFangSC, PingFangSC-Medium; font-weight: 500; text-align: left; color: #ffffff; margin: 0 auto; text-align: center; line-height: 1.6rem; width: 100%; margin: 0 16px; height: 48px; background: #d8d8d8; border: none; outline: none; background: linear-gradient(90deg, #50a3ff, #1283ff); border-radius: 4px; } .name_title { font-size: 16px; font-family: PingFangSC, PingFangSC-Medium; font-weight: 500; color: #333333; } .required { font-size: 13px; font-family: PingFangSC, PingFangSC-Regular; font-weight: 400; color: #ff1d28; position: absolute; } .calendar { width: 100%; height: 49px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 5px; margin-top: 10px; padding-left: 20px; background: url("./images/drop-down.png") no-repeat 96% center; background-size: 10px 7px; padding-right: 25px; ::v-deep .van-field__control { font-size: 15px; font-family: PingFangSC, PingFangSC-Regular; font-weight: 400; text-align: left; color: #333333; margin-top: 12px; } } ::v-deep input::-webkit-input-placeholder { font-size: 15px; font-family: PingFangSC, PingFangSC-Regular; font-weight: 400; text-align: left; color: #afadad; -webkit-text-fill-color: #afadad; } .table_list { margin-top: 16px; } .borderStyle { border: solid 1px #ff1d28; border-radius: 3px; } input::-webkit-input-placeholder { font-size: 15px; font-family: PingFangSC, PingFangSC-Regular; font-weight: 400; text-align: left; color: #999999; } .van-field__control { color: #333333; } </style> The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
>>: Detailed explanation of Xshell common problems and related configurations
background: Tablespace: All INNODB data is stored...
Project Scenario Add a custom watermark to the en...
Table of contents 1. Problems encountered 2. Idea...
Preface By default, Nginx logs are written to a f...
By default, processes in the container run with r...
Preface Recently I started using robot framework ...
We all know that Jmeter provides native result vi...
Table of contents Preface 1. Life cycle in Vue2 I...
The commands pulled by docker are stored in the /...
Table of contents 1. Auxiliary functions 2. Examp...
Tabs: Category + Description Tag bar: Category =&...
1 Introduction Kong is not a simple product. The ...
See the effect first Implementation Code <div ...
During the installation of Ubuntu 18, the mmx64.e...
Create Table create table table name create table...