<template>
|
<div class="filter-box">
|
<div class="filter-box-content" :class="{'hide-content': !status}">
|
<slot>暂无内容</slot>
|
</div>
|
<div class="filter-box-footer" @click="changeStatus">
|
{{buttonText}}
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
buttonTexts: {
|
type: Array,
|
default() {
|
return ['关闭筛选窗口', '打开筛选窗口']
|
}
|
}
|
},
|
data() {
|
return {
|
status: false
|
}
|
},
|
methods: {
|
changeStatus() {
|
this.status = this.status?false: true;
|
this.$emit('click', this.status);
|
},
|
},
|
computed: {
|
buttonText() {
|
if(this.status) {
|
return this.buttonTexts[0];
|
}else {
|
return this.buttonTexts[1];
|
}
|
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.filter-box {
|
position: fixed;
|
top: 0;
|
right: 0;
|
z-index: 9;
|
min-width: 360px;
|
background-color: rgb(12 86 121 / 80%);
|
}
|
.filter-box-content.hide-content {
|
height: 0;
|
transition: height .3s ease-in;
|
overflow: hidden;
|
}
|
.filter-box-footer {
|
padding-top: 4px;
|
padding-bottom: 4px;
|
text-align: center;
|
font-size: 14px;
|
color: #FFFFFF;
|
background-color: #252424;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
border-left: 1px solid #252424;
|
border-right: 1px solid #252424;
|
}
|
.filter-box-footer:hover {
|
background-color: #000000;
|
}
|
.filter-box-footer:active {
|
color: #dbd8d8;
|
}
|
</style>
|
