去除展开收起功能，搜索框显示不下自动换行
This commit is contained in:
parent
6aec5fc4b5
commit
870aaa5f80
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "code-brick-zj",
|
||||
"version": "1.0.5",
|
||||
"version": "1.1.0",
|
||||
"private": false,
|
||||
"description": "组件封装",
|
||||
"main": "index.js"
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<div class="searchBarBox divHeight" ref="searchBarRef" :style="{ paddingRight: isFold ? '55px' : '0px' }">
|
||||
<div
|
||||
class="searchBarBox"
|
||||
ref="searchBarRef"
|
||||
:style="{ paddingRight: isFold ? '55px' : '0px' }"
|
||||
>
|
||||
<el-form
|
||||
:inline="true"
|
||||
ref="searchBarForm"
|
||||
@ -38,7 +42,7 @@
|
||||
item.onchange
|
||||
? $emit('select-changed', {
|
||||
param: item.param,
|
||||
value: formInline[item.param]
|
||||
value: formInline[item.param],
|
||||
})
|
||||
: null
|
||||
"
|
||||
@ -65,7 +69,17 @@
|
||||
:placeholder="item.placeholder"
|
||||
:picker-options="item.pickerOptions ? item.pickerOptions : null"
|
||||
:clearable="item.clearable === false ? false : true"
|
||||
:style="item.width ? 'width:' + item.width + 'px' : (item.dateType === 'datetimerange' ? 'width:350px' : (item.dateType === 'daterange' ? 'width:252px' : (item.dateType === 'datetime' ? 'width:200px' : 'width:148px')))"
|
||||
:style="
|
||||
item.width
|
||||
? 'width:' + item.width + 'px'
|
||||
: item.dateType === 'datetimerange'
|
||||
? 'width:350px'
|
||||
: item.dateType === 'daterange'
|
||||
? 'width:252px'
|
||||
: item.dateType === 'datetime'
|
||||
? 'width:200px'
|
||||
: 'width:148px'
|
||||
"
|
||||
/>
|
||||
<el-autocomplete
|
||||
v-if="item.type === 'autocomplete'"
|
||||
@ -92,7 +106,7 @@
|
||||
item.onChange
|
||||
? $emit('cascader-change', {
|
||||
param: item.param,
|
||||
value: formInline[item.param]
|
||||
value: formInline[item.param],
|
||||
})
|
||||
: null
|
||||
"
|
||||
@ -114,81 +128,77 @@
|
||||
<slot></slot>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span v-if="isFold" class="foldClass" @click='switchMode'>
|
||||
{{ isExpand ? '收起' : '展开' }}
|
||||
<i class="iconfont" :class="isExpand ? 'icon-upward' : 'icon-downward'"></i>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'SearchBar',
|
||||
name: "SearchBar",
|
||||
props: {
|
||||
formConfigs: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
removeBlue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
isFold: {// 多行模式（默认否）
|
||||
isFold: {
|
||||
// 多行模式（默认否）
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
const formInline = {}
|
||||
const formConfig = this.formConfigs
|
||||
let hasExtraOptions = false
|
||||
const formInline = {};
|
||||
const formConfig = this.formConfigs;
|
||||
let hasExtraOptions = false;
|
||||
for (const obj of formConfig) {
|
||||
if (obj.type !== 'button') {
|
||||
if (obj.type !== "button") {
|
||||
if (obj.defaultSelect === false || obj.defaultSelect === 0) {
|
||||
formInline[obj.param] = obj.defaultSelect
|
||||
formInline[obj.param] = obj.defaultSelect;
|
||||
} else {
|
||||
formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
|
||||
formInline[obj.param] = obj.defaultSelect || ""; // defaultSelect下拉框默认选中项
|
||||
}
|
||||
}
|
||||
if (obj.extraOptions) {
|
||||
hasExtraOptions = true
|
||||
hasExtraOptions = true;
|
||||
}
|
||||
}
|
||||
return {
|
||||
formInline,
|
||||
formConfig,
|
||||
hasExtraOptions,
|
||||
isExpand: false // 是否展开（默认否）
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
formConfig: {
|
||||
handler() {
|
||||
for (const obj of this.formConfig) {
|
||||
if (obj.defaultSelect) {
|
||||
this.formInline[obj.param] = obj.defaultSelect
|
||||
this.formInline[obj.param] = obj.defaultSelect;
|
||||
} else if (obj.defaultSelect === null) {
|
||||
// 需要手动从外部清除选项缓存的情况，确保在外部配置项中可直接设置null
|
||||
this.formInline[obj.param] = ''
|
||||
this.formInline[obj.param] = "";
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
immediate: true,
|
||||
},
|
||||
formInline: {
|
||||
handler: function () {
|
||||
this.$forceUpdate()
|
||||
this.$forceUpdate();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
this.init();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
@ -200,61 +210,52 @@ export default {
|
||||
this.$watch(
|
||||
`formInline.${obj.param}`,
|
||||
function (newVal) {
|
||||
let deleteCount = 0
|
||||
let deleteCount = 0;
|
||||
if (obj.index + 1 < this.formConfig.length) {
|
||||
// 如果obj不是最后一个配置
|
||||
const nextConfig = this.formConfig[obj.index + 1]
|
||||
const nextConfig = this.formConfig[obj.index + 1];
|
||||
if (nextConfig.parent && nextConfig.parent === obj.param)
|
||||
deleteCount = 1
|
||||
deleteCount = 1;
|
||||
}
|
||||
const currentConfig = Object.assign(
|
||||
{},
|
||||
obj.extraOptions[newVal]
|
||||
)
|
||||
);
|
||||
this.formConfig.splice(
|
||||
obj.index + 1,
|
||||
deleteCount,
|
||||
currentConfig
|
||||
)
|
||||
);
|
||||
// 修改 formInline
|
||||
this.$set(this.formInline, currentConfig.param, '')
|
||||
this.$set(this.formInline, currentConfig.param, "");
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
headBtnClick(btnName) {
|
||||
this.formInline.btnName = btnName
|
||||
this.$emit('headBtnClick', this.formInline)
|
||||
this.formInline.btnName = btnName;
|
||||
this.$emit("headBtnClick", this.formInline);
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.searchBarForm.resetFields()
|
||||
const formInline = {}
|
||||
const formConfig = this.formConfigs
|
||||
this.$refs.searchBarForm.resetFields();
|
||||
const formInline = {};
|
||||
const formConfig = this.formConfigs;
|
||||
for (const obj of formConfig) {
|
||||
if (obj.type !== 'button') {
|
||||
if (obj.type !== "button") {
|
||||
if (obj.defaultSelect === false || obj.defaultSelect === 0) {
|
||||
formInline[obj.param] = obj.defaultSelect
|
||||
formInline[obj.param] = obj.defaultSelect;
|
||||
} else {
|
||||
formInline[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
|
||||
formInline[obj.param] = obj.defaultSelect || ""; // defaultSelect下拉框默认选中项
|
||||
}
|
||||
}
|
||||
}
|
||||
this.formInline = formInline
|
||||
this.formInline = formInline;
|
||||
},
|
||||
switchMode() {// 展开和收起切换
|
||||
this.isExpand = !this.isExpand
|
||||
const element = this.$refs.searchBarRef
|
||||
if (this.isExpand) {
|
||||
element.classList.remove('divHeight')
|
||||
} else {
|
||||
element.classList.add('divHeight')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.searchBarBox {
|
||||
@ -267,16 +268,12 @@ export default {
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.divHeight {
|
||||
height: 45px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.searchBar .blue-block {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: #0B58FF;
|
||||
background-color: #0b58ff;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
margin-top: 12px;
|
||||
@ -286,32 +283,21 @@ export default {
|
||||
}
|
||||
.searchBar .el-date-editor .el-range__icon {
|
||||
font-size: 16px;
|
||||
color:#0B58FF;
|
||||
color: #0b58ff;
|
||||
}
|
||||
.searchBar .el-input__prefix .el-icon-date {
|
||||
font-size: 16px;
|
||||
color:#0B58FF;
|
||||
color: #0b58ff;
|
||||
}
|
||||
.searchBar .el-input__prefix .el-icon-time {
|
||||
font-size: 16px;
|
||||
color:#0B58FF;
|
||||
color: #0b58ff;
|
||||
}
|
||||
.searchBar .separateStyle {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: #E8E8E8;
|
||||
background: #e8e8e8;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.searchBarBox .foldClass {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color:#0B58FF;
|
||||
}
|
||||
.searchBarBox .foldClass .iconfont {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user