【Vue】使用vue实现类似民航查询的Web端城市选择器组件

一、 需求

** 最近在写一个航班系统，然后需要用到Web端的城市选择器，本来想去找一个element ui的组件，发现没有现成的可以套用，只能自己拼凑一个出来，用的也是element ui框架完成的。**

二、 实现

citySelect.vue组件

使用的是死的数据，是从携程网国内城市里面拿过来的数据

<template>
    <div> 
        <el-popover :width="550" trigger="click">
                    <template #reference>
                        <el-button class="btn" shadow="hover" type="primary"><slot></slot></el-button>
                    </template>
                        <el-tabs model-value="first">
                            <el-tab-pane></el-tab-pane>
                            <el-tab-pane label="热门" name="first">
                            <table>
                                <tr v-for="i in length/4">
                                <td width="40px"></td> 
                                <td v-for="j in 6"> 
                                    <el-button
                                        text
                                        @click="doSomething(defineCitys.hot[(i-1)*6+(j-1)])">{{defineCitys.hot[(i-1)*6+(j-1)]}}
                                    </el-button>
                                </td> 
                                </tr>
                            </table>
                            </el-tab-pane>
                            <el-tab-pane label="ABCDEF">
                                <table>
                                <tr v-for="value, key, index in defineCitys.ABCDEF">
                                    <el-form-item label-width="90px" :label="key" class="item">
                                     <!-- <i style="font-weight:1000">{{key}}</i>    -->
                                    <td width="40px"></td> 
                                    <td v-for="city1 in defineCitys.ABCDEF[key]"> 
                                        <el-button
                                            text
                                            @click="doSomething(city1)">{{city1}}
                                        </el-button>
                                    </td> 
                                    </el-form-item>
                                </tr>
                                </table>
                            </el-tab-pane>
                            <el-tab-pane label="GHIJ">
                            <table>
                                <tr v-for="value, key, index in defineCitys.GHIJ">
                                    <el-form-item label-width="90px" :label="key" class="item">
                                    <td width="40px"></td> 
                                    <td v-for="city2 in defineCitys.GHIJ[key]"> 
                                        <el-button
                                            text
                                            @click="doSomething(city2)">{{city2}}
                                        </el-button>
                                    </td> 
                                    </el-form-item>
                                </tr>
                                </table>
                            </el-tab-pane>
                            <el-tab-pane label="KIMN">
                            <table>
                                <tr v-for="value, key, index in defineCitys.KIMN">
                                    <el-form-item label-width="90px" :label="key" class="item">
                                    <td width="40px"></td> 
                                    <td v-for="city3 in defineCitys.KIMN[key]"> 
                                        <el-button
                                            text
                                            @click="doSomething(city3)">{{city3}}
                                        </el-button>
                                    </td> 
                                    </el-form-item>
                                </tr>
                                </table>
                            </el-tab-pane>
                            <el-tab-pane label="PQRSTUVW">
                            <table>
                                <tr v-for="value, key, index in defineCitys.PQRSTUVW">
                                    <el-form-item label-width="90px" :label="key" class="item">
                                    <td width="40px"></td> 
                                    <td v-for="city4 in defineCitys.PQRSTUVW[key]"> 
                                        <el-button
                                            text
                                            @click="doSomething(city4)">{{city4}}
                                        </el-button>
                                    </td> 
                                    </el-form-item>
                                </tr>
                                </table>
                            </el-tab-pane>
                            <el-tab-pane label="XYZ">
                            <table>
                                <tr v-for="value, key, index in defineCitys.XYZ">
                                    <el-form-item label-width="90px" :label="key" class="item">
                                    <td width="40px"></td> 
                                    <td v-for="city5 in defineCitys.XYZ[key]"> 
                                        <el-button
                                            text
                                            @click="doSomething(city5)">{{city5}}
                                        </el-button>
                                    </td> 
                                    </el-form-item>
                                </tr>
                                </table>
                            </el-tab-pane>
                        </el-tabs>
        </el-popover>
    </div>
</template>

