精华内容
下载资源
问答
  • 中文 | vue-picker的组件,囊括了(普通选择、联动选择、中国地址选择)等等常见的picker,兼容PC、移动端,通过...VuePicker :data="pickData" :showToolbar="true" @cancel="cancel" @confirm="confirm" :vis
  • 本篇文章主要介绍了vue学习之mintui picker选择器实现省市二级联动示例,非常具有实用价值,需要的朋友可以参考下
  • 一个很好用的 vue-picker组件

    千次阅读 2020-12-22 14:31:30
    vue-pickervue-picker的组件,包括了(普通选择、联动选择、中国地址选择...)简单配置就可以出现一个强大的picker,感受下效果图。demoinstallnpm install vue-pickers --save使用普通网页开发直接复制lib/vue-picker...

    vue-picker

    vue-picker的组件,包括了(普通选择、联动选择、中国地址选择...)简单配置就可以出现一个强大的picker,感受下效果图。

    demo

    install

    npm install vue-pickers --save

    使用

    普通网页开发直接复制lib/vue-picker.js文件夹到项目即可直接使用

    @cancel="cancel"

    @confirm="confirm"

    :showToolbar="true"

    :maskClick="true"

    :visible.sync="pickerVisible"

    />

    import vuePickers from 'vue-pickers'

    export default {

    components: { vuePickers },

    data () {

    let tdata = []

    for (let i = 0; i < 20; i++) {

    tdata.push({

    label: `第${i}行`,

    value: i

    })

    }

    return {

    pickerVisible: false,

    pickData: [ tdata ],

    result: ''

    }

    },

    methods: {

    cancel () {

    console.log('cancel')

    this.result = 'click cancel result: null'

    },

    confirm (res) {

    this.result = JSON.stringify(res)

    console.log(res)

    }

    },

    }

    属性参数说明

    参数

    说明

    是否必须

    类型

    默认值

    visible

    显示/隐藏picker

    Boolean

    false

    data

    pickerData,多列[data1, data2]

    Array

    []

    layer

    联动显示列数

    Number

    0

    link

    是否开启联动数据

    Boolean

    false

    defaultIndex

    默认显示的index

    Number/[](多列用数组)

    cancelText

    取消按钮文字

    String

    '取消'

    confirmText

    去确认按钮文字

    String

    '确认'

    title

    picker标题

    String

    ''

    showToolbar

    显示头部

    Boolean

    false

    maskClick

    遮罩层是否可以点击关闭

    Boolean

    false

    itemHeight

    每一行的高度

    Number, String

    '44px'

    rowNumber

    显示多少行(建议单数)

    Number

    5

    事件说明

    参数

    说明

    是否必须

    类型

    默认值

    change

    数据变化事件

    function(val)

    cancel

    取消选择

    function

    confirm

    确认选择

    function(val)

    展开全文
  • 一开始看到van-picker的多列联动的例子时,脑子是懵逼的,我即将要用的数据不可能这么简单啊,这叫我咋用!然后一顿苦思冥想,再深读文档内极其稀少的信息,最后在多次尝试后,终于把结果试出来了。没错,真的是试...

    一开始看到van-picker的多列联动的例子时,脑子是懵逼的,我即将要用的数据不可能这么简单啊,这叫我咋用!

    然后一顿苦思冥想,再深读文档内极其稀少的信息,最后在多次尝试后,终于把结果试出来了。没错,真的是试出来的。

    心累。。。

    show-toolbar

    title="请选择小区名称"

    :columns="columns"

    value-key="name" //选项对象中,文字对应的 key

    @confirm="onConfirm"

    @cancel="onCancel"

    @change="onChange"

    />

    var citys = [

    {id:111,'name':'杭州'},

    {id:222,'name':'宁波'},

    {id:333,'name':'温州'},

    {id:444,'name':'嘉兴'},

    {id:555,'name':'湖州'},

    ];

    var country = {

    '杭州':[

    {id:111,'name':'国杭州'},

    {id:222,'name':'国宁波'},

    {id:333,'name':'国温州'},

    {id:444,'name':'国嘉兴'},

    {id:555,'name':'国湖州'},

    ],

    '宁波':[

    {id:111,'name':'中杭州'},

    {id:222,'name':'中宁波'},

    {id:333,'name':'中温州'},

    {id:444,'name':'中嘉兴'},

    {id:555,'name':'中湖州'},

    ]

    }

    export default {

    data() {

    return {

    columns:[

    {

    values: citys , //可以是数组,或者对象数组

    className: 'column1' //选择器的第一列

    },

    {

    values: country ['杭州'], //默认选中country对象中的第一项

    className: 'column2', //选择器的第二列

    }

    ],

    }

    },

    methods: {

    onChange(picker, values) {

    //在change 第一列的时候,动态更改第二列的数据

    //setColumnValues是vant自带的实例方法

    //第一个参数是列数,从0开始;第二个参数是第二列应该显示的数据

    picker.setColumnValues(1, country [values[0].name]);

    },

    onConfirm(value) {

    //将选中的文字和对应的id拿出来使用

    this.village_name = value[0].name + ',' + value[1].name;

    this.village_id = value[0].id;

    this.garage_id = value[1].id;

    },

    },

    }

    展开全文
  • Vue二级联动(滚动型)

    2019-11-22 13:39:56
    1.vue-multilevel-picker Vue 组件库 三级联动 *原文网址链接:(https://www.jianshu.com/p/9aa54a2a2540) *Github地址:(https://github.com/darkdragonblade/vue-multilevel-picker) (1)在Github...

    Vue二级联动(2)

      本文主要介绍vue二级联动的另一种形式。
    

    1.vue-multilevel-picker Vue 组件库 三级联动

    *原文网址链接:(https://www.jianshu.com/p/9aa54a2a2540)
    *Github地址:(https://github.com/darkdragonblade/vue-multilevel-picker)
    (1)在Github中下载程序压缩包
    (2)install
    npm install multilevel-picker
    import multilevel from ‘multilevel-picker’; (在main.js里添加 )
    Vue.use(multilevel) (在main.js里添加 )

    2.三级联动程序运行

    (1)三级联动原代码

    <template>
      <div class="home">
        <multilevel @done="done" @change="change" :data="data" :column="'3'"></multilevel>
      </div>
    </template>
    
    <script>
    import cityData from '../../../../city-data.json';
    import multilevel from 'multilevel-picker';
    export default {
      name: 'home',
      data () {
        return {
         data:''
        }   
      },
      mounted() {
        this.data = cityData
      },
      methods: {
        change(data){
        },
        done(data){ 
        }
      },
    }
    
    </script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    #div1{
      animation:mymove 2s infinite 
    }
    @keyframes mymove
    {
    from {margin-top:0px;}
    to {margin-top:200px;}
    }
    </style>
    
    

    (注:数据来源为city-data.json)

    (2)三级联动效果图
    在这里插入图片描述

    3.二级联动

    (1)Html部分代码:

    <div class="main-content" v-cloak>
    			<div class="home">
               <multilevel @done="done" @change="change" :data="data" :column="'2'"></multilevel>
    		  
    			<yd-button style="margin: 0rem;" bgcolor="#2F6CDD" color="#FFF" size="large" @click.native="show1 = true">筛选</yd-button>
    			<div class="mescroll">
    				<div style="margin-bottom: 0.1rem;">
    					<div v-for="(item,index) in btn" v-if="item!=''" style="width: 50%;padding:0rem 0.125rem;display: inline-block;">
    						<yd-button size="large" type="warning" @click.native="getdatalist2(index+1)">{{item}}</yd-button>
    					</div>
    				</div>
    				<div style="margin-top: 0.3rem;padding: 0.3125rem 0rem;background-color: white;">
    					<div id="myChart1" :style="{width: '100%', height: '350px'}"></div>
    				</div>
    				 </div>
    			</div>
    

    (2)新建一个data.json

    [
    	{
    		"name": "油封",
    		"code": "130000",
    		"children": [
    			{
    				"name": "油封一班",
    				"code": "130100"
    			},
    			{
    				"name": "油封二班",
    				"code": "130200"
    			}
    		]
    	},
    	{
    		"name": "总装",
    		"code": "130000",
    		"children": [
    			{
    				"name": "总装一班",
    				"code": "130100"
    			},
    			{
    				"name": "总装二班",
    				"code": "130200"
    			}
    		]
    	},
    	{
    		"name": "6DM缸盖",
    		"code": "130000",
    		"children": [
    			{
    				"name": "6DM缸盖一班",
    				"code": "130100"
    			},
    			{
    				"name": "6DM缸盖二班",
    				"code": "130200"
    			},
    			{
    				"name": "6DM缸盖三班",
    				"code": "130100"
    			},
    			{
    				"name": "6DM缸盖四班",
    				"code": "130100"
    			}
    		]
    	},
    	{
    		"name": "6DM缸体",
    		"code": "130000",
    		"children": [
    			{
    				"name": "6DM缸体一班",
    				"code": "130100"
    			},
    			{
    				"name": "6DM缸体二班",
    				"code": "130200"
    			},
    			{
    				"name": "6DM缸体三班",
    				"code": "130100"
    			},
    			{
    				"name": "6DM缸体四班",
    				"code": "130100"
    			}
    		]
    	},
    	{
    		"name": "校车",
    		"code": "130000",
    		"children": [
    			{
    				"name": "校车一班",
    				"code": "130100"
    			},
    			{
    				"name": "校车二班",
    				"code": "130200"
    			}
    		]
    	}
    
    
    ]
    

    (3)页面效果

    展开全文
  • 基于vue编写的移动端地址三级联动,直接导入组件,不依赖任何第三方组件或插件,需要用脚手架导入,因为是vue单页文件
  • vue实现省市区三级联动(V-Distpicker插件)发布时间:2018-07-05 15:56,浏览次数:3826, 标签:vueDistpicker本次项目中使用了V-Distpicker 插件实现了省市区三级联动* V-Distpicker 项目文档地址 * V-Distpicker ...

    vue中实现省市区三级联动(V-Distpicker插件)

    发布时间:2018-07-05 15:56,

    浏览次数:3826

    , 标签:

    vue

    Distpicker

    本次项目中使用了V-Distpicker 插件实现了省市区三级联动

    * V-Distpicker 项目文档地址

    * V-Distpicker git地址 使用方法 npm install v-

    distpicker --save import VDistpicker from 'v-distpicker' export default {

    components: { VDistpicker } } 实现思路

    原文档中的并不是input触发的 所以在触发div上绑定了点击事件,在插件组件上设置了 v-show

    来控制插件的显示,当触发插件的selected事件(当选择完后触发)来使插件的v-show为false隐藏,并把选中的值赋给div以此来显示,为了美观自己设置了一个遮罩层,自我感觉高大上了很多,哈哈哈

    html部分

    所在地区
    <

    div class="city" @click="toAddress">{{city}}

    div>

    v-distpicker>

    , addInp :false, mask:false //在methodes中定义方法 // 点击弹出三级联动 toAddress(){ this.mask

    =true; this.addInp = true; }, // 省市区三级联动 selected(data){ this.mask =false; this

    .addInp =false; this.city = data.province.value + ' ' + data.city.value +' ' +

    data.area.value }, 项目实现效果图

    ok 搞定!

    记录点滴,每天进步一点点

    展开全文
  • 本文介绍了vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动) 先去下载一个“省份、城市、区县、乡镇” 四级联动数据,然后 引入 import { Picker } from 'mint-ui'; //前提是npm install mint-ui...
  • vue3 使用vant-picker封装省市二级联动,设置默认值 怕什么真理无穷,进一步有进一步的欢喜呀,不得不承认的就是,兴趣和擅长是一个良性迭代的循环啊,你擅长某件事情,就会越喜欢它,越喜欢,就越愿意花时间,进而...
  • vue实现省市区三级联动地区选择

    千次阅读 2020-01-11 11:42:20
    实现步骤 1. npm i v-distpicker --s 2. <template> <div> <div class="choos" @click="choos" v-if="agentArea==''">选择</div> <div class="choos" @click="choos...
  • 移动端实现三级联动 mint-ui api传送门 官网链接 npm 安装 npm i mint-ui -S 引入 Mint UI 分两种形式: 一是完全引入,具体实现方式 在 main.js 写入以下代码: 重要:样式文件需要单独引入 import Vue from 'vue'...
  • 前言 在工作中遇到省市县三级联动的需求,传统的pc端大...这里使用mint--ui的Popup弹出框组件和picker选择器组件,无需请求服务端,通过遍历本地的json文件,实现本地输出三级地址,同时给每级地址绑定一个code,从...
  • picker选择器介绍:https://mint-ui.github.io/docs/#/zh-cn2/picker 代码如下: 头像
  • 我们在日常编码中经常会遇到省市区联动的需求,下面我就加大家怎么简单实现省市区的联动. 这里vue用的是vant的组件库 下面是代码演示: <template> <div class="current-area"> <div class="sub-title...
  • 1.关于MintUI中的picker的使用 首先是项目要求:做一个关于收货地址的增删改查页面,其中涉及区域选择,这里我们采用的MintUI的picker 先看项目效果图(添加) 只有点击确认,城市的值才会保存 推荐网址地址 ...
  • uniapp picker组件实现二级联动

    千次阅读 2020-12-22 09:33:19
    picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index" :range="array" range-key="title"> <view class="uni-input">{{title}}</view> </...
  • vue结合vant实现联动效果

    千次阅读 2019-08-20 15:15:44
    vant中提供的选择器结合弹出框来实现联动效果、 1:用到的组件:Picker、Popup 2:引入:在main.js也好、页面中也好全局也好,正确的引入;此处在main.js中按需引入; main.js import { Picker, } from 'vant'; Vue....
  • Vant picker 多级联动

    千次阅读 热门讨论 2019-12-04 17:33:00
    // 三级联动 去除没值的,比如只有两级 const result = compact(value); let str = ""; // 呈现页面显示 /xxx/xxx/xxx result.forEach(item => { str += "/" + item.text; }); this.station = str; this.showPicker...
  • 实现weui中的picker联动,效果图如下: 代码如下 <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=...
  • 新版后台,需要实现一个多级联动的筛选栏目,实现以下效果:(点击筛选按钮弹出下列选项框) 首先父组件调用子组件模块:通过变量expands赋值给子组件。 <Screen :expand="expands"></Screen> 子组件...
  • 最近用vue做一个公众号用到了mint-ui的picker,选择地区的三级联动,由于picker无法加载动态数据,经过各种百度,最后使用promise对象,将异步转换为同步。完美解决三级联动效果,文章借助于:...
  • Ant Vue表单控件的联动校验需求逻辑实现多说一句 需求 最近想在表单里面实现一个可以联动校验的日期选择框,但是查找了好多博客,没有发现符合的描述,大概是我的需求太简单了,大佬都不屑于记录,本文用于我自己的...
  • 用mint-ui中的picker组件封装的省市区插件(使用环境:vue-cli),demo下载地址:https://download.csdn.net/download/yanzyan/10516230 下载后,使用npm install命令生成node_modules文件夹,再使用npm run dev...
  • 本文实例为大家分享了vue实现移动端省市区选择的具体代码,供大家参考,具体内容如下效果:安装:npm install v-distpicker --save组件代码:所在地区{{city}}import VDistpicker from 'v-distpicker'export default...
  • 省市区三级联动插件 for vue
  • picker 多级联动picker展示的内容没有改变 (比如,2月是闰月,不应该有30日,31日) 初始这样赋值,picker展示内容不变 后来修改 展示正常,picker也正常修改了,具体原因不清楚,有知道的大佬,解下惑 第一次...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 699
精华内容 279
关键字:

vue实现picker联动

vue 订阅