|
@@ -1,10 +1,15 @@
|
|
|
<template>
|
|
|
- <div class="com-combox" :class="{show:showPopup}" @click="show" v-clickoutside="hide">
|
|
|
+ <div class="com-combox" :class="{show:showPopup}" @click="switchShowHide" v-clickoutside="hide">
|
|
|
<div class="input">
|
|
|
<p v-if="current">{{current.name}}</p>
|
|
|
</div>
|
|
|
<a class="iconfont icon-material_preview_upload_collect"></a>
|
|
|
- <ul>
|
|
|
+ <ul ref="ul"
|
|
|
+ :style="{
|
|
|
+ top: needTranslateUp ? '' : '100%',
|
|
|
+ bottom: needTranslateUp ? '100%' : '',
|
|
|
+ }"
|
|
|
+ >
|
|
|
<li
|
|
|
v-for="(item,key) in data"
|
|
|
:key="key"
|
|
@@ -31,11 +36,16 @@ export default {
|
|
|
selectedId: {
|
|
|
type: String,
|
|
|
default:''
|
|
|
- }
|
|
|
+ },
|
|
|
+ bottomSpace: {
|
|
|
+ type: Number,
|
|
|
+ default: Infinity,
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
showPopup: false,
|
|
|
+ needTranslateUp: false,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
@@ -47,15 +57,24 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- show() {
|
|
|
+ switchShowHide() {
|
|
|
if (this.showPopup === true) {
|
|
|
- this.showPopup = false;
|
|
|
- return;
|
|
|
+ this.hide()
|
|
|
+ } else {
|
|
|
+ this.showPopup = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const boundingRectBottom = this.$refs.ul.getBoundingClientRect().bottom
|
|
|
+ if (boundingRectBottom > this.bottomSpace) {
|
|
|
+ this.needTranslateUp = true
|
|
|
+ } else {
|
|
|
+ this.needTranslateUp = false
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- this.showPopup = true;
|
|
|
},
|
|
|
hide() {
|
|
|
this.showPopup = false;
|
|
|
+ this.needTranslateUp = false
|
|
|
},
|
|
|
onClick(item) {
|
|
|
if (this.selectedId == item.id) {
|
|
@@ -104,13 +123,11 @@ export default {
|
|
|
position: absolute;
|
|
|
left: -1px;
|
|
|
right: -1px;
|
|
|
- top: 100%;
|
|
|
background: #1A1B1D;
|
|
|
border-radius: 0px 0px 2px 2px;
|
|
|
border: 1px solid #404040;
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
- max-height: 130px;
|
|
|
li {
|
|
|
height: 36px;
|
|
|
padding: 0 16px;
|