首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue 折腾记 - (8) 一个挺靠谱的多地区选择组件

前言 这个不是三级联动的地址组件; 这是在这个基础需求上增加多地区选择的功能; 我也不想这么个玩意的,但是产品需求就是有这么个东东....功能点: 支持不限城市,不限地区(这个东西的实现..真心死磕了挺久) -- 左右两边数据的同步 地区一次性多选,若是选择了所有地区会自动转为不限地区 数据迁移箭头的判断..选中数据才会有对应的按钮可以点击...这是一个独立的组件,css预处理是用的scss; 的过程遇到的问题: 因为这个功能会多次需要切换省份城市这些,所以我一次性拉取所有数据存储到localstorage,不然请求接口次数太多了 一开始的不限城市和不限地区我想并入...,要剔除不能存在的数据,比如你不限制城市,那所有该省份的城市都要干掉,不限制地区也是类似 左右两边数据的对比是最恶心的,为什么这么说呢?...的过程推倒了三版(三天三个版本),都是思路没想对和理清..写着写着就不下去了... 这个组件目前的功能是满足我这边的需求的,若是有更好的实现方式可以往下面留言.. 谢谢..

87510

Python编写地区选择-Dict

, "最北"), "毅力": ("坚强", "努力")}} def province(place_name):                                       # 定义选择菜单...# 返回选择菜单的list def judge_input(input_list):                                    # 判断输入     pro_name =...     # 获取输入的选项值     if ('1' <= pr_value <= str(len(input_list))) and len(pr_value) == 1:         # 判断选择城市...pro_name = input_list[int(pr_value)-1]                           # 动态赋值,词典加减项,对本程序无影响         print("您选择...,存入         while True:                                                 # 进入选择市级菜单             CityLists

1.1K20
您找到你想要的搜索结果了吗?
是的
没有找到

android仿iphone的地区选择

最近项目要做一个,类似淘宝手机客户端的,选择收货地址的三级联动滚动选择组件,下面是它的大致界面截图: 在IOS中有个叫UIPickerView的选择器,并且在dataSource中定义了UIPickerView...的数据源和定制内容,所以用只要熟悉它的基本用法,要实现这么个三级联动滑动选择是挺简单的。 ...android.widget.TimePicker,因为它们的样子长得很像,事实就是它们仅仅是长得相而已,Google在设计这个两个widget的时候,并没有提供对外的数据源适配接口,带来的问题就是,我们只能通过它们来选择日期和时间...好了,既然在Android中没办法偷懒的用一个系统widget搞定,那么只能自己来自定义view来实现了,这篇就围绕这个来展开分享一下,我在项目中实现这个的全过程。...首先是做了下开源代码调研,在github上面有一个叫做 android-wheel 的开源控件, 代码地址https://github.com/maarek/android-wheel 是一个非常好用的组件

2K70

用原生js一个多动症的简历

用原生js一个"多动症"的简历 预览地址 源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现。...会动的简历实现思路 这张会动的简历,就好像一个打字员在不断地录入文字,页面呈现动态效果。又好像一个早已经录制好影片,而我们只是坐在放映机前观看。...background: red; } 项目搭建 在这个项目中我们 使用webpack2来完成项目的构建 使用yarn来处理依赖包的管理 使用es6的写法 使用部分原生dom操作api standard.js...代码风格约束利器) 目录结构如下 最重要的几个模块分别是resumeEditor(简历编辑模块) 、 stylesEditor(简历样式编辑模块) 、 以及vQuery(封装的dom操作模块) 最后app.js...但是含有一个问题,如果涉及到很多个异步操作,我们是很难通过上面的方式将异步流程管理起来的。

6.8K70

用原生js一个多动症的简历

