用vue实现城市选择组件
还是照旧加前提：页面极丑！请忽略，咱们看功能就行，懒得写样式了前提：安装vue-clivuex axios目标：1、实现头部搜索城市功能（v-if判断input不为空时，searchaction搜索城市结果列表块元素为true，indexof查找数据中的关键字）2、遍历数组找出hot为true的热门城市3、遍历数据，charAt(0)获取城市名称拼音的首拼字母，转换为大写，去重赋值，A-Z排序。2
·
还是照旧加前提：页面极丑！请忽略，咱们看功能就行，懒得写样式了
前提：安装vue-cli vuex axios
目标：
1、实现头部搜索城市功能（v-if判断input不为空时，searchaction搜索城市结果列表块元素为true，indexof查找数据中的关键字）
2、遍历数组找出hot为true的热门城市
3、遍历数据，charAt(0)获取城市名称拼音的首拼字母，转换为大写，去重赋值，A-Z排序。2个用途，1是定义子集，按首拼该字母首拼的城市，2是显示在页面右侧，点击页面滚动到该字母子集的位置
4、点击城市，该城市的id 、name等数据用vuex保存到全局中去供其他组件获取到值
上代码
html部分
<div class="city">
<header>
<input type="text" v-model="searchcity" class="input-clear" placeholder="城市/拼音">
<div class="over" v-if="searchaction">
<ul>
<li class="cityte" v-for="(item,index) in searcharr" :key="index" @click="choosecity(item.name,item.id)">{{item.name}}</li>
</ul>
</div>
</header>
<div class="mui-content">
<div class="hot-city">
<p>当前城市：{{this.$store.state.locatecityname}}</p>
<p style="padding:1rem 0 0 0;">热门城市</p>
<div class="hot-list">
<div class="item-box fl" @click="choosecity(item.name,item.id)" v-for="(item,index) in hotcity" :key="index">{{item.name}}</div>
</div>
</div>
<div class="city-main">
<div class="city-list">
<ul>
<li v-for="(item,index) in citymain" :key="index" class="cityli" :id="item.top">
<p class="cityle">{{item.top}}</p>
<ul>
<li v-for="(itemx,index) in item.citylist" :key="index" @click="choosecity(itemx.name,itemx.id)" class="cityte">{{itemx.name}}</li>
</ul>
</li>
</ul>
</div>
<div class="city-letter">
<ul>
<li v-for="(item,index) in letter" :key="index" @click="lettercity($event)">{{item}}</li>
</ul>
</div>
<div class="showletter" v-if='showx'>{{showletter}}</div>
</div>
</div>
</div>
js部分
import axios from 'axios'
export default {
name:'city',
data() {
return {
datalist:[],
letter:[], //城市首拼列表
hotcity:[], //热门城市列表
citymain:[], //首拼+该首拼下城市列表
showx:false,
showletter:'',
searchcity:[], //输入框输入的文字
searcharr:[], //输入查找的城市匹配结果数组
searchaction:false //搜索城市结果列表块元素
}
},
mounted () {
axios.get('../../static/city.json').then(response => {
const citydata = response.data.cities;
this.datalist = response.data.cities;
let cityhead = []; //首拼字母集合
let newcityhead = [];
for(let i = 0;i < citydata.length;i++){
let letteritem = citydata[i].pinyin.charAt(0).toUpperCase(); //获取城市拼音的首字母
cityhead.push(letteritem);
let ishot = citydata[i];
if(citydata[i].isHot){
this.hotcity.push(ishot);
}
}
console.log(this.hotcity)
cityhead = cityhead.sort(function compareFunction(item1,item2) { //字母按中文顺序排序
return item1.localeCompare(item2);
});
console.log(cityhead); //字母数组，按中文顺序排，但未去重
let headarr = [];
for(let i = 0; i <cityhead.length;i++){ //去重
if(!headarr.includes(cityhead[i])){
headarr.push(cityhead[i]);
}
}
console.log(headarr);
this.letter = headarr; //完成去重并赋值
for(let i = 0;i < headarr.length;i++){
let cityitem = new Object(); //自定义对象，城市列表下子集（包括首字母、该字母首拼的城市集合）
cityitem.top = headarr[i]; //首字母
cityitem.citylist = []; //该字母首拼的城市集合
for(let j = 0;j < citydata.length;j++){
if(headarr[i].toLowerCase() === citydata[j].pinyin.charAt(0)){
let citya = new Object();
citya.name = citydata[j].name;
citya.id = citydata[j].cityId;
cityitem.citylist.push(citya);
}
}
this.citymain.push(cityitem);
}
}).catch(error => {
console.log(error)
this.errored = true
}).finally(() => this.loading = false)
},
methods:{
choosecity(name,id) {
let cityid = id;
let cityname = name;
this.$store.commit("updatecityid",cityid)
this.$store.commit("updatecityname",cityname)
this.searchaction = false;
},
lettercity:function($event){
let citym = document.getElementsByClassName("city-main")[0];
let text = $event.currentTarget.innerText;
let item = document.getElementById(text);
this.showx = true;
this.showletter = text;
let that = this;
setTimeout(function(){
that.showx = false;
},2000);
citym.scrollTo(0,item.offsetTop - 350);
}
},
watch:{
searchcity:function(){
let searchcities = [];
if(this.searchcity != ""){
this.searchaction = true;
for(let i = 0;i < this.datalist.length;i++){
let str = this.datalist[i].name;
if(str.indexOf(this.searchcity) != -1){
let searchcityitem = new Object();
searchcityitem.id = this.datalist[i].cityId;
searchcityitem.name = this.datalist[i].name;
searchcities.push(searchcityitem);
}
}
}
this.searcharr = searchcities;
if(this.searchcity.length == 0){
this.searchaction = false;
}else{
this.searchaction = true;
}
}
}
}
使用vuex别忘了把它注入到main.js里，我就经常忘/(ㄒoㄒ)/~~
Vuex 主要有四部分：
state：包含了store中存储的各个状态。
getter: 类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。
mutation: 一组方法，是改变store中状态的执行者，只能是同步操作。
action: 一组方法，其中可以包含异步操作。
刚开始写在man.js里，但后续开发，用的越多越不方便，后来另外创了store目录存放
actions.js
const actions = {
ASYNC_SET_NAME({ state, commit, rootState }, payload) {
setTimeout(() => {
state.bName = 'asyncName'
}, 4000)
}
}
getter.js
const getter = {
doneTodos:(state,getter) => {
return state.todos.filter(todo => todo.done)
}
}
export default getter
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import getter from './getter'
import mutations from './mutations'
import state from './state'
Vue.use(Vuex)
export default new Vuex.Store({
state,
getter,
mutations,
actions,
})
mutations.js
const mutations = {
updatecityname(state,arg){
state.locatecityname = arg
},
updatecityid(state,arg){
state.locatecityid = arg
},
savetoken(state,arg){
state.token = arg;
sessionStorage.setItem('Author',arg);
},
}
export default mutations
state.js
const state = {
locatecityname:'',
locatecityid:'',
}
export default state
最后，差点忘了，mock的城市数据city.json，当时我随便搜搜就找到了，懒得搜的，直接去我git里面拿吧
https://github.com/czzxff/city
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)