You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.4 KiB
125 lines
3.4 KiB
10 months ago
|
<!--搜索条件筛选，可多选，商品搜索列表、商户搜索列表中使用-->
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { toRefs, ref, onMounted, shallowRef } from 'vue'
|
||
|
|
const props = defineProps({
|
||
|
|
//列表数据
|
||
|
|
list: {
|
||
|
|
type: Array,
|
||
|
|
default: [],
|
||
|
|
},
|
||
|
|
})
|
||
|
|
const { list } = toRefs(props)
|
||
|
|
const emit = defineEmits(['handleSubmitChecked'])
|
||
|
|
const selectedList = ref({})
|
||
|
|
|
||
|
|
//判断是否展示 展开收起 按钮
|
||
|
|
onMounted(() => {
|
||
|
|
list.value.forEach((item:any,index:number)=>{
|
||
|
|
if(document.getElementById(`myElement${index}`)){
|
||
|
|
let myElement = document.getElementById(`myElement${index}`);
|
||
|
|
if(myElement.offsetHeight>38){
|
||
|
|
item.isShowBtnMore=true
|
||
|
|
}else{
|
||
|
|
item.isShowBtnMore=false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 点击菜单
|
||
|
|
* @param list 当前选中的大类
|
||
|
|
* @param item 当前选中菜单的对象
|
||
|
|
*/
|
||
|
|
const handleMenu = (list: any, item: any) => {
|
||
|
|
list.list.forEach((val, i) => {
|
||
|
|
if (val.id == item.id) {
|
||
|
|
val.isChoose = !val.isChoose
|
||
|
|
}else{
|
||
|
|
if(!list.multiple) val.isChoose =false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
//多选
|
||
|
|
if(list.multiple){
|
||
|
|
if (item.isChoose) {
|
||
|
|
list.checked.push(item.id)
|
||
|
|
} else {
|
||
|
|
let index = list.checked.findIndex((itemn) => itemn === item.id)
|
||
|
|
list.checked.splice(index,1)
|
||
|
|
}
|
||
|
|
selectedList.value[list.type] = list.checked
|
||
|
|
}else{
|
||
|
|
//单选
|
||
|
|
if (item.isChoose) {
|
||
|
|
selectedList.value[list.type] = item.id
|
||
|
|
}else{
|
||
|
|
selectedList.value[list.type] = ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
emit('handleSubmitChecked', selectedList.value)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="b-rd-16px bg-#FFFFFF px-30px" v-if="list.length>0">
|
||
|
|
<template v-for="(item, index) in list" :key="index">
|
||
|
|
<div v-if="item.list && item.list.length" class="sort acea-row">
|
||
|
|
<div class="name mr-20px">{{ item.name }}：</div>
|
||
|
|
<div class="listCon acea-row row-between text-#333 text-14px cursors w-1050px" :class="item.showMore?'on':''">
|
||
|
|
<div :ref="'myElement'+index" :id="'myElement'+index" class="list acea-row w-960px h-auto">
|
||
|
|
<div
|
||
|
|
class="item"
|
||
|
|
:class="(items.isChoose &&item.multiple) || (selectedList[item.type]===items.id && !item.multiple) ? 'font-color' : ''"
|
||
|
|
v-for="(items, idx) in item.list"
|
||
|
|
:key="idx"
|
||
|
|
@click="handleMenu(item, items)"
|
||
|
|
>
|
||
|
|
{{ items.name || items.tagName }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="!item.showMore && item.isShowBtnMore" class="cursors fontColor6 text-14px text-center" @click="item.showMore = !item.showMore">
|
||
|
|
收起 <span class="iconfont icon-gao"></span>
|
||
|
|
</div>
|
||
|
|
<div v-if="item.showMore && item.isShowBtnMore" class="fontColor6 text-14px text-center cursors" @click="item.showMore = !item.showMore">
|
||
|
|
展开 <span class="iconfont icon-di"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.on {
|
||
|
|
height: 37px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.sort {
|
||
|
|
border-bottom: 1px dashed #eeeeee;
|
||
|
|
padding-bottom: 11px;
|
||
|
|
padding-top: 30px;
|
||
|
|
&:last-child {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
.name {
|
||
|
|
width: 70px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
margin-right: 30px;
|
||
|
|
margin-bottom: 19px;
|
||
|
|
.icon {
|
||
|
|
font-size: 15px;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.iconfont {
|
||
|
|
font-size: 15px;
|
||
|
|
color: #e2e2e2;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|