vue 引用vant area组件

梨童就是小梨童呀

于 2019-04-25 11:02:39 发布

阅读量4k

点赞数

分类专栏： js 文章标签： vant

js 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍如何使用Vue和vant组件库实现省市区三级联动选择器。通过自定义cell、popup和area组件，结合监听change、confirm和cancel事件，实现用户在选择省市区时的数据动态更新。文章提供完整代码示例，帮助开发者快速掌握并应用到实际项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是改变值的时候写入

<template>
  <div class="app">
    confirm   点击右上方完成按钮   一个数组参数，具体格式看下方数据格式章节
    cancel    点击取消按钮时
    change    选项改变时触发 参考Picker 实例，所有列选中值，当前列对应的索引
    <van-cell-group>
      <!--cell+popup+area省市区的坑-->
      <van-cell v-model="carmodel" title="省/市/区" value="" @click="show = true"></van-cell>
      <van-popup v-model="show" position="bottom">
        <van-area
          ref="area"
          value="110000"
          :area-list="areaList"
          @change="onChange"
          @confirm="show = false"
          @cancel="show = false"
        />
      </van-popup>
    </van-cell-group>
  </div>
</template>
<script>

  import { Cell, CellGroup, Popup, Field,  Area, Picker } from 'vant'
  export default {
    components: {
      VanCell: Cell,
      VanCellGroup: CellGroup,
      VanPopup: Popup,
      VanField: Field,
      VanArea: Area,
      VanPicker: Picker
    },
    data () {
      return {
        show: false,
        carmodel: '',

        areaList: {
          province_list: {
            110000: '北京市',
            120000: '天津市'
          },
          city_list: {
            110100: '北京市',
            110200: '县',
            120100: '天津市',
            120200: '县'
          },
          county_list: {
            110101: '东城区',
            110102: '西城区',
            110105: '朝阳区',
            110106: '丰台区',
            120101: '和平区',
            120102: '河东区',
            120103: '河西区',
            120104: '南开区',
            120105: '河北区'
          }
        }
      }

    },
    methods: {
      onChange (picker, value, index) {
        console.log('当前值：' + value + '当前索引：' + index)
        console.log(value)
        let areaName = ''
        for (var i = 0; i < value.length; i++) {
          areaName = areaName + value[i].name + ' '
        }
        this.carmodel = areaName
      }
    }
  }
</script>

如果是想点击确认按钮写入值

<template>
  <div class="app">
    confirm   点击右上方完成按钮   一个数组参数，具体格式看下方数据格式章节
    cancel    点击取消按钮时
    change    选项改变时触发 参考Picker 实例，所有列选中值，当前列对应的索引
    <van-cell-group>
      <!--cell+popup+area省市区的坑-->
      <van-cell v-model="carmodel" title="省/市/区" value="" @click="show = true"></van-cell>
      <van-popup v-model="show" position="bottom">
        <van-area
          ref="area"
          value="110000"
          :area-list="areaList"
          @change="onChange"
          @confirm="show = false"
          @cancel="show = false"
        />
      </van-popup>
    </van-cell-group>
  </div>
</template>
<script>

  import { Cell, CellGroup, Popup, Field,  Area, Picker } from 'vant'
  export default {
    components: {
      VanCell: Cell,
      VanCellGroup: CellGroup,
      VanPopup: Popup,
      VanField: Field,
      VanArea: Area,
      VanPicker: Picker
    },
    data () {
      return {
        show: false,
        carmodel: '',

        areaList: {
          province_list: {
            110000: '北京市',
            120000: '天津市'
          },
          city_list: {
            110100: '北京市',
            110200: '县',
            120100: '天津市',
            120200: '县'
          },
          county_list: {
            110101: '东城区',
            110102: '西城区',
            110105: '朝阳区',
            110106: '丰台区',
            120101: '和平区',
            120102: '河东区',
            120103: '河西区',
            120104: '南开区',
            120105: '河北区'
          }
        }
      }

    },
    methods: {
      onChange (picker, value, index) {
        console.log('当前值：' + value + '当前索引：' + index)
        console.log(value)
        let areaName = ''
        for (var i = 0; i < picker.length; i++) {
          areaName = areaName + picker[i].name + ' '
        }
        this.carmodel = areaName
      }
    }
  }
</script>