有时候查询页需要变化不同的样式,先看样式
左右布局,且一行显示条件区,下图是一行形式
点击按钮展示所有选项
上代码
1 condition-box.vue
<template>
<div :class="'condition-box ' + conditionClass">
<div class="condition-l" :style="conditionLStyle">
<slot name="conditionl"></slot>
</div>
<div class="condition-r" :style="conditionRStyle">
<el-button
class="btn-show"
type="primary"
icon="el-icon-edit"
circle
@click="showAll"
></el-button>
<slot name="conditionr"></slot>
</div>
</div>
</template>
<script>
export default {
name: "ConditionBox",
props: {
conditionHeight: {
type: String,
default: "50px",
},
conditionLStyle: {
type: String,
default: "",
},
conditionRStyle: {
type: String,
default: "",
},
},
data() {
return {
conditionClass: "",
isShowAll: false,
};
},
methods: {
showAll() {
let _this = this;
_this.isShowAll = !_this.isShowAll;
if (_this.isShowAll) {
//显示所有高度
_this.conditionClass = ` is-show-all`;
} else {
//只显示一行
_this.conditionClass = ``;
}
},
},
};
</script>
<style lang="less" scoped>
.condition-box {
display: flex;
align-items: flex-start;
height: 50px;
background: chocolate;
overflow: hidden;
.condition-l {
flex: 1;
display: flex;
flex-wrap: wrap;
.item {
flex: 0 0 200px;
height: 40px;
background: cornflowerblue;
margin: 5px 15px 5px 0;
}
}
.condition-r {
flex: 0 0 300px;
line-height: auto;
display: flex;
flex-wrap: nowrap;
.btn-show {
}
}
}
.is-show-all {
height: auto;
}
</style>
2 引用
<ConditionBox :conditionLStyle="''" :conditionRStyle="'flex:0 0 300px;'">
<div
slot="conditionl"
class="item1"
v-for="(item, index) in 20"
:key="index"
>
{{ index }}-11
</div>
<div slot="conditionr">my condition</div>
</ConditionBox>
有点简单,喜欢拿去!