|
@@ -10,7 +10,10 @@
|
|
|
<div class="filter-list" slot="empty">
|
|
|
<div
|
|
|
class="filter-item"
|
|
|
- :class="{'active': item.value === activeValue, 'highlight': item.disabled && isCustom }"
|
|
|
+ :class="{
|
|
|
+ active: item.value === activeValue,
|
|
|
+ highlight: item.disabled && isCustom
|
|
|
+ }"
|
|
|
v-for="item in options"
|
|
|
:key="item.label"
|
|
|
:label="item.label"
|
|
@@ -29,13 +32,29 @@
|
|
|
>
|
|
|
<div class="custom-money">
|
|
|
<div class="custom-money-item">
|
|
|
- 从<el-input class="price-input" :class="{'focus': price.min}" v-model="price.min" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" maxlength="9"></el-input>万
|
|
|
+ 从<el-input
|
|
|
+ class="price-input"
|
|
|
+ :class="{ focus: price.min }"
|
|
|
+ v-model="price.min"
|
|
|
+ oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
|
|
|
+ maxlength="9"
|
|
|
+ ></el-input
|
|
|
+ >万
|
|
|
</div>
|
|
|
<div class="custom-money-item">
|
|
|
- 至<el-input class="price-input" :class="{'focus': price.max}" v-model="price.max" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" maxlength="9"></el-input>万
|
|
|
+ 至<el-input
|
|
|
+ class="price-input"
|
|
|
+ :class="{ focus: price.max }"
|
|
|
+ v-model="price.max"
|
|
|
+ oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
|
|
|
+ maxlength="9"
|
|
|
+ ></el-input
|
|
|
+ >万
|
|
|
</div>
|
|
|
<div class="custom-money-button">
|
|
|
- <el-button type="primary" @click.stop="onSubmitPrice">确定</el-button>
|
|
|
+ <el-button type="primary" @click.stop="onSubmitPrice"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
<div slot="reference" class="custom-label">
|
|
@@ -88,7 +107,7 @@ export default {
|
|
|
prop: 'value',
|
|
|
event: 'change'
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
options: amountRangeData,
|
|
|
activeValue: this.value,
|
|
@@ -101,11 +120,11 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- activeLabel () {
|
|
|
+ activeLabel() {
|
|
|
const price = this.activeValue
|
|
|
if (price) {
|
|
|
const priceArr = price.split('-')
|
|
|
- if (priceArr.length > 1) {
|
|
|
+ if (priceArr.length > 0) {
|
|
|
const min = priceArr[0]
|
|
|
const max = priceArr[1]
|
|
|
if (min && max) {
|
|
@@ -134,7 +153,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- onVisibleChange (flag) {
|
|
|
+ onVisibleChange(flag) {
|
|
|
this.isFocus = flag
|
|
|
if (flag) {
|
|
|
this.setState(this.activeValue)
|
|
@@ -143,14 +162,16 @@ export default {
|
|
|
setTimeout(() => {
|
|
|
// popover在下拉框展示时需要重新计算位置,通过先将popover弹框透明度将为0等位置计算完成后再恢复
|
|
|
this.$refs.customPricePopover[0].updatePopper()
|
|
|
- const $popover = this.$root.$el.querySelector('.amount-range-popover > .el-popover')
|
|
|
+ const $popover = this.$root.$el.querySelector(
|
|
|
+ '.amount-range-popover > .el-popover'
|
|
|
+ )
|
|
|
$popover.style.opacity = '1'
|
|
|
}, 300)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- compareMinMax () {
|
|
|
+ compareMinMax() {
|
|
|
const { min, max } = this.price
|
|
|
const hasMinAndMax = String(min).length && String(max).length
|
|
|
if (hasMinAndMax && Number(min) > Number(max)) {
|
|
@@ -158,12 +179,12 @@ export default {
|
|
|
this.price.min = max
|
|
|
}
|
|
|
},
|
|
|
- onSubmitPrice () {
|
|
|
+ onSubmitPrice() {
|
|
|
this.compareMinMax()
|
|
|
const { min, max } = this.price
|
|
|
if (!min && !max) return
|
|
|
this.activeValue = `${min}-${max}`
|
|
|
- this.options.forEach(item => {
|
|
|
+ this.options.forEach((item) => {
|
|
|
if (item.label === '自定义') {
|
|
|
item.value = `${min}-${max}`
|
|
|
}
|
|
@@ -173,7 +194,7 @@ export default {
|
|
|
this.$refs.customPricePopover[0].doClose()
|
|
|
this.$emit('change', this.activeValue)
|
|
|
},
|
|
|
- handleChange (item) {
|
|
|
+ handleChange(item) {
|
|
|
if (item.label !== '自定义') {
|
|
|
this.activeValue = item.value
|
|
|
this.isCustom = false
|
|
@@ -186,17 +207,19 @@ export default {
|
|
|
this.isCustom = true
|
|
|
}
|
|
|
},
|
|
|
- getState () {
|
|
|
+ getState() {
|
|
|
return {
|
|
|
label: this.activeLabel,
|
|
|
value: this.activeValue,
|
|
|
isCustom: this.isCustom
|
|
|
}
|
|
|
},
|
|
|
- setState (data) {
|
|
|
+ setState(data) {
|
|
|
this.isCustom = false
|
|
|
if (data) {
|
|
|
- const valueArr = this.options.filter(v => !v.disabled).map(t => t.value)
|
|
|
+ const valueArr = this.options
|
|
|
+ .filter((v) => !v.disabled)
|
|
|
+ .map((t) => t.value)
|
|
|
if (valueArr.includes(data)) {
|
|
|
this.activeValue = data
|
|
|
this.showPopover = false
|
|
@@ -226,82 +249,82 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.filter-list{
|
|
|
+.filter-list {
|
|
|
min-width: 140px;
|
|
|
padding: 8px 0;
|
|
|
border: 1px solid $color_main;
|
|
|
background: #fff;
|
|
|
border-radius: 5px;
|
|
|
margin-top: 2px;
|
|
|
- .filter-item{
|
|
|
+ .filter-item {
|
|
|
padding: 4px 16px;
|
|
|
font-size: 14px;
|
|
|
line-height: 22px;
|
|
|
color: #1d1d1d;
|
|
|
text-align: left;
|
|
|
cursor: pointer;
|
|
|
- &:hover{
|
|
|
- background: #ECECEC;
|
|
|
+ &:hover {
|
|
|
+ background: #ececec;
|
|
|
}
|
|
|
- &.active{
|
|
|
- background: #ECECEC;
|
|
|
+ &.active {
|
|
|
+ background: #ececec;
|
|
|
}
|
|
|
&.highlight {
|
|
|
color: $color_main;
|
|
|
}
|
|
|
- span{
|
|
|
+ span {
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
- .custom-label{
|
|
|
+ .custom-label {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- .el-icon-arrow-right{
|
|
|
+ .el-icon-arrow-right {
|
|
|
margin-right: -8px;
|
|
|
}
|
|
|
}
|
|
|
- .custom-popover{
|
|
|
- .custom-money{
|
|
|
+ .custom-popover {
|
|
|
+ .custom-money {
|
|
|
padding: 12px;
|
|
|
margin-left: 4px;
|
|
|
border: 1px solid $color_main;
|
|
|
background: #fff;
|
|
|
border-radius: 4px;
|
|
|
- &-item{
|
|
|
+ &-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 12px;
|
|
|
}
|
|
|
- &-button{
|
|
|
+ &-button {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
- .el-button{
|
|
|
+ .el-button {
|
|
|
width: 60px;
|
|
|
height: 28px;
|
|
|
padding: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- ::v-deep{
|
|
|
- .el-popover{
|
|
|
+ ::v-deep {
|
|
|
+ .el-popover {
|
|
|
margin-left: 16px;
|
|
|
border-color: $color_main;
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
background: transparent;
|
|
|
}
|
|
|
- .price-input{
|
|
|
+ .price-input {
|
|
|
width: 88px;
|
|
|
height: 24px;
|
|
|
margin: 0 4px;
|
|
|
- .el-input__inner{
|
|
|
+ .el-input__inner {
|
|
|
height: 100%;
|
|
|
padding: 0 8px;
|
|
|
}
|
|
|
- &.focus{
|
|
|
- .el-input__inner{
|
|
|
+ &.focus {
|
|
|
+ .el-input__inner {
|
|
|
border-color: $color_main;
|
|
|
}
|
|
|
}
|