公司上一期项目中新增了省市区滑动三级联动效果,用的是mint-ui的picker组件和popup组件,效果如下:点击确定换地区,点击取消不变 省市区数据是后台给的(根据上一级的id,获取下一级数据列表,省列表传0),数据格式如下 接下来就直接上代码了 引入组件后的html部分 ...
demo及源码地址https: github.com artiely citypicker 先去下载一个 省份 城市 区县 乡镇 四级联动数据,然后 引入 组件使用 组件方法 let index shi.indexOf values let xian s values shi index 完成效果 demo及源码地址https: github.com artiely citypicker ...
2017-06-25 11:30 55 17241 推荐指数:
公司上一期项目中新增了省市区滑动三级联动效果,用的是mint-ui的picker组件和popup组件,效果如下:点击确定换地区,点击取消不变 省市区数据是后台给的(根据上一级的id,获取下一级数据列表,省列表传0),数据格式如下 接下来就直接上代码了 引入组件后的html部分 ...
一、通过vue mint-ui 最终实现的效果 二、省市区对应的数据格式 三、通过vue、mint 实现组件 四、选择对应的省市区实现的业务逻辑 五、部分css样式 ...
三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下 首先页面显示如下: 然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景色未 ...
工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 html代码如下 script: 样式代码请自己挑选下: ...
该栗子是我直接从公司的项目单独拉出来的(懒得重新写一次了),所以代码会有些冗余,下面直接看效果: 接着上代码: html: script: style: PS:那个地址的JS文件由于太大我就不贴出来了,大家可以去我的github那里下载完整 ...
我们在上一篇中介绍了如何获取省市区的数据,现在我们来介绍使用spinner控件来实现省市区3级联动的例子。 下面的代码是我在开发项目时实现的。 首先我们展示下布局文件中的3个spinner <LinearLayout android:layout_height ...
之前看的省市区街道四级联动的插件,感觉和公司要求的有些不符合,就自己写了一个 因为要读取本地json文件,所以要跑下服务器 下载browser-sync 然后在项目目录下运行browser-sync start --server --file "**" html css ...
首先呈现效果图 1.我的是通过element-ui实现的;可自由选择UI 2.话不多说,直接上代码,结构非常简单 3.js部分(重点部分是实现字段的重重过滤) 4.城市数据代码格式 { value: 1, label ...