发现vant-uI是没有select下拉框多选框的所以自己写了一个组件。话不多说上代码。加## 标题粗样式
这是select组件
<template>
<div >
<div class="selectInput">
<div class="title" @click.stop="liShow">
<input class="icon1" type="text" disabled placeholder="请选择.." v-model="selectCon" @click.stop="liShow" />
<div class="icon" @click.stop="liShow"></div>
</div>
<ul v-show="isShow" @click.stop="liShow">
<li v-for="item in liData" :key="item.jobCodeId">
<label :id="item.jobCodeId" @click="changeBool(item.jobCodeId)">
<input type="checkbox" v-model="item.Check" />
{{item.jobName}}
</label>
</li>
</ul>
</div>
</div>
</template>
下面是js
<script>
export default {
data () {
return {
checkedData: [], // 选中的数据
isShow: false, // 下拉列表是否显示
selectCon: '' // 选中的内容
};
},
mounted () {
let that = this;
// 点击页面空白处隐藏下拉列表
document.addEventListener('click', function () {
that.isShow = false;
});
},
methods: {
liShow () {
this.isShow = true;
},
changeBool (data) {
this.checkedData.forEach((item) => {
if (item.Id == data) {
item.Check = !item.Check;
}
});
}
},
model: {
event: 'change'
},
props: ['liData', 'value'],
watch: {
liData: {
handler (newVal, oldVal) {
// 选中数据
this.checkedData = newVal.filter(function (item) {
return item.Check == true;
});
// 在页面打印出的数据
this.selectCon = ''; // 点击的当前项的展示
for (var i = 0; i < this.checkedData.length; i++) {
this.selectCon += this.checkedData[i].jobName + ';';
}
console.log(this.selectCon);
// 给父组件传值
this.$emit('change', this.checkedData);
},
deep: true
}
}
};
</script>
这是样式
<style scoped>
.icon1{
padding-left: 62px !important;
}
.icon1{
background: #FFFFFF !important;
}
.selectInput .title {
width: 100%;
border: 1px solid #2F4FE7;
height: 32px;
border-radius: 5px;
position: relative;
}
.selectInput input[type="text"] {
width: 100%;
height: 30px;
padding: 0 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari 和 Chrome */
border-radius: 3px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
position: relative;
}
.icon {
width: 0px; /* 宽高设置为0,很重要,否则达不到效果 */
height: 0px;
border: 7px solid rgba(47, 79, 231, 1);
border-bottom-color: transparent; /* 设置透明背景色 */
border-left-color: transparent;
border-right-color: transparent;
position: absolute;
top: 10px;
right: 10px;
}
.selectInput ul {
border-radius: 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari 和 Chrome */
border-radius: 3px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Firefox */
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Safari 和 Chrome */
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
width: 100%;
/* border: 1px solid #ccc; */
padding: 10px 30px;
}
.selectInput li {
line-height: 30px;
}
</style>
这是父组件:
<selecMutiltchose ref="selectmethods" :liData='liData' v-model="selectCon"></selecMutiltchose>
这是data传入的数据:
data () {
return {
selectCon: '',
liData: [{
jobCodeId: 1,
jobName: '张三1',
Check: false
},
{
jobCodeId: 2,
jobName: '张三2',
Check: false
}]
};
},
这是效果图,不喜勿喷