用原生js一个"多动症"的简历 预览地址 源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现。...会动的简历实现思路 这张会动的简历,就好像一个打字员在不断地录入文字,页面呈现动态效果。又好像一个早已经录制好影片,而我们只是坐在放映机前观看。...background: red; } 项目搭建 在这个项目中我们 使用webpack2来完成项目的构建 使用yarn来处理依赖包的管理 使用es6的写法 使用部分原生dom操作api standard.js...(代码风格约束利器) 最重要的几个模块分别是resumeEditor(简历编辑模块) 、 stylesEditor(简历样式编辑模块) 、 以及vQuery(封装的dom操作模块) 最后app.js...但是含有一个问题,如果涉及到很多个异步操作,我们是很难通过上面的方式将异步流程管理起来的。

5.3K20

如何一个 JS 运行时

本文简单介绍一下如何一个 JS 运行时,相比操作系统、编译器来说,一个 JS 运行时理论上并不是一个难的事情,但是一个优秀且功能齐全的运行时并不是一个容易的事情。...JS 引擎 一个 JS 运行时,首先就必须需要一个 JS 引擎来处理 JS,大部分的 JS 运行时都是基于 V8的,当然你也可以使用其他的 JS 引擎。...所以首先需要选择一个 JS 引擎,然后下载代码,编译成功。有了 JS 引擎,就可以通过它提供的一些 API 实现一个可以执行 JS 代码的软件。...如果我们只支持 Linux,那么就可以选择 epoll,如何是 Mac,那么就可以选择 kqueue,基本上,大多数操作系统都提供了这种机制,如果我们支持多操作系统,那么就需要封装好各个操作系统提供的...但是还有一个重要的部分需要实现,那就是模块加载器,内置的功能可以通过挂载到全局变量的方式来实现,这样用户就不需要通过模块加载器的方式来使用拓展功能,但是用户的 JS,还是需要一个模块加载器。

1.7K30

绕过JS爬虫

其中,东方财富网有许多数据,其中有一个是机构调研的数据。      ...http://data.eastmoney.com/jgdy/tj.html       我们希望抓取的是js生成的表格。      ...这种带有js的网站抓取其实不是那么简单的,基本分为那么几种方法,一种是观察页面,有的会有json数据,有的有js代码可以解析目标的url;一种是使用渲染工具;还有一种就是用工具来点击相关button,来抓取...然后我们就点击第二页、第三页不断的来观察究竟js代码访问了什么后台的url。...至于最后面一个数字,目前猜测是一个计数标记,所有的api中设置一致就可以了。       接下来我们就可以用urllib来获得api背后的json内容了,比如是这样的: ?

14.9K20

js插件教程

html中了;请把这个script标签中的内容单独写在一个js文件里 //整个插件写在一个立即执行函数里;就是function(){}();函数自执行;保证里面的变量不会与外界互相影响 //头部的win...号(叹号)或者;(分号)这不是写错了,为了防止那个二货js结束没有分号;而可能发生报错 /* ;function(win,doc,$,undefined){ }(window...,document,jQuery) 或者写在一个闭包里(function(){           }()) */ (function(win,doc,undefined){...//我们随便一个插件吧 比如你要点击按钮 添加input的值到 div里 var addHtml = function(demo,btn){//插件名,调用的时候直接new一下插件名就行了并传参数或者传对象...;这里可能不止一个函数;你还记得你在全局里一个个的function吗;贼乱; //找也不好找;把一个个函数都写到对象的属性里;调用函数就直接调用对象的属性; constructor

35.1K10

实战 | 用原生js一个多动症的简历

又好像一个早已经录制好影片,而我们只是坐在放映机前观看。...接下来让我们一步步完成它 项目搭建 在这个项目中我们 1、使用webpack2来完成项目的构建 2、使用yarn来处理依赖包的管理 3、使用es6的写法 4、使用部分原生dom操作api 5、standard.js...代码风格约束利器) 目录结构如下 最重要的几个模块分别是resumeEditor(简历编辑模块) 、 stylesEditor(简历样式编辑模块) 、 以及vQuery(封装的dom操作模块) 最后app.js...可以看出它做的事就是封装一个构造函数Vquery,它的实例会有一些简单的dom操作方法,最后为了能够像jQuery那样使用$().funcName的形式去使用,我们导出了一个匿名函数,在匿名函数中去new...但是含有一个问题,如果涉及到很多个异步操作,我们是很难通过上面的方式将异步流程管理起来的。于是我们需要做下面一件事 内部的next函数就是 thunk 的回调函数。

