Vue implements multiple selections in the bottom pop-up window

Vue implements multiple selections in the bottom pop-up window

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:
  • Use Vue components to implement a simple pop-up effect
  • Summary of knowledge points about vue.js pop-up components
  • Great vue pop-up component
  • How to use the Vue pop-up message component
  • VUE implements a pop-up component that can be dragged at will
  • Vue implements the operation of clicking the button "View Details" to display the details list in a pop-up window
  • Detailed example of Vue's toast pop-up component
  • Destroy and hide operations when closing pop-up components in Vue
  • When Vue pops up, listen to the phone's return key to close the pop-up function (the page does not jump)
  • Use VUE to hide text information in the table when there are more than 5 characters and display all the characters when the mouse is moved

<<:  Detailed explanation of the implementation principle of MySQL transactions and Spring isolation levels

>>:  Detailed explanation of Xshell common problems and related configurations

Recommend

Vue uses custom instructions to add watermarks to the bottom of the page

Project Scenario Add a custom watermark to the en...

Detailed explanation of Nginx timed log cutting

Preface By default, Nginx logs are written to a f...

In-depth understanding of uid and gid in docker containers

By default, processes in the container run with r...

How to use boost.python to call c++ dynamic library in linux

Preface Recently I started using robot framework ...

Let's talk about the Vue life cycle in detail

Table of contents Preface 1. Life cycle in Vue2 I...

Detailed explanation of where the images pulled by docker are stored

The commands pulled by docker are stored in the /...

About Vue's 4 auxiliary functions of Vuex

Table of contents 1. Auxiliary functions 2. Examp...

Several implementation methods of the tab bar (recommended)

Tabs: Category + Description Tag bar: Category =&...

Detailed tutorial on installing and using Kong API Gateway with Docker

1 Introduction Kong is not a simple product. The ...

CSS3 realizes the graphic falling animation effect

See the effect first Implementation Code <div ...

Basic operations of mysql learning notes table

Create Table create table table name create table...