vue下拉框选中时切换下方列表数据,vue弹出选择框
这篇文章主要为大家详细介绍了某视频剪辑软件实现底部弹窗多选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现底部弹窗多选的具体代码，供大家参考，具体内容如下
代码：
模板
div class=release-post
div class=resume_main
div class=简历内容
货车形
div class= table _ list post _ welfare
名称标题岗位福利 span class=必需*/span/p
范菲尔德
class=日历
输入对齐=左
v-model=利益
占位符=请选择岗位福利
@focus=onFocus
:class= { border style:福利变}
@ click.stop=福利
:disabled=true
/
/div
/van-form
！-岗位福利-
van-popup v-model=显示福利 position= bottom
div class=welfare_top
p/p
福利_标题福利待遇（可多选)/p
“福利_ BTN”@点击。stop= onConfirmSpeed 完成/p
/div
div class=福利_内容
差异
福利列表中的v-for=(项目，索引)
:key=index
:class={ active: item.active }
id=福利_项目
@点击。stop=福利项目(item，index)
p :class=item.active？福利_文本:非福利_文本
{{ item.text }}
/p
/div
/div
/van-popup
/div
/div
差异
div class=mask
按钮
class=btn
@click=提交
:class={ btnBg: colorChange() }
v-防止点击= 1000
完成
/按钮
/div
/div
/div
/模板
脚本
从“Vue”导入Vue
从"万特"导入{ Circle，DatetimePicker，Form，Field，Toast，Calendar，Picker，Overlay，ActionSheet，Popup }。
导入" vant/lib/index。少”；
Vue.use(圈)。使用(日期时间选择器).使用（形式)。使用（字段)。使用（吐司)。使用（日历)。使用（选取器)。使用（覆盖)。使用（动作表)。使用（弹出);
导出默认值{
名称：完美发布，
data () {
返回{
福利列表：[
{
id: 1，
文本： 包吃
},
{
id: 2，
文本： 包住
},
{
id: 3，
文本： 五险一金
},
{
id: 4，
文本： 年底双薪
},
{
id: 5，
文本： 商业险
},
{
id: 6，
文本： 意外险
},
{
id: 7，
文本： 团建
},
{
id: 8，
文本： 周末双休
},
{
id: 9，
文本： 下午茶
},
{
id: 10，
文本： 餐补
},
{
id: 11，
文本： 交通补助
},
{
id: 12，
文本： 班车接送
},
{
id: 13，
文本： 奖金
},
{
id: 14，
文本： 公费培训
},
{
id: 15，
文本： 公费旅游
},
],
showWelfare: false，//岗位福利
onlineForm: {
优势： ,//岗位福利
},
选中列表：[],
福利变化：错误，
};
},
方法：{
//弹出岗位福利
点击福利(){
this.showRedTips()
this.showWelfare=true
},
//选择福利项
单击福利项目{
if (v.active) {
Vue.set(v，活动，假)
} else if(这个。检查列表。长度5){
Vue.set(v，活动，真)
}
这个。检查列表=这个。福利清单。过滤器(功能(项目){
返回项目。活动
})
if (this.checkedList.length=5) {
吐司(最多只能选择5个哦)
}
},
//完成福利选项
onConfirmSpeed () {
this.showWelfare=false
this.welfareChange=false
让物品清单=这个。检查列表。映射((项目)={
返回项目.文本
});
let str=itemList.join(/)
设str 1=项目列表。联接(；))
this.benefits=str？str:这。好处
this.onlineForm.benefits=str1？str1:这。好处
},
showRedTips () {
this.welfareChange=false
},
onFocus () {
this.showRedTips()
},
//下一步按钮色值
colorChange () {
if (this.onlineForm.benefits) {
返回真实的
}
},
//验证
validateOnlineForm () {
设有效=真
如果(!this.onlineForm.benefits ！这个。在线表单。好处。trim()){
有效=错误
吐司(请选择岗位福利)
this.welfareChange=true
}
返回有效；
},
//提交
提交(){
if (this.validateOnlineForm()) {
吐司(提交)
}
},
},
};
/脚本
样式范围语言=少
* {
边距：0;
填充：0;
}
*深v型。货车搬运工_ _标题{
字体大小：17px
字体系列：PingFangSC，ping fangsc-Medium；
字体粗细：500;
文本对齐：居中；
颜色：# 333333;
}。发布-发布{
宽度：100%;
垫底：64px
顶部填充：常量（安全区域-顶部嵌入)；
padding-top:env(safe-area-inset-top)；
}。邮政福利{
*深v型van-field _ _控制：禁用{
字号：15px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：左对齐；
颜色：# 333333;
-WebKit-text-fill-color:# 333333；
}
*五-深度输入：-webkit-input-placeholder {
字号：15px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：左对齐；
颜色：# 999999;
-WebKit-text-fill-color:# 999999；
}
}
*深v型van-field _ _控制：禁用{
字号：15px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：左对齐；
颜色：# 333333;
-WebKit-text-fill-color:# 333333；
}。福利内容{
填充顶部：10px
填充-底部：30px
显示器：flex
justify-content:space-around；
对齐-项目：居中；
柔性包装：缠绕；
边距：0 16px
}
#福利_项目{
宽度：31%;
}。福利_top {
显示器：flex
justify-content:space-between；
对齐-项目：居中；
填充：13px 0；
边框-底部：实心0.5px # e5e5e5
}。福利_头衔{
字体大小：17px
字体系列：PingFangSC，ping fangsc-Medium；
字体粗细：500;
文本对齐：居中；
颜色：# 333333;
边距-右侧：-16px；
}。福利_btn {
字体大小：16px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：右对齐；
颜色：# 333333;
右边距：16px
}。福利_text {
高度：36px
背景：# F4F8 ff；
边框：1px solid # bbdcff
边框-半径：4px
页边距-顶部：10px
行高：36px
字体大小：14px
字体系列：PingFangSC，ping fangsc-Medium；
字体粗细：500;
文本对齐：居中；
颜色：# 1283ff
}。不是_福利_text {
高度：36px
背景：# ffffff
边框：1px纯色# e5e5e5
边框-半径：4px
页边距-顶部：10px
行高：36px
字体大小：14px
字体系列：方平，方平-SC；
字体粗细：500;
文本对齐：居中；
颜色：# 333333;
}。简历_内容{
左边距：30px
右边距：30px
*五型深{。货车-弹出-底部{
border-top-left-radius:12px；
border-top-right-radius:12px；
}
}
}。面具{
宽度：100%;
背景：# ffffff
盒影：0px 0px 8px 0px rgba(204，204，204，0.3)；
位置：固定；
底部：0;
左：0;
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
填充：10px 0；
padding-bottom:calc(env(safe-area-inset-bottom)15px)；
padding-bottom:calc(env(safe-area-inset-bottom)15px)；
}。btn {
字体大小：16px
字体系列：PingFangSC，ping fangsc-Medium；
字体粗细：500;
文本对齐：左对齐；
颜色：# ffffff
边距：0自动；
文本对齐：居中；
行高：1.6雷姆；
宽度：100%;
边距：0 16px
高度：48px
背景：# d8d 8；
}。btnBg {
字体大小：16px
字体系列：PingFangSC，ping fangsc-Medium；
字体粗细：500;
文本对齐：左对齐；
颜色：# ffffff
边距：0自动；
文本对齐：居中；
行高：1.6雷姆；
宽度：100%;
边距：0 16px
高度：48px
背景：# d8d 8；
边框：无；
大纲：无；
背景：线性梯度(90度、#50a3ff、# 1283 ff)；
边框-半径：4px
}。name_title {
字体大小：16px
字体系列：PingFangSC，ping fangsc-Medium；
字体粗细：500;
颜色：# 333333;
}。必需的{
字体大小：13px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
颜色：# ff1d28
位置：绝对；
}。日历{
宽度：100%;
高度：49px
背景：# ffffff
边框：1px纯色# e5e5e5
边框半径：5px
页边距-顶部：10px
左填充：20px
背景：url( ./图像/下拉菜单。png’)不重复96%居中；
背景-尺寸：10像素7像素
填充-右：25px
*深v型van-field__control {
字号：15px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：左对齐；
颜色：# 333333;
边距-顶部：12px
}
}
*五-深度输入：-webkit-input-placeholder {
字号：15px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：左对齐；
颜色：# afadad
-WebKit-text-fill-color:# AFA爸爸；
}。表_列表{
边距-顶部：16px
}。边框样式{
边框：纯色1px # ff1d28
边框半径：3px
}
输入：-webkit-input-placeholder {
字号：15px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：左对齐；
颜色：# 999999;
}。van-field__control {
颜色：# 333333;
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。