4K10

如何用JS一个table组件 | 作业讲解

第二种,从JavaScript的模块化开发角度来讲,一个function就是一个模块,例如: function isGet(){ //get... } 这个函数就是一个JS模块,它是有逻辑的。...一个组件可以说它是一个JS模块,但一个JS模块,却未必是一个组件。...所以你会看到一个组件里面包含了许多函数、方法或是许多JS文件。 这就引出下一个问题,组件的组织。也就是单一功能的再细分,用笔先写出一个个的点。。...然后定义一个函数,createTableUI(),,, (这东西真累,这么多字了,开头还没写完,还不一定有人爱看。...还是吐槽文舒服啊,一会就写完了) 简短节说啊,,把刚才的config进来,就这样:createTableUI(config) 然后createTableUI的伪代码: createTableUI(c)

4.5K50

nextjs css loader 处理多地区不同基础变量的方法

由于项目在多地区进行发布,为了复用,主工程使用同一个,但是这样会带来一个问题,由于地区的设备分布不同,以及当地的字体选择不一样,从而导致了 global 中的一些熟悉无法复用,而且必须配置两套,那么如何来解决这个问题呢...其实看到第一段就有答案了,webpack 原生是只能解析 js 文件,如果想要其他文件也打包的话,就需要使用到 loader ,所以这里我们选择使用 loader 来处理。...loader 插件选择 在 loader 插件中有一个插件一下进入了视野,那就是 string-replace-loader 我们看下他的一个例子: module.exports = { // .....首先我们一个方法,来添加这个 loader 规则: const addUserLoader = function(arr){ if(!...(scss|sass)$/ ] 为了适应这些规则,我们一个方法一些判断就可以了,代码如下。

1.4K20

一个js的接口http调试程序

所曾经端app与后台的开发与測试过程中接口调试是一个常常要做的工作。 而每当出现一个BUG,前端appproject师与后台project师往往要相互合作才干定位bug到底在那里。...而非本项目的人往往还难以帮上忙(必需要读懂别人的程序,等等的。...开发们都懂的…) 所以自己利用了业余时间用js+hta的方式实现了一个简单的接口调试程序.能够由非开发者对比接口文档就能够进行接口的调试和測试。...下面是程序界面 这是一个机票程序的的接口调用程序,在这个程序中能够调试全部的接口 左側是各个接口的命名,每点击左側的接口名,右側的url和req(请求參数)会对应变为该接口的URL和參数样例,点以下的...程序小巧(10-100k) 该程序入门简单(仅仅须要懂一点html语法与js就可以), 改动easy(用记录本打开就能改动), 执行easy(windows环境下双击执行就可以) 实在是居家旅行,出差工作

1.9K10

一个地区问题,引发的深入思考

1.地区问题 在我们平台的企业表中有一个企业注册地id字段,是必填的,用户在注册企业的页面需要选择一个地区,作为该企业的注册地,实际上数据库保存的是地区的id。...640 (9).png 2.想起了一个问题 说实话,如果你没接触过地区功能的话,大部分人可能会同意这套方案的。...2.1 双方同一时刻更新地区表 显然上面的问题是一个非常棘手的问题,这时候有些小伙伴可能会说:双方使用job同一时刻更新地区表,不就能解决问题了?...尤其是像这种openapi接口,定义的参数应该尽量选择通用的,大家都认可的参数,避免出现我方定制化的参数,比如:地区id。 尽量减少用户的复杂度,让他们调用接口时更简单一些。...如果当时没有好的技术方案,可以先选择暂时跳过这个问题,而沟通其他的内容。后面我们再私下单独花时间,仔细思考当时的问题,从而能够提出更合理的方案。

47011
领券