125 lines
2.7 KiB
Vue
125 lines
2.7 KiB
Vue
<template>
|
|
<div class="generalMenu_printModel">
|
|
<div @click.stop="openPrintModel" :class="driverClass.class1">{{ item.label }}</div>
|
|
<ul :class="driverClass.class2" v-show="openClick">
|
|
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">{{ item.label }}</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent,ref ,nextTick} from "vue";
|
|
import { Https } from "@/tool/https";
|
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
export default defineComponent({
|
|
name:'filterComponent',
|
|
props:{
|
|
item:{
|
|
type:Object
|
|
},
|
|
dataList:{
|
|
type:Array
|
|
},
|
|
driver__:{
|
|
type:Boolean,
|
|
default:false,
|
|
},
|
|
deleteItem:{
|
|
type:Number,
|
|
default:-1
|
|
},
|
|
driverClass:{
|
|
type:Object,
|
|
default:{class1:'',class2:'',classList:{item1:'',item2:'',item3:''}},
|
|
}
|
|
},
|
|
emits:['setprintModel'],
|
|
setup(props:any,{emit}){
|
|
let selectIndex = ref(0)
|
|
let openClick = ref(false)
|
|
|
|
let openPrintModel = ()=>{
|
|
document.addEventListener('click',removePrintModel)
|
|
openClick.value = true
|
|
nextTick().then(()=>{
|
|
if(props.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
})
|
|
}
|
|
let setprintModel = (item:any,index:any)=>{
|
|
if(props.deleteItem == index) return
|
|
openClick.value = false
|
|
selectIndex = index
|
|
nextTick().then(()=>{
|
|
if(props.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
})
|
|
emit('setprintModel',item)
|
|
}
|
|
let removePrintModel = ()=>{
|
|
openClick.value = false
|
|
document.removeEventListener('click',removePrintModel)
|
|
}
|
|
return {
|
|
selectIndex,
|
|
openClick,
|
|
setprintModel,
|
|
openPrintModel,
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
</script>
|
|
<style lang="less">
|
|
//衣服类型下拉菜单
|
|
.generalMenu_printModel{
|
|
margin-right: 2rem;
|
|
>div{
|
|
width: calc(13rem*1.2);
|
|
// display: flex;
|
|
display: block;
|
|
border-radius: calc(1rem*1.2);
|
|
margin: 0;
|
|
border: 2px solid;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 0 calc(1rem*1.2);
|
|
text-align: center;
|
|
}
|
|
ul{
|
|
position: absolute;
|
|
width: calc(13rem*1.2);
|
|
text-align: center;
|
|
margin-top: calc(.3rem*1.2);
|
|
border-radius: calc(1rem*1.2);
|
|
overflow: hidden;
|
|
z-index: 3;
|
|
li{
|
|
// background: rgba(0,0,0,.2);
|
|
background: #cccccc;
|
|
line-height: 2;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 0 calc(1rem*1.2);
|
|
&.active{
|
|
// opacity: .4;
|
|
color: #a4a4a4 !important;
|
|
background: #ebebeb !important;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
.printModel_item:hover{
|
|
// background: rgba(0,0,0,.4);
|
|
background: #999999;
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
</style> |