在很多h5活动推广页面 都会用到单选或者多选 会结合一些ui框架来做 但是呢 可能因为样式或者其它因素 导致并不是很好用 就得用到手写了
第一种:
废话不多说 先上图
就类似于这样的 代码撸起来
<template>
<div class="applyloan">
<h3><span></span>职业类型</h3>
<div class='optionstyle'>
<ul class="box">
<li v-for="item,index of occupationalList" :class="{checked:item.infoOptionKey===jobType}" @click="changejob(item,index)">{{item.infoOptionName}}</li>
</ul>
</div>
</div>
<div class="applyloan" v-show="jobType=='employees'">
<h3><span></span>工资发放形式</h3>
<div class='optionstyle'>
<ul class="box">
<li v-for="item,index of paymentList" :class="{checked:item.infoOptionKey===salaryType}" @click="changeoffer(item,index)">{{item.infoOptionName}}</li>
</ul>
</div>
<!-- <options :options="paymentList" :isMultiply=true></options> -->
</div>
<div class="applyloan">
<h3><span></span>月收入</h3>
<div class='optionstyle'>
<ul class="box">
<li v-for="item,index of incomeList" :class="{checked:item.infoOptionKey===monthlyIncome}" @click="changeincome(item,index)">{{item.infoOptionName}}</li>
</ul>
</div>
<!-- <options :options="incomeList" :isMultiply=true></options> -->
</div>
<div class="applyloan">
<h3><span></span>公司代缴社保</h3>
<div class='optionstyles'>
<ul class="box">
<li v-for="item,index of securityList" :class="{checked:item.infoOptionKey===socialSecurity}" @click="changesecur(item,index)">{{item.infoOptionName}}</li>
</ul>
</div>
</div>
<div class="applyloan" v-show="socialSecurity!='social_no_social_security'">
<h3><span></span>公司代缴公积金</h3>
<div class='optionstyles'>
<ul class="box">
<li v-for="item,index of accumulationList" :class="{checked:item.infoOptionKey===accumulationFund}" @click="changeaccum(item,index)">{{item.infoOptionName}}</li>
</ul>
</div>
</div>
</template>
export default{
data(){
return{
occupationalList: [],
paymentList: [],
incomeList:[],
securityList:[],
accumulationList:[],
jobType:'',
salaryType :'',
monthlyIncome:'',
socialSecurity:'',
accumulationFund:'',
toasttittle:true
}
},
methods:{
changejob(item){
this.jobType = item.infoOptionKey
},
//工资
changeoffer(item){
this.salaryType = item.infoOptionKey
},
//收入
changeincome(item){
this.monthlyIncome = item.infoOptionKey
},
//社保
changesecur(item){
this.socialSecurity = item.infoOptionKey
},
//公积金
changeaccum(item){
this.accumulationFund = item.infoOptionKey
},
getdatainfor(){
let data={
pageName : 'workinfo'
}
this.request('apik',data)
.then(data=>{
if(data.code = 'success'){
let datalist = data.data.pageData
for(let i=0;i<datalist.length;i++){
if(datalist[i].infoTitleKey=='jobType'){
this.occupationalList = datalist[i].optionRes
this.jobType = datalist[i].valueKey
}
if(datalist[i].infoTitleKey=='salaryType'){
this.paymentList = datalist[i].optionRes
this.salaryType = datalist[i].valueKey
}
if(datalist[i].infoTitleKey=='monthlyIncome'){
this.incomeList = datalist[i].optionRes
this.monthlyIncome = datalist[i].valueKey
}
if(datalist[i].infoTitleKey=='socialSecurity'){
this.securityList = datalist[i].optionRes
this.socialSecurity = datalist[i].valueKey
}
if(datalist[i].infoTitleKey=='accumulationFund'){
this.accumulationList = datalist[i].optionRes
this.accumulationFund = datalist[i].valueKey
}
}
}
})
}
}
}
<style styles='less' scoped>
.optionstyle{
padding:15px;
overflow: hidden;
ul{
margin-right:-23px;
}
li{
width: 100px;
margin-right: 22px;
height: 40px;
margin-bottom: 10px;
font-size:13px;
line-height: 40px;
border-radius: 2px;
display: inline-block;
color: #333333;
text-align: center;
background: #F4F4F4;
}
li.checked{
background-color:#0CF; color:#fff;
border:1px #fff solid;
}
// .chooser-list{
// margin-right: -22px;
// }
}
</style>
看下后台反的数据类型吧
第二种:单选多选都适用 这个相比上个 优点就是不管单多选 都可以再次点击取消
封装一个options组件
<template>
<div>
<ul class="chooser-list">
<li :style="cssStyle"
v-for="(item, index) in options" :key="index"
@click="optionsClick(item)"
:class="{active: checkActive(item)}"
>{{ item.label }}</li>
</ul>
</div>
</template>
<script>
export default {
model: {
prop: 'currArr',
event: 'input'
},
props: {
currArr:Array,
options: Array, //传入的数组
isMultiply: { //是否是多选。默认为false:单选;true:多选
type: Boolean,
default: false
},
cssStyle: Object //可以自定义单选或者多选的样式
},
data () {
return {
//currValArr: []
}
},
methods:{
optionsClick(item){
if (this.isMultiply === false) { //单选
this.$set(this.currValArr, 0, item) // 将该值设为当前数组的第一项
} else { //多选
if (this.currValArr.indexOf(item) === -1) {
// 当前数组中没有该值则push到数组
this.currValArr.push(item)
} else {
//当前数组中有该值,找到该值下标并删除
this.currValArr.splice(this.currValArr.indexOf(item), 1)
}
}
this.$emit('toparents',this.currValArr)
},
checkActive(item){
if (this.isMultiply === false) {
this.currValArr.length = 1
}
return this.currValArr.indexOf(item) !== -1
}
}
}
</script>
<style lang="less" scoped>
ul, li {
margin: 0;
padding:0;
list-style: none;
}
.chooser {
position: relative;
display: inline-block;
}
.chooser-list li{
width: 100px;
margin-right: 22px;
height: 40px;
margin-bottom: 10px;
font-size:13px;
line-height: 40px;
border-radius: 2px;
display: inline-block;
color: #333333;
text-align: center;
background: #F4F4F4;
}
.chooser-list li.active {
color: #ffffff;
background: #4597FB;
}
</style>
页面引用
<template>
<div>
<Options :options="incomeList" v-model='value' :isMultiply=true></Options>
</div>
</template>
<script>
import Options from './options.vue'
export default {
components:{
Options
},
data(){
return{
value:[],
incomeList:['上班族','公务员','公关人员','个体户']
}
}
}
</script>
<style lang="less">
</style>