|
@@ -1,7 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<div ref="layout" class="filter-layout" :class="{'filter-input-layout': type === 'select'}">
|
|
<div ref="layout" class="filter-layout" :class="{'filter-input-layout': type === 'select'}">
|
|
<el-dropdown
|
|
<el-dropdown
|
|
- :trigger="trigger"
|
|
|
|
|
|
+ trigger="click"
|
|
:placement="placement"
|
|
:placement="placement"
|
|
@visible-change="onVisibleChange"
|
|
@visible-change="onVisibleChange"
|
|
ref="dropdownRef"
|
|
ref="dropdownRef"
|
|
@@ -16,7 +16,7 @@
|
|
<span class="select-prefix-value" v-else>{{ placeholder }}</span>
|
|
<span class="select-prefix-value" v-else>{{ placeholder }}</span>
|
|
<i class="iconfont icon-xiala" :class="{ 'is-reverse': isFocus, 'highlight-text': value }"></i>
|
|
<i class="iconfont icon-xiala" :class="{ 'is-reverse': isFocus, 'highlight-text': value }"></i>
|
|
</div>
|
|
</div>
|
|
- <el-dropdown-menu v-if="dropdownMenu" slot="dropdown" :append-to-body="false" ref="dropdownMenu">
|
|
|
|
|
|
+ <el-dropdown-menu v-if="dropdownMenu" :class="onlyBottom ? 'fixed-dropdown' : ''" slot="dropdown" :append-to-body="false" ref="dropdownMenu">
|
|
<slot name="empty"></slot>
|
|
<slot name="empty"></slot>
|
|
</el-dropdown-menu>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</el-dropdown>
|
|
@@ -58,6 +58,11 @@ export default {
|
|
value: {
|
|
value: {
|
|
type: String,
|
|
type: String,
|
|
default: ''
|
|
default: ''
|
|
|
|
+ },
|
|
|
|
+ // dropdown-menu仅在dropdown下方
|
|
|
|
+ onlyBottom: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: true
|
|
}
|
|
}
|
|
},
|
|
},
|
|
data () {
|
|
data () {
|
|
@@ -77,6 +82,7 @@ export default {
|
|
onVisibleChange (visible) {
|
|
onVisibleChange (visible) {
|
|
this.isFocus = visible
|
|
this.isFocus = visible
|
|
this.$emit('visible', visible)
|
|
this.$emit('visible', visible)
|
|
|
|
+
|
|
},
|
|
},
|
|
// 手动触发dropdown展开
|
|
// 手动触发dropdown展开
|
|
show () {
|
|
show () {
|
|
@@ -91,6 +97,9 @@ export default {
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
|
+::v-deep .el-dropdown-menu.fixed-dropdown{
|
|
|
|
+ top: 30px !important;
|
|
|
|
+}
|
|
.filter-layout{
|
|
.filter-layout{
|
|
position: relative;
|
|
position: relative;
|
|
::v-deep{
|
|
::v-deep{
|
|
@@ -103,6 +112,8 @@ export default {
|
|
display: none!important;
|
|
display: none!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+
|
|
}
|
|
}
|
|
.is-reverse{
|
|
.is-reverse{
|
|
transform: rotate(180deg);
|
|
transform: rotate(180deg);
|