首先写好组件：
<template>
<div class="city">
<input type="text" placeholder="出发城市" @focus="showCityDialog" v-model="cityValue">
<div class="city-components" v-if="showCity">
<div class="hot_city">
<p>热门城市</p>
<span v-for="(item, index) in hotCityList" :key="index" @click.prevent="viewCity(item)">{{item}}</span>
</div>
<div class="city_slid">
<h2>
<span @click="CityInlandShow" class="on" ref="inland">国内打球城市</span>
<span @click="internationalCityShow" ref="international">国际打球城市</span>
</h2>
<!--国内城市-->
<div class="inlandWrapper" v-if="CityInland">
<ul>
<li v-for="(item, index) of chinaCityList" :key="index" @click="goAnchor('#initial'+index,index)">
{{ item.initial }}
</li>
</ul>
<div id="city_slid">
<dl v-for="(item, index) of chinaCityList" :key="index">
<dt :id='"initial"+ index +""'>{{ item.initial }}</dt>
<dd>
<span v-for="(items,index) of item.list" :key="index" @click.prevent="viewCity(items.name)" >{{ items.name }}</span>
</dd>
</dl>
</div>
</div>
<!--国际城市-->
<div class="internationalWrapper" v-if="internationalCity" >
<ul>
<!--这里要删除，换掉实际的数据-->
<li>国际</li>
<li v-for="(item, index) of chinaCityList" :key="index" @click="goAnchor('#initial'+index,index)">
{{ item.initial }}
</li>
</ul>
<div id="city_slid">
<dl v-for="(item, index) of chinaCityList" :key="index">
<dt :id='"initial"+ index +""'>{{ item.initial }}</dt>
<dd><span v-for="(items,index) of item.list" :key="index" @click.prevent="viewCity(items.name)">{{ items.name }}</span></dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import cityList from './cityJson.js'
export default {
props: {
hotCityList: {
type: Array,
required: true,
default: () => []
},
chinaCityList: {
type: Array,
required: true,
default: () => []
},
internationalCityList: {
type: Array,
required: true,
default: () => []
}
},
data(){
return {
cityValue: '',
showCity: false,
// hotCityList: ["深圳", "广州", "上海", "北京", "海南", "云南", "泰国", "柬埔寨", "巴厘岛", "越南"],
// chinaCity: chinaCityList,
activeBtn: 0,
CityInland:true,
internationalCity:false
}
},
methods: {
//隐藏城市选区
hideCityDialog(){
this.showCity = false;
},
// 展示城市选区
showCityDialog(){
this.showCity = true;
},
viewCity(city){
this.cityValue = city;//输入框显示当前选择的城市
this.showCity = false;//关闭城市选区
},
//渲染城市列表
// chinaCityRender(){
// chinaCity().then((res) =>{
// this.chinaCity = res.city
// console.log(res.city)
// })
// },
//锚点跳转
goAnchor(selector, index) {
this.activeBtn = index
document.querySelector("#city_slid").scrollTop = document.querySelector(selector).offsetTop-207;
},
CityInlandShow(){
this.CityInland=true
this.internationalCity=false
this.$refs.inland.classList.add("on")
this.$refs.international.classList.remove("on")
},
internationalCityShow(){
this.CityInland=false
this.internationalCity=true
this.$refs.inland.classList.remove("on")
this.$refs.international.classList.add("on")
}
},
mounted(){
console.log(cityList)
}
}
</script>
<style lang="sass" scoped>
*{
margin 0
padding 0
}
.city{
width 600px
height 600px
margin 0 auto
position:relative;
.city-components{
position: absolute;
color: #fff;
width: 697px;
height: 338px;
background-color: #FFFFFF;
border-radius: 2px;
padding: 20px 21px;
z-index: 999;
border:1px solid #F1F1F1;
.hot_city{
width: 100%;
overflow: hidden;
p {
font-size: 18px;
margin-bottom: 10px;
color: #666666;
}
span{
display: inline-block;
margin-right:30px;
color: #999999;
font-size: 15px;
}
}
.city_slid{
h2 {
text-align: center;
width:430px;
display: block;
margin: 30px auto 20px;
overflow: hidden;
span {
font-size: 16px;
color: #333333;
display: inline-block;
width: 110px;
text-align: center;
margin: 0px 50px;
}
.on{
color: #8F6448;
}
}
ul{
width: 100%;
overflow: hidden;
margin: 20px 0px;
li{
float: left;
display: inline-block;
margin: 0px 18px;
font-size: 16px;
color: #666666;
}
}
>div{
div{
height: 135px;
overflow: auto;
dl{
width: 100%;
font-size:16px;
color: #999999;
line-height: 22px;
overflow: hidden;
dt{
float: left;
width: 20px;
}
dd{
width: 660px;
float: right;
span{
display: inline-block;
float:left;
font-size: 16px;
margin-right: 40px;
color: #999999;
}
}
}
}
}
}
}
}
</style>
然后在main.js里面
import city from './city/city.vue' //导入组件
Vue.component('city', city) //组册公用组件
使用组件（父子传参的方式, 分别传入的热门城市列表，国内城市列表，国际城市列表）
<city :hotCityList = "hotCityList" :chinaCityList = "chinaCityList" :internationalCityList = "internationalCityList"></city>
网友评论