|
@@ -2,7 +2,7 @@
|
|
<div :class="{ inputable, border}" class="ma-select not-select" @click.stop="showList" ref="container">
|
|
<div :class="{ inputable, border}" class="ma-select not-select" @click.stop="showList" ref="container">
|
|
<span v-if="!inputable">{{ showText }}</span>
|
|
<span v-if="!inputable">{{ showText }}</span>
|
|
<input v-if="inputable" ref="input" :value="showText" autocomplete="off" type="text" @input="(e) => triggerSelect(e.target.value)"/>
|
|
<input v-if="inputable" ref="input" :value="showText" autocomplete="off" type="text" @input="(e) => triggerSelect(e.target.value)"/>
|
|
- <ul v-show="visible" :style="{ width, marginTop}" ref="selectList">
|
|
|
|
|
|
+ <ul v-show="visible" :style="{ width, marginTop, marginLeft}" ref="selectList">
|
|
<li v-for="item in options" :key="'ma_select_' + item.value" @click.stop="triggerSelect(item.value)">
|
|
<li v-for="item in options" :key="'ma_select_' + item.value" @click.stop="triggerSelect(item.value)">
|
|
{{ item.text }}
|
|
{{ item.text }}
|
|
</li>
|
|
</li>
|
|
@@ -32,6 +32,7 @@ export default {
|
|
marginTop: '-2px',
|
|
marginTop: '-2px',
|
|
width: 'auto',
|
|
width: 'auto',
|
|
visible: false,
|
|
visible: false,
|
|
|
|
+ marginLeft: '0px'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -39,8 +40,10 @@ export default {
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
showList(){
|
|
showList(){
|
|
|
|
+ this.marginTop = - this.getMarginTop(this.$refs.container, 0)+ 'px';
|
|
this.visible = true;
|
|
this.visible = true;
|
|
this.$nextTick(()=>{
|
|
this.$nextTick(()=>{
|
|
|
|
+ this.marginLeft = -(window.pageXOffset) + 'px';
|
|
this.width = this.$refs.container.clientWidth + 'px';
|
|
this.width = this.$refs.container.clientWidth + 'px';
|
|
let height = this.$refs.selectList.offsetHeight;
|
|
let height = this.$refs.selectList.offsetHeight;
|
|
let top = this.$refs.selectList.offsetTop;
|
|
let top = this.$refs.selectList.offsetTop;
|
|
@@ -49,6 +52,10 @@ export default {
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
+ getMarginTop(el, top) {
|
|
|
|
+ top += el.scrollTop > 0 ? el.scrollTop : el.parentElement ? this.getMarginTop(el.parentElement, top + el.scrollTop) : el.scrollTop
|
|
|
|
+ return top
|
|
|
|
+ },
|
|
triggerSelect(value) {
|
|
triggerSelect(value) {
|
|
this.$emit('update:value', value);
|
|
this.$emit('update:value', value);
|
|
this.visible = false;
|
|
this.visible = false;
|
|
@@ -142,10 +149,14 @@ ul li {
|
|
padding: 0 5px;
|
|
padding: 0 5px;
|
|
text-align: left;
|
|
text-align: left;
|
|
width: 100% !important;
|
|
width: 100% !important;
|
|
|
|
+ height: 22px;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ word-break: keep-all;
|
|
|
|
+ overflow: hidden;
|
|
}
|
|
}
|
|
|
|
|
|
ul li:hover {
|
|
ul li:hover {
|
|
background: var(--select-option-hover-background);
|
|
background: var(--select-option-hover-background);
|
|
color: var(--select-option-hover-color);
|
|
color: var(--select-option-hover-color);
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+</style>
|