How to realize the Multi-option function of bottom Pop-up window by vue

This article mainly explains the "vue how to achieve the bottom pop-up window multi-option function", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vue how to achieve the bottom pop-up window multi-option function" bar!

This paper gives you an example to share the specific code of vue to realize multiple selection of pop-up windows at the bottom for your reference. The details are as follows.

Code:

Post benefits *

Welfare benefits (multiple choices)

Complete

{{item.text}}

Complete 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: "package"}, {id: 2, text: "package"}, {id: 3, text: "social insurance and house fund"} {id: 4, text: "double salary at the end of the year"}, {id: 5, text: "Commercial Insurance"}, {id: 6, text: "accident Insurance"}, {id: 7, text: "team Building"} {id: 8, text: "two days off on weekends"}, {id: 9, text: "afternoon tea"}, {id: 10, text: "meal supplement"}, {id: 11 Text: "Transport subsidy"}, {id: 12, text: "shuttle bus"}, {id: 13, text: "bonus"}, {id: 14, text: "Public training"} {id: 15, text: "free travel"},], showWelfare: false,// post welfare onlineForm: {benefits: ", / / post welfare}, checkedList: [], welfareChange: false,} }, methods: {/ / Pop-up post 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 ('up to 5')}}, / / complete the welfare option 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}}, / / verify validateOnlineForm () {let valid = true If (! this.onlineForm.benefits | |! this.onlineForm.benefits.trim ()) {valid = false; Toast ('Please select post benefits') this.welfareChange = true} return valid;}, / / submit submit () {if (this.validateOnlineForm ()) {Toast ('submit')}},},}; * {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;} .subscription _ 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: # 3333;} .cake _ 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: 0 auto; text-align: center; line-height: 1.6 remand; 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.6remr; width: 100%; margin: 016px; 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: 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;} Thank you for your reading. The above is the content of "how to achieve the bottom pop-up window multi-option function in vue". After the study of this article, I believe you have a deeper understanding of how to achieve the bottom pop-up window multi-option function in vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!