溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue怎么實(shí)現(xiàn)底部彈窗多選項(xiàng)功能

發(fā)布時(shí)間：2021-09-06 10:02:42 來(lái)源：億速云 閱讀：161 作者：chen 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要講解了“vue怎么實(shí)現(xiàn)底部彈窗多選項(xiàng)功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue怎么實(shí)現(xiàn)底部彈窗多選項(xiàng)功能”吧！

本文實(shí)例為大家分享了vue實(shí)現(xiàn)底部彈窗多選的具體代碼，供大家參考，具體內(nèi)容如下

vue怎么實(shí)現(xiàn)底部彈窗多選項(xiàng)功能

vue怎么實(shí)現(xiàn)底部彈窗多選項(xiàng)功能

vue怎么實(shí)現(xiàn)底部彈窗多選項(xiàng)功能

代碼：

<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">崗位福利<span class="required">*</span></p>
            <van-field
              class="calendar"
              input-align="left"
              v-model="benefits"
              placeholder="請(qǐng)選擇崗位福利"
              @focus="onFocus"
              :class="{ borderStyle: welfareChange }"
              @click.stop="clickWelfare"
              :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="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"
        >
          完成
        </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: "包吃"
        },
        {
          id: 2,
          text: "包住"
        },
        {
          id: 3,
          text: "五險(xiǎn)一金"
        },
        {
          id: 4,
          text: "年底雙薪"
        },
        {
          id: 5,
          text: "商業(yè)險(xiǎn)"
        },
        {
          id: 6,
          text: "意外險(xiǎn)"
        },
        {
          id: 7,
          text: "團(tuán)建"
        },
        {
          id: 8,
          text: "周末雙休"
        },
        {
          id: 9,
          text: "下午茶"
        },
        {
          id: 10,
          text: "餐補(bǔ)"
        },
        {
          id: 11,
          text: "交通補(bǔ)助"
        },
        {
          id: 12,
          text: "班車接送"
        },
        {
          id: 13,
          text: "獎(jiǎng)金"
        },
        {
          id: 14,
          text: "公費(fèi)培訓(xùn)"
        },
        {
          id: 15,
          text: "公費(fèi)旅游"
        },
      ],
      showWelfare: false,//崗位福利
      onlineForm: {
        benefits: "",//崗位福利
      },
      checkedList: [],
      welfareChange: false,
    };
  },
  methods: {
    //彈出崗位福利
    clickWelfare () {
      this.showRedTips()
      this.showWelfare = true
    },
    //選擇福利項(xiàng)
    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('最多只能選擇5個(gè)哦')
      }
    },
    //完成福利選項(xiàng)
    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()
    },
    //下一步按鈕色值
    colorChange () {
      if (this.onlineForm.benefits) {
        return true
      }
    },
    // 驗(yàn)證
    validateOnlineForm () {
      let valid = true;
      if (!this.onlineForm.benefits || !this.onlineForm.benefits.trim()) {
        valid = false;
        Toast('請(qǐng)選擇崗位福利')
        this.welfareChange = true
      }
      return valid;
    },
    //提交
    submit () {
      if (this.validateOnlineForm()) {
        Toast('提交')
      }
    },
  },
};
</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>

感謝各位的閱讀，以上就是“vue怎么實(shí)現(xiàn)底部彈窗多選項(xiàng)功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue怎么實(shí)現(xiàn)底部彈窗多選項(xiàng)功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手