中国省市区街道四級連動地区選択コンポーネント
16509 ワード
中国省市区街道四級連動地区選択コンポーネント
効果図
プライマリコード
"lw-area-select" id="lwAreaSelect">
"lw-virtual-input" @click="openDropDown">{{value}}
"dropDown.open" class="lw-area-dropdown">
"lw-area-tab">"innerLevel >= 1"
:style="`width: calc(100%/${innerLevel});`"
:class="{active: currentTab === 'province'}"
@click="handleTabChange('province')">
"innerLevel >= 2"
:style="`width: calc(100%/${innerLevel});`"
:class="{active: currentTab === 'city'}"
@click="handleTabChange('city')">
"innerLevel >= 3"
:style="`width: calc(100%/${innerLevel});`"
:class="{active: currentTab === 'district'}"
@click="handleTabChange('district')">
"innerLevel >= 4"
:style="`width: calc(100%/${innerLevel});`"
:class="{active: currentTab === 'street'}"
@click="handleTabChange('street')">
"lw-area-content">
"currentTab === 'province'" class="fn-clear fn-clear-province" v-for="(value, key) in areas['86']">
- {{key}}
-
"{selected: province.key === ky}" v-for="(val, ky) in value" :title="val" :data-id="ky" href="javascript:;" @click="handleAreaSelect(ky, val)">{{val}}
"currentTab === 'city'" class="fn-clear fn-clear-city" >
- "(value, key) in areas[province.key]">
"{selected: city.key === key}" :title="value" :data-id="key" href="javascript:;" @click="handleAreaSelect(key, value)">{{value}}
"currentTab === 'district'" class="fn-clear fn-clear-district" >
- "(value, key) in areas[city.key]">
"{selected: district.key === key}" :title="value" :data-id="key" href="javascript:;" @click="handleAreaSelect(key, value)">{{value}}
"currentTab === 'street'" class="fn-clear fn-clear-street" >
- "(value, key) in areas[district.key]">
"{selected: street.key === key}" :title="value" :data-id="key" href="javascript:;" @click="handleAreaSelect(key, value)">{{value}}
import data from <span class="hljs-string">'./data.js'</span>
import $ from <span class="hljs-string">'jquery'</span>
<span class="hljs-built_in">export</span> default {
name: <span class="hljs-string">'AreaSelect'</span>,
model: {
props: <span class="hljs-string">'value'</span>,
event: <span class="hljs-string">'change'</span>
},
props: {
value: {
<span class="hljs-built_in">type</span>: String,
default: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
<span class="hljs-built_in">return</span> <span class="hljs-string">''</span>
}
},
level: {
<span class="hljs-built_in">type</span>: String,
default: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
<span class="hljs-built_in">return</span> <span class="hljs-string">'street'</span>
}
}
},
<span class="hljs-function"><span class="hljs-title">data</span></span>() {
<span class="hljs-built_in">return</span> {
areas: data,
innerLevel: 4,
dropDown: {
open: <span class="hljs-literal">false</span>
},
currentTab: <span class="hljs-string">'province'</span>,
province: {
key: <span class="hljs-string">''</span>,
value: <span class="hljs-string">''</span>
},
city: {
key: <span class="hljs-string">''</span>,
value: <span class="hljs-string">''</span>
},
district: {
key: <span class="hljs-string">''</span>,
value: <span class="hljs-string">''</span>
},
street: {
key: <span class="hljs-string">''</span>,
value: <span class="hljs-string">''</span>
}
}
},
computed: {
<span class="hljs-function"><span class="hljs-title">selectedArea</span></span>() {
<span class="hljs-built_in">let</span> [key, value] = [<span class="hljs-string">''</span>, <span class="hljs-string">''</span>]
<span class="hljs-keyword">if</span> (this.province.key !== <span class="hljs-string">''</span>) {
key += this.province.key
value += this.province.value
}
console.log(<span class="hljs-string">'province:'</span>, this.province.value)
<span class="hljs-keyword">if</span> (this.city.key !== <span class="hljs-string">''</span>) {
key += <span class="hljs-string">'/'</span> + this.city.key
value += <span class="hljs-string">'/'</span> + this.city.value
}
console.log(<span class="hljs-string">'city:'</span>, this.city.value)
<span class="hljs-keyword">if</span> (this.district.key !== <span class="hljs-string">''</span>) {
key += <span class="hljs-string">'/'</span> + this.district.key
value += <span class="hljs-string">'/'</span> + this.district.value
}
console.log(<span class="hljs-string">'district:'</span>, this.district.value)
<span class="hljs-keyword">if</span> (this.street.key !== <span class="hljs-string">''</span>) {
key += <span class="hljs-string">'/'</span> + this.street.key
value += <span class="hljs-string">'/'</span> + this.street.value
}
console.log(<span class="hljs-string">'street:'</span>, this.street.value)
console.log(<span class="hljs-string">'------------------------------------------------------'</span>)
<span class="hljs-built_in">return</span> { key, value }
}
},
watch: {
<span class="hljs-string">'selectedArea.value'</span>(newVal, oldVal) {
this.<span class="hljs-variable">$emit</span>(<span class="hljs-string">'change'</span>, newVal)
}
},
<span class="hljs-function"><span class="hljs-title">created</span></span>() {
this.innerLevel = this.calcInnerLevel(this.level)
this.addBlurEvent()
},
methods: {
<span class="hljs-function"><span class="hljs-title">openDropDown</span></span>() {
this.dropDown.open = <span class="hljs-literal">true</span>
},
calcInnerLevel(level) {
<span class="hljs-keyword">if</span> (level === <span class="hljs-string">'province'</span>) <span class="hljs-built_in">return</span> 1
<span class="hljs-keyword">if</span> (level === <span class="hljs-string">'city'</span>) <span class="hljs-built_in">return</span> 2
<span class="hljs-keyword">if</span> (level === <span class="hljs-string">'district'</span>) <span class="hljs-built_in">return</span> 3
<span class="hljs-built_in">return</span> 4
},
<span class="hljs-function"><span class="hljs-title">addBlurEvent</span></span>() {
$(document).click(<span class="hljs-string">'click'</span>, (event) => {
<span class="hljs-keyword">if</span> (this.dropDown.open) {
<span class="hljs-keyword">if</span> ($(event.target).closest(<span class="hljs-string">'#lwAreaSelect'</span>)[0] !== $(<span class="hljs-string">'#lwAreaSelect'</span>)[0]) {
this.<span class="hljs-variable">$emit</span>(<span class="hljs-string">'blur'</span>)
this.dropDown.open = <span class="hljs-literal">false</span>
}
}
})
},
handleAreaSelect(key, value) {
const targetElement = $(`[data-id=<span class="hljs-variable">${key}</span>]`)
this.clearNextLevelData()
<span class="hljs-keyword">if</span> (targetElement.hasClass(<span class="hljs-string">'selected'</span>)) {
targetElement.removeClass(<span class="hljs-string">'selected'</span>)
} <span class="hljs-keyword">else</span> {
this.outputNextLevelData(key, value)
}
},
outputNextLevelData(key, value) {
this[this.currentTab] = { key, value }//
<span class="hljs-keyword">if</span> (this.currentTab !== this.level) {
<span class="hljs-keyword">if</span> (this.currentTab === <span class="hljs-string">'province'</span>) {
this.currentTab = <span class="hljs-string">'city'</span>
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (this.currentTab === <span class="hljs-string">'city'</span>) {
this.currentTab = <span class="hljs-string">'district'</span>
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (this.currentTab === <span class="hljs-string">'district'</span>) {
this.currentTab = <span class="hljs-string">'street'</span>
}
} <span class="hljs-keyword">else</span> {
this.<span class="hljs-variable">$emit</span>(<span class="hljs-string">'blur'</span>)
this.dropDown.open = <span class="hljs-literal">false</span>
}
},
handleTabChange(tabName) {
this.currentTab = tabName
},
<span class="hljs-function"><span class="hljs-title">clearNextLevelData</span></span>() {
<span class="hljs-keyword">if</span> (this.currentTab === <span class="hljs-string">'province'</span>) {
this.province = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
this.city = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
this.district = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
this.street = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (this.currentTab === <span class="hljs-string">'city'</span>) {
this.city = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
this.district = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
this.street = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
} <span class="hljs-keyword">else</span> {
this.district = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
this.street = { key: <span class="hljs-string">''</span>, value: <span class="hljs-string">''</span> }
}
}
}
}
転載先:https://juejin.im/post/5abba6c7f265da23994e975d