继续上一篇: 子组件css: <style scoped lang="less"> #city { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 100; } .bg { background: black; width: 100%; height: 100%; opacity: .4; } .city { position: fixed; bottom: 1.6rem; widt…

vue移动端地区三级联动 省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数据是后端请求的.我只简单写了三个mock数据.(二)中简单写一下展示以及父级组件. city.vue 子组件: html: <template> <div id="city" v-if="showModel"> <div class=&qu…

工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 html代码如下 <!--居住地址三级联动选项--> <section class="showChose" v-show="showChose"> <section class="address"> <secti…

很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果:         1.安装vue-area-linkage插件:npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose            2.在main.js上进行依赖注入,如下图所示:    …

中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm或bower来安装该三级联动插件. npm install distpicker bower install distpicker 使用方法 HTML结构 基本的HTML结构是使用一个<div>容器来包裹一组<select>元素. <div><!-- containe…

插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github.io/distpicker/ [CDN地址]http://www.bootcdn.cn/distpicker/ [源代码]https://github.com/fengyuanchen/distpicker 安装可使用CDN方法 使用插件需要同时引用 jQuery和 Distpicker插件 <s…

我真的没想到这个会困扰到我.最开始以为,不就是直接找个简单的插件就实现了吗,jquery插件找了几个,都没有达到目的. 需求是这样的: 点击input框,弹出一个popup,然后可以滚动选择省,市,县.他们三者是联动的,同时也可以只选择省,或者省市,或者省市县.就是这个需求,感觉有点为难到我了.也可能是昨天感冒了,一天头都晕,又开各种会各种培训..哈哈哈,不扯了... 数据哪里来?去下载一个“省份.城市.区县”三级联动的数据. 考虑到滚动选择这个需求,我们用饿了么推出的mint-ui里面的mt-…

通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的函数 $("#sjld").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"…

Install the pkg with npm: // v5之前的版本 npm i --save vue-area-linkage // v5及之后的版本 npm i --save vue-area-linkage area-data 目前基本都是5之后的了 main.js中 import VueAreaLinkage from 'vue-area-linkage'; Vue.use(VueAreaLinkage) 组件中 import {pca, pcaa} from 'area-data'…

Vue版移动端日期选择组件 1.优点:不需要依赖其他第三方库,灵活可配置: 不需要依赖第三方组件的vue日期移动端组件  小轮子 轻量可复用:  https://github.com/BeckReed/datepicker-for-vue   如果有用请点start 2.用法:参见 src/view/demo.vue 文件的用法,简单易懂   <div> <h3>三列(年月日)日期弹窗示例--带标题)</h3> <button class="blue-b…

jquery 的三级地址联动,原理与javascript类似,只是在触发请求的时候,使用封装好的 $.get ,$post,$.ajax 方法去执行,其余的都是一样的,后台服务器请求文件是一样的,前台html样式和方法也是一样的 1. 写一个 服务器文件  server_jquery.php ,如下: <?php // 服务器连接 mysql_connect("localhost","root","root") or die(mysql_e…

1.三级地址联动思路如下: 2.建立数据库.这里直接使用网上的地址数库,最后一个字段无用,先不去管它 3.建立一个server.php 文件 <?php // 数据库连接 mysql_connect("localhost","root","root") or die(mysql_error()); mysql_select_db("ajax_demo"); mysql_query("set names utf8…

插件下载地址 http://www.jq22.com/jquery-info8054 效果如下: 使用: 1.引入js <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script> <script src="js/distpicker.data.js"></script> <script src="js/distpicke…

1:如下图 问题:引用了mui的地址选择的三级联动的应用在h5上的组件 百度发现别人思路对 Array 原型链方法扩充时,会抛出这个异常. 修改方法: mui.poppicker.js 第 112 行 getSelectedItems() 方法中把 改为 几经排查发现别的同事写到公共文件中一段对原型扩充引起的.去掉就好了.  2:mui地址三级联动 html: <div class="clearfix"> <div class="pull-left"…

最近用vue写一个电商项目,自然就少不了要写一个购物车的相关页面,功能完整的购物车的checkbox应该是三级联动的,1级checkbox是选中购物车中所有的商品,2级checkbox是选中某个店铺下的所有商品,3级checkbox是选中单个商品,如下图: 那么,如何在vue中如何实现三级联动呢? 主要思路分为以下3步: 1.首先在购物车中的每条商品信息里(在data中定义shops>>products>>isSelected),包含一个isSelected的布尔值属性,表示单个商…

该栗子是我直接从公司的项目单独拉出来的(懒得重新写一次了),所以代码会有些冗余,下面直接看效果: 接着上代码: html: <template> <div> <div class="ysc-header"> <p class="header-title">{{headerTxt}}</p> </div> <div class="addAddress" @click=&q…

vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dialog.Message.Notification.ActionSheet.Toast.Popover.Popconfirm等众多功能于一身的轻量级pc弹层组件.通过精巧的逻辑.布局解决复杂的对话框功能,为你呈现多样化弹出框效果! VLayer 在设计开发之初借鉴了业界有名的Layer弹窗.Eleme…

我们前端做项目时,难免会遇到地址输入,多数情况下,我们都是提供一个省市三级联动,加上具体地址输入的Input输入框给用户,用以获取用户需要输入的真实地址.在需要对用户输入的数据进行校验的时候,我们会单独针对省市的三级联动和具体地址栏单独校验.也基本上能够完成项目需求. 然而当我们转向vue+element做项目时,会产生一个比较尴尬的问题.在element组件库当中,对需要校验的字段是通过在el-form-item这一组件标签名上添加prop属性来校验的,如果依然按照以前的方法对省市联动和地址栏…

使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="distpicker/distpicker.data.js" type="text/javascript" charset="utf-8&qu…

开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都是这样),果断用谷歌,搜出来的博文也清楚易懂,不过博文中bug出现还是很频繁,或者不完整,虎头蛇尾的,所以干脆自己来整合重新编写,现在发出来用来方便大家(博主不会装高深,简单直接把代码贴出,以供查阅)!! 效果图:                                   1.js实现年月…

产品老哥对项目再一次进行关爱, 新增页面, 新增需求, 很完美........ 不多说, 记录一下新增东西中的省市区联动选择, (这里全国地区信息是在本地, 但不建议这么做, 因为js文件太大.. 建议使用插件, 或者后台将地区信息返回前台) 先看一下效果图 全国地区信息js文件(链接打开另存为即可) https://files.cnblogs.com/files/yk95/data.js ;  page页面 (页面中-- margin-t, bgc-f, ...等等是项目中公共样式,  这里写…

三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下 首先页面显示如下: 然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景色未截取) 这个张什么样,以什么形式出现,取决于贵公司的UI需求,我们公司是做成弹出层了..然后背景色透明,这里为了节省流量,我只截取了一段,最后显示如下: 如果贵公司也跟我们需求一样,希望这个可以帮到你们.下面是在vu…

效果图 需要引入 大佬写的js 以及 css 源文件里面有大佬的地址 这是我存在gitee上的文件 https://gitee.com/depressiom/address-pickview-effect.git <div class="weui-cells" style="margin: 0px;line-height: 60px;"> <div class="weui-cell weui-cell_select weui-cell_s…

Vue+elementui实现省区市三级联动+详细地址的输入 详细需求,需要手动更改用户所在的地址. 安装依赖项 npm install element-china-area-data -S 在组建中使用 import {regionData,CodeToText} from 'element-china-area-data' 代码示例 <template> <el-form label-width="80px"> <el-form-item label=…

无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2:  地址薄选项,利用inputSelect的下接属性,装载地址列表. 3:地址薄页面与信息页面的下拉数据同步 一 效果演示: 二  设计思路: 三级联动用组件,把地址信息重新拼接,用下垃组件显示详细地址,用modelParamsReceive的实时性保证不同页面跳转后的数据同步 三  数据库设计: (注)三级联动,省,市,县,供组件绑…

最近好多天没有更新文章,是因为公司的项目忙的不行.今天有点时间,就突然想起在移动端项目中遇到三级联动的问题,网上查了很多资料,都是依赖各种插件,或者晦涩难于理解.于是,自己决定写一个出来. 当然,没有用到别的插件类库,也没有用ajax.写完这个小demo也学到不少,现在分享给大家代码.因为代码较多,我就不一个个解释了,源码里面添加了很多注释. 为了便于大家使用,我将html精简了许多. 结尾会有在线运行地址. 0 <!DOCTYPE html> 1 <html lang="en…

一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install mint-ui --save-dev 2.引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css'; Vue.use(MintUI); <template> <div> <mt-picker :slots=&q…

1.template里面的内容 2.js里面的内容 3.函数怎么写? 这是一个省市区的三级联动,首先你要传递中国的id,这样才能获取到所有的省份,所以在vue的项目中,我需要发一次进页面就请求(来得到所有省份的数据) 4.现在一级的数据已经获取到了,需要获取二三级的函数, 这样,就已经完成了一个vue的三级联动的效果…

在网上查阅一下,基本上是省市区三级联动,国家省市的就只能自己动手了. 样式就根据自己的需要去调整了. JSON数组太长,就折叠放在了后面. 效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .question-s…

vue项目中使用到三级联动,现在自己实现一个三级联动,仅供大家参考一下,直接上代码. <template> <section class="container"> <el-row> <el-select v-model="provinceValue" placeholder="请选择" @change="selectProvimce"> <el-option v-for=&…