Commit 53b65c45 authored by 徐一鸣's avatar 徐一鸣

Merge branch 'xym' into dev

parents f0cd4954 f63f75ce
...@@ -75,12 +75,10 @@ export default { ...@@ -75,12 +75,10 @@ export default {
}, },
mounted() { mounted() {
window.onresize = ()=>{ window.addEventListener("resize", this.pageResize);
this.pageResize();
}
}, },
destroyed(){ destroyed(){
window.onresize = null; window.removeEventListener("resize", this.pageResize);
}, },
methods: { methods: {
openflag_func(){ openflag_func(){
......
<template>
<div ref="container" class="show_more_filter">
<slot></slot>
<a
v-if="showBtn"
class="show_more_btn"
:style="{
left: btnLeft,
}"
@click="toggle"
>
更多检索
<i
data-v-3b31b76f=""
:class="showMore ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
></i>
</a>
</div>
</template>
<script>
export default {
data() {
return {
showBtn: false,
showMore: false,
btnLeft: 0,
};
},
mounted() {
this.resize();
window.addEventListener("resize", this.resize);
},
destroyed() {
window.removeEventListener("resize", this.resize);
},
methods: {
resize() {
this.$nextTick(() => {
let container = this.$refs.container;
let containerWidth = container.getBoundingClientRect().width - 80;
let filters = container.querySelectorAll(".filter_item");
let totalWidth = 0;
let wrapFlag = false;
this.showBtn = false;
filters.forEach((filter, index) => {
filter.style.display = "inline-block";
let filterWidth =
Math.ceil(filter.getBoundingClientRect().width) + 15;
totalWidth += filterWidth;
if (totalWidth > containerWidth) {
this.showBtn = true;
if (!wrapFlag) {
this.btnLeft = totalWidth - filterWidth + 5 + "px";
wrapFlag = true;
}
console.log(totalWidth, containerWidth, this.btnLeft);
filter.style.display = this.showMore ? "inline-block" : "none";
} else {
filter.style.display = "inline-block";
}
});
});
},
toggle() {
this.showMore = !this.showMore;
this.resize();
},
},
};
</script>
<style scoped>
.show_more_filter {
position: relative;
padding-right: 80px;
}
.show_more_btn {
position: absolute;
top: 25px;
font-size: 14px;
line-height: 20px;
color: #8890a7;
cursor: pointer;
user-select: none;
}
</style>
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<template slot="top"> <template slot="top">
<div class="top_fliter"> <div class="top_fliter">
<div class="filter_list"> <show-more-filter class="filter_list">
<div class="filter_item"> <div class="filter_item">
<span class="filter_title">banner搜索:</span> <span class="filter_title">banner搜索:</span>
<el-input <el-input
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
> >
</el-date-picker> </el-date-picker>
</div> </div>
</div> </show-more-filter>
<div class="filter_action apass_button"> <div class="filter_action apass_button">
<el-button type="primary" @click="topFilterAction"> <el-button type="primary" @click="topFilterAction">
查询 查询
...@@ -90,11 +90,13 @@ ...@@ -90,11 +90,13 @@
import helper from "@/services/helper.js"; import helper from "@/services/helper.js";
import apassList from "@/components/apass-list"; import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog"; import apassDialog from "@/components/apass-dialog";
import showMoreFilter from "@/components/show-more-filter";
export default { export default {
components: { components: {
apassList, apassList,
apassDialog, apassDialog,
showMoreFilter,
}, },
data: () => ({ data: () => ({
listHeader: [], listHeader: [],
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<template slot="top"> <template slot="top">
<div class="top_fliter"> <div class="top_fliter">
<div class="filter_list"> <show-more-filter class="filter_list">
<div class="filter_item"> <div class="filter_item">
<span class="filter_title">消息模板名称:</span> <span class="filter_title">消息模板名称:</span>
<el-input <el-input
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
> >
</el-date-picker> </el-date-picker>
</div> </div>
</div> </show-more-filter>
<div class="filter_action apass_button"> <div class="filter_action apass_button">
<el-button type="primary" @click="topFilterAction"> <el-button type="primary" @click="topFilterAction">
查询 查询
...@@ -77,11 +77,13 @@ ...@@ -77,11 +77,13 @@
import helper from "@/services/helper.js"; import helper from "@/services/helper.js";
import apassList from "@/components/apass-list"; import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog"; import apassDialog from "@/components/apass-dialog";
import showMoreFilter from "@/components/show-more-filter";
export default { export default {
components: { components: {
apassList, apassList,
apassDialog, apassDialog,
showMoreFilter,
}, },
data: () => ({ data: () => ({
listHeader: [], listHeader: [],
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<template slot="top"> <template slot="top">
<div class="top_fliter"> <div class="top_fliter">
<div class="filter_list"> <show-more-filter class="filter_list">
<div class="filter_item"> <div class="filter_item">
<span class="filter_title">消息模板搜索:</span> <span class="filter_title">消息模板搜索:</span>
<el-input <el-input
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
> >
</el-date-picker> </el-date-picker>
</div> </div>
</div> </show-more-filter>
<div class="filter_action apass_button"> <div class="filter_action apass_button">
<el-button type="primary" @click="topFilterAction"> <el-button type="primary" @click="topFilterAction">
查询 查询
...@@ -78,11 +78,13 @@ ...@@ -78,11 +78,13 @@
import helper from "@/services/helper.js"; import helper from "@/services/helper.js";
import apassList from "@/components/apass-list"; import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog"; import apassDialog from "@/components/apass-dialog";
import showMoreFilter from "@/components/show-more-filter";
export default { export default {
components: { components: {
apassList, apassList,
apassDialog, apassDialog,
showMoreFilter,
}, },
data: () => ({ data: () => ({
listHeader: [], listHeader: [],
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<template slot="top"> <template slot="top">
<div class="top_fliter"> <div class="top_fliter">
<div class="filter_list"> <show-more-filter class="filter_list">
<div class="filter_item"> <div class="filter_item">
<span class="filter_title">推荐位名称:</span> <span class="filter_title">推荐位名称:</span>
<el-input <el-input
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
> >
</el-date-picker> </el-date-picker>
</div> </div>
</div> </show-more-filter>
<div class="filter_action apass_button"> <div class="filter_action apass_button">
<el-button type="primary" @click="topFilterAction"> <el-button type="primary" @click="topFilterAction">
查询 查询
...@@ -66,10 +66,12 @@ ...@@ -66,10 +66,12 @@
<script> <script>
import helper from "@/services/helper.js"; import helper from "@/services/helper.js";
import apassList from "@/components/apass-list"; import apassList from "@/components/apass-list";
import showMoreFilter from "@/components/show-more-filter";
export default { export default {
components: { components: {
apassList, apassList,
showMoreFilter,
}, },
data: () => ({ data: () => ({
listHeader: [], listHeader: [],
......
...@@ -985,7 +985,7 @@ export default { ...@@ -985,7 +985,7 @@ export default {
pic: require("@/assets/imgs/home_tool_ic_lcsj.png"), pic: require("@/assets/imgs/home_tool_ic_lcsj.png"),
bg: "#e6ebfe", bg: "#e6ebfe",
color: "#515fe7", color: "#515fe7",
url: "https://apaas.wodcloud.com/lcgl/index.html#/", url: "https://apaas-nologo.wodcloud.com/lcgl/index.html#/",
target: 1 target: 1
}, },
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment