|
@@ -18,18 +18,19 @@
|
|
class="index-item"
|
|
class="index-item"
|
|
:data-index="key"
|
|
:data-index="key"
|
|
:ref="'index-item-' + key"
|
|
:ref="'index-item-' + key"
|
|
- v-for="(item, key) in provinceListMap"
|
|
|
|
|
|
+ v-for="(item, key, index) in provinceListMap"
|
|
:key="key"
|
|
:key="key"
|
|
>
|
|
>
|
|
<div
|
|
<div
|
|
class="j-button-item"
|
|
class="j-button-item"
|
|
|
|
+ :data-index="index"
|
|
v-for="(province, ii) in item"
|
|
v-for="(province, ii) in item"
|
|
:class="{
|
|
:class="{
|
|
bgc: onlyProvince,
|
|
bgc: onlyProvince,
|
|
expand: province.expanded && province.canExpanded,
|
|
expand: province.expanded && province.canExpanded,
|
|
active: provinceButtonActive(province),
|
|
active: provinceButtonActive(province),
|
|
country: province.name === '全国',
|
|
country: province.name === '全国',
|
|
- hidden: !moreStatus && key.indexOf('o-') > -1,
|
|
|
|
|
|
+ hidden: !moreStatus && (index + 1) > oneShowCount,
|
|
[province.selectedState]: !showSelectedList
|
|
[province.selectedState]: !showSelectedList
|
|
}"
|
|
}"
|
|
:key="ii * 2"
|
|
:key="ii * 2"
|
|
@@ -142,7 +143,8 @@ export default {
|
|
},
|
|
},
|
|
selectedCity: {},
|
|
selectedCity: {},
|
|
selectedTagList: [],
|
|
selectedTagList: [],
|
|
- moreStatus: false
|
|
|
|
|
|
+ moreStatus: false,
|
|
|
|
+ oneShowCount: 0
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -160,7 +162,22 @@ export default {
|
|
this.initIndexBarAndAreaMap()
|
|
this.initIndexBarAndAreaMap()
|
|
this.setState(this.value)
|
|
this.setState(this.value)
|
|
},
|
|
},
|
|
|
|
+ mounted() {
|
|
|
|
+ this.calcShowCount()
|
|
|
|
+ window.addEventListener('resize', this.calcShowCount)
|
|
|
|
+ },
|
|
|
|
+ beforeDestroy() {
|
|
|
|
+ window.removeEventListener('resize', this.calcShowCount)
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
|
|
+ // 计算一行展示多少个
|
|
|
|
+ calcShowCount() {
|
|
|
|
+ // 72 为padding-right距离
|
|
|
|
+ const containerWidth = document.querySelector('.select-list').clientWidth - 72 - 50 // 容器的宽度
|
|
|
|
+ const itemWidth = 50
|
|
|
|
+ this.oneShowCount = Math.floor(containerWidth / itemWidth)
|
|
|
|
+ console.log(this.oneShowCount, '一行展示多少个')
|
|
|
|
+ },
|
|
toggleMoreStatus() {
|
|
toggleMoreStatus() {
|
|
this.moreStatus = !this.moreStatus
|
|
this.moreStatus = !this.moreStatus
|
|
for (const key in this.provinceListMap) {
|
|
for (const key in this.provinceListMap) {
|
|
@@ -191,7 +208,6 @@ export default {
|
|
if (Object.keys(provinceMap).length !== 0) {
|
|
if (Object.keys(provinceMap).length !== 0) {
|
|
this.provinceListMapExp = provinceMap
|
|
this.provinceListMapExp = provinceMap
|
|
}
|
|
}
|
|
- console.log(pMap, 'pMap')
|
|
|
|
for (const key in pMap) {
|
|
for (const key in pMap) {
|
|
const areaArr = []
|
|
const areaArr = []
|
|
indexList.push(key)
|
|
indexList.push(key)
|
|
@@ -242,7 +258,6 @@ export default {
|
|
for (const k in provinceListMap) {
|
|
for (const k in provinceListMap) {
|
|
this.$set(this.provinceListMap, k, provinceListMap[k])
|
|
this.$set(this.provinceListMap, k, provinceListMap[k])
|
|
}
|
|
}
|
|
- console.log(this.provinceListMap, 'this.provinceListMap');
|
|
|
|
this.getAllItem().selectedState = 'checked'
|
|
this.getAllItem().selectedState = 'checked'
|
|
},
|
|
},
|
|
// 循环chinaMapJSON,找到对应省下面对应的市
|
|
// 循环chinaMapJSON,找到对应省下面对应的市
|