vue单多选组件

在很多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>