用Vue做一个职业选择或地区选择的三级嵌套组件

设计图长这样：

如图，大概分为三级。点击事件上有个小trick要注意，那就是，第一级点击后显示第二级，第二级点击之后是toggle第三级。

那个职业选择的数据大概有五千多条，有点多，需要拉接口调。这里写个模拟的，结构就是一级一级套对象，代码如下：

function getJobs__list(level,arg1,arg2){// 这是展示的var Jobs__list = {'worker':{'coder':{'shit-coder':'','bullshit-coder':''}},'buyer':{'mbuyer':{'boybuyer':'','dadbuyer':''},'wbuyer':{'girlbuyer':'',}},};if(level===1){var _jobs__flist = {}for(key in Jobs__list){_jobs__flist[key] = {}}return _jobs__flist};if(level === 2 && arg1){return Jobs__list[arg1]};if( level === 3 && arg1 && arg2){console.log(arg1,arg2)return Jobs__list[arg2][arg1]}}function getJobSearchResult(searchname){//这是用于搜索的var o = {'algricultrue':{'fish':{'fish-buyer':{securitylevel:'2',},'fisherman':{securitylevel:'拒保'}}}}o['algricultrue']['fish'][searchname] = {securitylevel : '1'}var results = []for( key in o){if(o.hasOwnProperty(key)){for(key2 in o[key]){if(o[key].hasOwnProperty(key2)){for (key3 in o[key][key2]){if(o[key][key2].hasOwnProperty(key3)){var s = ''s = key + '-' + key2 + '-' + key3 var so = {}so[s]= o[key][key2][key3]['securitylevel']results.push(so)}}}}}}return so
}

忽略丑丑的代码吧，这就是个很粗糙的假冒伪劣接口。

这是个组件：

Vue.component('stackedList',{template:"<article class='stackedlist'>\<div v-for='(f__value,f__key,f__index) in flist' :class='listkind+\"__flist\"'>\<header :class='listkind+\"__f\"' @click='showslist(f__key,f__index)'>{{f__key}}</header>\<article v-show='ssonshow[f__index]' :class='listkind+\"__slist\"' v-for='(s__value,s__key,s__index) of f__value'>\<header :class='listkind+\"__s\"' @click='showtlist(s__key,f__key,s__index,f__index)'>{{s__key}}</header>\<article :class='listkind+\"__tlist\"'>\<p :class='listkind+\"__t\"'  v-for='(t__value,t__key,t__index) of s__value' @click='select(t__key)' v-show='tsonshow[f__index][s__index]'>{{t__key}}</p>\</article>\</article>\</div>\
</article>\",props:['listkind','flist'],data:function() {return {        ssonshow:[],tsonshow:[],}},methods:{showslist:function(f__key,f__index){this.$emit('getflist',2,f__key)this.ssonshow[f__index] = truethis.tsonshow[f__index] = []},showtlist:function(s__key,f__key,s__index,f__index){this.$emit('getslist',3,s__key,f__key)this.tsonshow[f__index][s__index] = !(!!this.tsonshow[f__index][s__index])},select:function(t__key){this.$emit('passvalue',t__key)}}
})

组件要套在Jobs组件中（jobs才是那个整体的大组件）


Vue.component('jobs',{template:"<div class='jobs'><div class='info info__job'>\<span class='pretip' >职业</span>\<input type='text' class='answer' v-model='jobselected' placeholder='请选择职业' @click.prevent='togglejobbox(true,$event)'/>\
</div>\
<div class='jobbox--curtain' v-show='jobboxonshow'>\<div class='jobbox'>\<header>\<p class='jobbox__header'>查询职业类别</p>\<div class='jobbox__close' @click='togglejobbox(false,$event)'>+</div>\</header>\<input class='jobbox__search' type='text' placeholder='搜索职业' @input='showsearchresult' v-model='searchname'/>\<stacked-list v-show='!searchname.trim()' :listkind='listkind' :flist='flist' @passvalue='selectjob'  @getflist='getflist' @getslist='getslist'></stacked-list>\<article class='jobbox__searchresult' v-show='searchname.trim()' >\<p class='jobbox__searchresult__item' v-for='(securitylevel,searchresult) in searchresults'><span class='jobbox__searchresult__item__job'>{{searchresult}}</span><span class='jobbox__searchresult__item__level'>{{securitylevel}}</span></p>\</article>\</div>\
</div></div>"
,props:['jobselected','flist'],data:function(){return {jobboxonshow : false,searchname:'',listkind:'jobbox',searchresults: {}           }},methods:{togglejobbox:function(ifshow,e){e.target.blur()this.jobboxonshow = ifshow ?  true :false ;},showsearchresult:function(){if(!this.searchname){console.error('no searchname')return}var results =  getJobSearchResult(this.searchname)this.searchresults = results},selectjob:function(jobvalue){this.$emit('selectjob',jobvalue)this.jobboxonshow = false},getflist: function(level,f__key){this.$emit('getflist',2,f__key)},getslist: function(level,s__key,f__key){this.$emit('getslist',3,s__key,f__key)}}
})

然后在主体的VM里挂上< jobs >< / jobs >即可，注意prop哦~

这里其实有多个人都可以选职业，要注意把接口调用的数据返回放在一个vm中，多个组件共用一个性质。或者干脆就一个组件，只是v-model对应不同的人，做个区分就行。然后因为是一级一级查询的，要把数据先缓存在本地，如果Local查不到，再去调接口。

用Vue做一个职业选择或地区选择的三级嵌套组件相关推荐

VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...
使用vue做一个“淘宝“项目——3
做出分类页面前言:做出首页,详细请看前两篇文章 1.使用vue做一个"淘宝"项目(做出首页) 2.使用vue做一个"淘宝"项目(显示商品栏) 目录: 创建项目 ...
vue 做一个定点地图的页面（定位到你想要的地点）
实例:如何用vue做一个定点地图的页面,进入一个地图,并且定位到你想要的地点. 这里举一个定点医院的例子. 在pages中添加一个vue页面为Hospital_map.vue,将该网页注册到路由src ...
使用React实现选择城市三级联动组件
以下代码是初期写的代码,后来对代码进行优化,解决了初期的bug.完整的选择城市三级联动组件可以参考我的github项目中的代码,这是后期调试成功上传上去的React选择城市三级联动组件 <Sel ...
canvas+websocket+vue做一个完整的你画我猜小游戏
第一次在掘金发文章,瑟瑟发抖. 这个主要是为了学习使用一下canvas和websocket,项目地址.求star- 你画我猜大家应该都玩过,一个人画,其他人猜.目前实现了最基本的功能,慢慢修改. 项目 ...
哟，2020年了！试着用vue做一个自己的小程序吧~~
Table of Content 前言 1. 生命周期 1. Vue的生命周期 2. 微信小程序页面生命周期 3. uni-app生命周期 1. 应用生命周期 2. 页面生命周期 2. 项目搭建 1. ...
哟，2020 年了，用 Vue 做一个自己的小程序吧！| 原力计划
作者 | End_less_,责编 | 夕颜来源 | CSDN博客头图 | CSDN 下载自视觉中国出品 | CSDN(ID:CSDNnews) 前言今天,我们来学习一下如何使用vue进行微信 ...
如何用vue做一个二级联动
如何做一个像这样二级联动的目录? 先来说说重点和思路:重点在于router-view的使用以及vue-router的配置,思路是两层children的嵌套. 下面开始实现功能. 翻开我们的vue工程的 ...
使用react做一个户籍地下拉选择（含2020版区划户籍代码json）
前言前段时间在做项目的时候遇到了一个需求需要做一个户籍地的三级联级下拉菜单,在这里分享一下心得,技术有限方法比较蠢获取户籍地代码和地名自己在网上找了一下现成的json 比较少,而且有一些比较老, ...
使用vue做一个“淘宝“项目(显示商品栏)
显示商品栏前言:完成上一篇文章--做出首页点击跳转目录: 创建项目文件删除原有文件引用资源文件实现底部导航栏显示页面做出首页显示商品栏做出分类一.做出宫格每次做一个新东西的时候 ...

用Vue做一个职业选择或地区选择的三级嵌套组件

用Vue做一个职业选择或地区选择的三级嵌套组件相关推荐

最新文章

热门文章