基于Vue + Element 城市下拉选择菜单组件

组件介绍

之前项目要做一个城市选择下拉菜单 ，类似携程网旅游类的，但是网上搜了一下很少有满意的，就自己在网上找了一个JSON文件，封装了一个，UI效果都很不错，应用场景不同，所以封装的比较简单，如果应用复杂场景，可在代码上修改。

效果图展示

子组件代码

<template>
	<div>
		<el-select ref="select_focus" style="width: 100%;" :filterable="false" @remove-tag="()=>{this.$parent.btn_focus = true} " class="tabone_from_select" @focus="()=>{this.$parent.btn_focus = true} "
		 v-model="address_data" multiple placeholder="请选择">
			<div class="jt_city_header">
				<div class="jt_city_header_tit">
					以拼音首字母排列  <i @click="close_select" title="关闭" class="el-icon-close"></i>
				</div>
				<div class="jt_city_header_num">
					<div @click="jtChangeTab(1)" :class="{'jt_city_act': city_act == 1}">热门</div>
					<div @click="jtChangeTab(2)" :class="{'jt_city_act': city_act == 2}">ABCD</div>
					<div @click="jtChangeTab(3)" :class="{'jt_city_act': city_act == 3}">EFGH</div>
					<div @click="jtChangeTab(4)" :class="{'jt_city_act': city_act == 4}">JKLM</div>
					<div @click="jtChangeTab(5)" :class="{'jt_city_act': city_act == 5}">NOPQRS</div>
					<div @click="jtChangeTab(6)" :class="{'jt_city_act': city_act == 6}">TUVWX</div>
					<div @click="jtChangeTab(7)" :class="{'jt_city_act': city_act == 7}">YZ</div>
				</div>
			</div>
			<div class="jt_city_header_body scroll_box scroll_box_aside_background_yellow">
				<div class="jt_city_body_num" v-show="chane_cityList.includes(item.initial)" v-for="(item,index) in cityData" :key="index">
					<div class="jt_city_body_num_info" v-show="item.initial !='996'">{{item.initial}}</div>
					<div class="jt_city_body_name">
						<el-option v-for="(c_item,c_index) in item.list" :key="c_index" :label="c_item.name" :value="c_item.name">
							<div>{{c_item.name}}</div>
						</el-option>
					</div>
				</div>
			</div>
		</el-select>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: "tabnumOne",
		data() {
			return {
				city_act: 1,
				cityData: [],

				chane_cityList: ['996'],
			};
		},
		props: ["demoCityData"],
		computed: {
			address_data: {
				get() {
					let address_data = []
					if (this.demoCityData) {
						if (typeof this.demoCityData == 'string') {
							address_data.push(this.demoCityData)
						} else {
							address_data = this.demoCityData
						}
						return address_data
					} else {
						return []
					}
				},
				set(v) {
					if (v.length > 5) {
						return this.$message('最多选择5个目的地！')
					}

					if (v.length < 1) {
						return this.$message('至少选择一个目的地！')
					}
					// this.$emit("update:demoCityData",v);
					this.$bus.$emit("setBusCityData", v);
					// this.$parent.setCityData(v)
					// this.demoCityData = v
				}
			},
		},
		created() {
			axios.get("https://qn-album.meetb.cn/journeycity%281%29.json").then((resp) => {
				this.cityData = resp.data.city
			})

		},
		methods: {
			close_select(){
				this.$nextTick(() => {
					this.$refs.select_focus.blur()
				})
			},
			jtChangeTab(num) {
				this.chane_cityList = []
				setTimeout(_ => {
					this.city_act = num
					switch (num) {
						case 1:
							this.chane_cityList = ['996']
							break;
						case 2:
							this.chane_cityList = ['A', "B", "C", "D"]
							break;
						case 3:
							this.chane_cityList = ['E', "F", "G", "H"]
							break;
						case 4:
							this.chane_cityList = ['J', "K", "L", "M"]
							break;
						case 5:
							this.chane_cityList = ['N', "O", "P", "Q", "R", "S"]
							break;
						case 6:
							this.chane_cityList = ['T', "U", "V", "W", "X"]
							break;
						case 7:
							this.chane_cityList = ['Y', "Z"]
							break;
						default:
							return
							break;
					}

				}, 10)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/assets/css/journey/journeyTabNum/oneselectCity";

	.scroll_box_aside_background_yellow::-webkit-scrollbar-track {
		background: #ffffff !important;
	}
	
	/deep/ .el-tag.el-tag--info{
		border: none;
		background-color: f2f2f2;
	}
	
	/deep/ .el-tag--small{
		line-height: 24px;
	}
	
	
	/deep/ .el-select .el-tag__close.el-icon-close{
		right: -4px;
		font-size: 16px;
		color: #696969;
		background-color: rgba(235,235,235,1);
		
		&:hover{
			background-color: #333333;
			color: #FFFFFF;
		}
	}
	
	
</style>

引入的css 文件代码 oneselectCity.css

@charset "UTF-8";


/deep/ .el-select-dropdown__item {
	margin-bottom: 0px;
	margin-right: 5px;
}

/deep/ .el-select__tags-text {
	font-size: 12px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #000000;
}


.jt_city_header_body {
	margin-top: 58px;
	height: 185px;
	overflow-y: scroll;
	
	
	width: 505px;

	display: flex;
	/* flex-flow: column; */
	flex-wrap: wrap;

	.jt_city_body_num {
		display: flex;
		margin-bottom: 10px;

		.jt_city_body_num_info {
			width: 30px;
			line-height: 34px;
			text-align: center;
			
			color: #000000;
		}

		.jt_city_body_name {
			display: flex;
			flex-wrap: wrap;
			flex: 1;
			align-content: flex-start;
			
		}
	}
}

.jt_city_header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;

	width: 100%;
	height: 55px;

	padding: 10px 20px 0 20px;
	box-sizing: border-box;

	.jt_city_header_tit {
		font-size: 12px;
		opacity: 0.7;
		
		i{
			float: right;
			font-size: 20px;
			margin-right: -10px;
			
			&:hover{
				color: #FECE12;
			}
		}
	}

	.jt_city_header_num {
		display: flex;
		height: 25px;
		border-bottom: 1px solid #DFDFDF;
		margin-top: 8px;
		font-size: 14px;

		div {
			padding: 0 5px;
			margin-right: 16px;

			margin-bottom: -2px;

			&:hover {
				color: #FECE12;
				cursor: pointer;
			}
		}

		.jt_city_act {
			margin-bottom: -1px;
			border-bottom: 2px solid #FECE12;
			color: #FECE12;
		}
	}
}

父组件如何使用

<template>
	<div>
		<oneselect-city :demoCityData="push_data.dest"></oneselect-city>
	</div>
</template>

<script>
	export default {
		name: "projectAdd",
		components: {
			oneselectCity: () => import("@/components/journeyList/journeyBody/journeyTabNum/oneselectCity.vue")
		},
		data() {
			return {
				push_data: {
					dest: []
				}
			};
		},
		created() {
			this.$bus.$on("setBusCityData", arg => {
				this.setCityData(arg)
			});
		},
		methods: {
			setCityData(value){
				this.push_data.dest = value
			}
		}
	}
</script>

bus.js 在main.js 全局注册了，也可以用 .sync 实现数据 互通 可以查看此链接 http://www.jsphp.net/vue/show-25-291-1.html

import Vue from 'vue'
const bus = new Vue()
export default bus;

另外JSON文件请自己下载下来放到自己服务器上，这个json地址可能会那天失效 有问题请留言，在线解答~