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.
124 lines
3.4 KiB
124 lines
3.4 KiB
<!--搜索条件筛选，可多选，商品搜索列表、商户搜索列表中使用--> |
|
<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>
|
|
|