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

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

    • 组件介绍
    • 效果图展示
    • 子组件代码
    • 父组件如何使用
    • bus.js 在main.js 全局注册了,也可以用 .sync 实现数据 互通 可以查看此链接 http://www.jsphp.net/vue/show-25-291-1.html
    • 另外JSON文件请自己下载下来放到自己服务器上,这个json地址可能会那天失效 有问题请留言,在线解答~

组件介绍

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

效果图展示

基于Vue + Element 城市下拉选择菜单组件_第1张图片

子组件代码

<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地址可能会那天失效 有问题请留言,在线解答~

你可能感兴趣的:(vue.js,组件化,sass,javascript,html)