我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-前端开发

vue实现底部弹窗多选

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

vue实现底部弹窗多选

本文实例为大家分享了vue实现底部弹窗多选的具体代码，供大家参考，具体内容如下

代码：


<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="请选择岗位福利"
              @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: "五险一金"
        },
        {
          id: 4,
          text: "年底双薪"
        },
        {
          id: 5,
          text: "商业险"
        },
        {
          id: 6,
          text: "意外险"
        },
        {
          id: 7,
          text: "团建"
        },
        {
          id: 8,
          text: "周末双休"
        },
        {
          id: 9,
          text: "下午茶"
        },
        {
          id: 10,
          text: "餐补"
        },
        {
          id: 11,
          text: "交通补助"
        },
        {
          id: 12,
          text: "班车接送"
        },
        {
          id: 13,
          text: "奖金"
        },
        {
          id: 14,
          text: "公费培训"
        },
        {
          id: 15,
          text: "公费旅游"
        },
      ],
      showWelfare: false,//岗位福利
      onlineForm: {
        benefits: "",//岗位福利
      },
      checkedList: [],
      welfareChange: false,
    };
  },
  methods: {
    //弹出岗位福利
    clickWelfare () {
      this.showRedTips()
      this.showWelfare = true
    },
    //选择福利项
    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个哦')
      }
    },
    //完成福利选项
    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
      }
    },
    // 验证
    validateOnlineForm () {
      let valid = true;
      if (!this.onlineForm.benefits || !this.onlineForm.benefits.trim()) {
        valid = false;
        Toast('请选择岗位福利')
        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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉

vue实现底部弹窗多选

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

vue实现底部弹窗多选

2024-04-02

Flutter 底部弹窗如何实现多项选择

2024-04-02

Android实现底部弹窗效果

本文实例为大家分享了Android实现底部弹窗效果的具体代码，供大家参考，具体内容如下源代码地址：https://github.com/luoye123/Box东西很简单，我就直接亮代码了： 1、activity_main.xml
2023-05-31

Flutter实现底部弹窗效果

2024-04-02

vue实现弹窗翻页多选效果

2024-04-02

Android实现底部支付弹窗效果

Android底部支付弹窗实现的效果：实现的思路： 1.通过继承PopupWindow自定义View来达到弹窗的弹出效果； 2.通过回调将输入的密码由弹窗传入到主界面中； 2.恩，这就够了——>有些注意点在代码中备注； 自定义View的代码
2022-06-06

微信小程序实现底部弹窗

2024-04-02

Android底部弹窗的实现示例代码

本文主要是介绍Android中实现底部弹窗的的正确姿势，如果你在实现底部弹窗时遇到了一些问题，那么请仔细阅读本文，相信文章会对你有所帮助。收获早知道阅读完本文后，你可以有以下收获 利用PopupWindow实现底部弹窗 PopupWin
2023-05-30

Flutter多项选择弹窗实现详解

2024-04-02

Android实现底部滚轮式选择弹跳框

2024-04-02

Vue如何实现弹窗Modal

2024-04-02

vue实现弹窗拖拽效果

2024-04-02

Vue实现简单弹窗效果

2024-04-02

jQuery如何实现弹窗下底部页面禁止滑动效果

2024-04-02

在Android项目中实现一个底部支付弹窗的方法

在Android项目中实现一个底部支付弹窗的方法？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。Android底部支付弹窗实现的效果：实现的思路：1.通过继承PopupWindo
2023-05-31

Android 实现IOS选择拍照相册底部弹出的实例

Android 实现IOS选择拍照相册底部弹出的实例效果图1. AndroidStudio使用dependencies { compile 'com.guoqi.widget:actionsheet:1.0'}
2023-05-30

flutter底部弹出BottomSheet怎么实现

本篇内容介绍了“flutter底部弹出BottomSheet怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果图：ModalBott
2023-06-29

Vue弹窗组件的实现方法

2024-04-02

vue如何实现底部加载更多功能

本篇内容主要讲解“vue如何实现底部加载更多功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue如何实现底部加载更多功能”吧!实现代码如下：