vue实现底部弹窗多选 vue实现底部弹窗多选

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

文章图片

文章图片

文章图片

代码：

* {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; }

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