Administrator
4 years ago
parent
4c8513a872
commit
a3f38ed0df
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div v-if="show === false" class="quick-tag-style" @click.stop="showPanel">
|
||||
<a-icon type="environment" style="margin-bottom: 4px"/>
|
||||
<div class="quick-name-style">快速定位</div>
|
||||
</div>
|
||||
<div v-else class="quick-panel-style">
|
||||
<template v-for="moduleTitle in moduleData">
|
||||
<div v-if="moduleTitle.module_list.length > 0" :key="moduleTitle.module_type_id" class="module-title-style"
|
||||
@click="btnClick(moduleTitle.module_type_id)" :title="moduleTitle.module_type_name">
|
||||
{{moduleTitle.module_type_name}}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Icon} from 'ant-design-vue';
|
||||
import _ from 'lodash'
|
||||
export default {
|
||||
name: "QuickPositioning",
|
||||
props:["positionData"],
|
||||
data:function () {
|
||||
return{
|
||||
show:false,
|
||||
moduleData:this.positionData && Array.isArray(this.positionData)?_.cloneDeep(this.positionData):[]
|
||||
}
|
||||
},
|
||||
components:{
|
||||
AIcon:Icon,
|
||||
},
|
||||
methods:{
|
||||
showPanel:function () {
|
||||
this.show = true;
|
||||
},
|
||||
onWindowClick:function () {
|
||||
window.removeEventListener("click",this.onWindowClick)
|
||||
this.show = false;
|
||||
},
|
||||
btnClick:function (id) {
|
||||
this.$emit("quickPosition",id)
|
||||
}
|
||||
},
|
||||
updated(){
|
||||
if (this.show){
|
||||
window.addEventListener("click",this.onWindowClick)
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
positionData:function (newData) {
|
||||
this.moduleData = newData && Array.isArray(newData)?_.cloneDeep(newData):[]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.quick-tag-style{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(50vh - 50px);
|
||||
width: 34px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
background-color: var(--quickPositioningBgc);
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
.quick-name-style{
|
||||
width: 14px;
|
||||
line-height: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.quick-panel-style{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(50vh - 50px);
|
||||
width: 140px;
|
||||
height: 270px;
|
||||
padding: 20px;
|
||||
background-color: var(--quickPositioningBgc);
|
||||
border-radius: 8px;
|
||||
justify-content: space-between;
|
||||
.module-title-style{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border:1px solid #ffffff;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
border-radius: 15px;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color:#f46c1a;
|
||||
background: linear-gradient(to bottom,#fff1c2,#ffffff);
|
||||
background:-moz-linear-gradient(to bottom,#fff1c2,#ffffff);
|
||||
background:-webkit-linear-gradient(bottom,#fff1c2,#ffffff);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue