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:
|
>>: Detailed explanation of Xshell common problems and related configurations
Recommend
Detailed explanation of the solution to the error in creating a user and granting permissions in mysql8.0
Question 1: The writing method that will report a...
How to add, delete and modify columns in MySQL database
This article uses an example to describe how to a...
Solutions to MySQL batch insert and unique index problems
MySQL batch insert problem When developing a proj...
How to Understand and Identify File Types in Linux
Preface As we all know, everything in Linux is a ...
A simple and effective solution to forget the initial password when installing MySQL
When you install MySQL, you will be given an init...
iFrame is a great way to use it as a popup layer to cover the background
I have been working on a project recently - Budou ...
Detailed code of the example of downloading the docker installation package from yum and installing it on an offline machine
1. On a networked machine, use the default centos...
HTML code to add quantity badge to message button
HTML code: <a onclick="goMessage();"...
Detailed explanation of the process of zabbix monitoring sqlserver
Let's take a look at zabbix monitoring sqlser...
Native JavaScript to achieve slide effects
When we create a page, especially a homepage, we ...
js realizes the dynamic loading of data by waterfall flow bottoming out
This article shares with you the specific code of...
Docker configures the storage location of local images and containers
Use the find command to find files larger than a ...
Docker compose custom network to achieve fixed container IP address
Due to the default bridge network, the IP address...
Detailed explanation of how to solve the problem of too long content in CSS
When we write CSS, we sometimes forget about the ...
Process parsing of reserved word instructions in Dockerfile
Table of contents 1. What is Dockerfile? 2. Analy...