1. Nachfrage
Kürzlich habe ich ein Flugsystem geschrieben und musste die Stadtauswahl im Web verwenden. Ursprünglich wollte ich eine Element-UI-Komponente finden, stellte jedoch fest, dass es keine fertige Komponente gab, die angewendet werden konnte, also musste ich sie zusammensetzen Ich habe es selbst unter Verwendung des Element-UI-Frameworks zusammengestellt.
2. Umsetzung
citySelect.vue- Komponente
Bei den verwendeten Daten handelt es sich um tote Daten, die aus inländischen Städten auf Ctrip stammen.
<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>3. Zitat
Führen Sie es einfach direkt in die übergeordnete Komponente ein.
4. Wirkung