<script setup>
import { ref,reactive,defineEmits,toRefs, defineProps} from 'vue'
const defineCitys=reactive({
  hot:['北京','上海','广州','深圳' ,'成都' ,'杭州', '武汉' ,'西安', '重庆' 
  ,'青岛','长沙','南京','厦门','昆明','大连','天津','郑州','三亚','济南','福州'],
  ABCDEF:{
    A:['阿勒泰','阿克苏','鞍山','安庆','安顺','阿拉善左','中国澳门','阿里','阿拉善右','阿尔山'],
    B:['巴中','百色','包头','毕节','北海','北京','北京(大','北京(首','博乐','保山','白城','布尔津','白山','巴彦淖尔'],
    C:['昌都','承德','常德','长春','朝阳','赤峰','长治','重庆','长沙','成都','沧源','常州','池州'],
    D:['大同','达州','稻城','丹东','迪庆','大连','大理','敦煌','东营','大庆','德令哈'],
    E:['鄂尔多斯','额济纳旗','恩施','二连浩特'],
    F:['福州','阜阳','抚远','富蕴','佛山']
  },
  GHIJ:{
    G:['广州','果洛','格尔木','广元','固原','中国高雄','赣州','贵阳','桂林'],
    H:['红原','海口','河池','邯郸','黑河','呼和浩特','合肥','杭州','淮安','怀化','海拉尔','哈密','衡阳','哈尔滨','和田','花土沟','中国花莲','霍林郭勒','惠州','汉中','黄山','呼伦贝尔','菏泽'],
    J:['中国嘉义','景德镇','加格达奇','嘉峪关','井冈山','金昌','九江','荆门','佳木斯','济宁','锦州','建三江','鸡西','九寨沟','中国金门','揭阳','济南','荆州'],
  },
  KIMN:{
    K:['库车','康定','喀什','凯里','昆明','库尔勒','克拉玛依'],
    L:['黎平','澜沧','龙岩','临汾','兰州','丽江','荔波','吕梁','临沧','陇南','六盘水','拉萨','洛阳','连云港','临沂','柳州','泸州','林芝'],
    M:['芒市','牡丹江','中国马祖','绵阳','梅州','中国马公','满洲里','漠河'],
    N:['南昌','中国南竿','南充','宁波','南京','宁蒗','南宁','南阳','南通'],
  },
  PQRSTUVW:{    
    P:['攀枝花','普洱'],
    Q:['琼海','秦皇岛','祁连','且末','庆阳','黔江','泉州','衢州','齐齐哈尔','青岛'],
    R:['日照','日喀则','若羌'],
    S:['神农架','莎车','上海','沈阳','石河子','石家庄','上饶','三明','三亚','深圳','十堰','邵阳','松原'],
    T:['台州','中国台中','塔城','腾冲','铜仁','通辽','天水','吐鲁番','通化','中国台南','中国台北','天津','中国台东','唐山','太原'],
    W:['五大连池','乌兰浩特','乌兰察布','乌鲁木齐','潍坊','威海','文山','温州','乌海','武汉','武夷山','无锡','梧州','万州','乌拉特中','巫山','武隆','芜湖'],
  },
  XYZ:{
    X:['兴义','夏河','中国香港','西双版纳','新源','西安','忻州','信阳','襄阳','西昌','锡林浩特','厦门','西宁','徐州'],
    Y:['延安','银川','伊春','永州','榆林','宜宾','运城','宜春','宜昌','伊宁','义乌','营口','延吉','烟台','盐城','扬州','玉树玉','林岳阳'],
    Z:['郑州','张家界','舟山','扎兰屯','张掖','昭通','湛江','中卫','张家口','珠海','遵义']
  }

})
const props = defineProps({
    defaultName: String,
})
const fromCity=ref('')
const length=defineCitys.hot.length
const emit = defineEmits(['sendCity'])
//每个按钮的触发事件
const doSomething=(city)=>{  
  fromCity.value=city
  console.log("子组件中"+city);
  emit("sendCity",city)
}

</script>
<style>
.item .el-form-item__label{
    color: #00050a;
    font-weight:1000
  }
</style>
<style scoped>
.btn{
  width: 200px;
  height: 60px;
  /* color: #409EFF; */
  color: #ffffff;
  font-weight:1000;
  font-size: 20px;
}
</style>

三、引用

直接在父组件中引入使用即可

四、效果