vue实现行政区划好用的插件之v-region

一.安装插件

使用npm把插件安装到项目中

npm i -S v-region

在项目入口main.js中引入插件

import Vue from 'vue'
import Region from 'v-region'
Vue.use(Region)

自定义全局注册组件

import Vue from 'vue'
import { RegionSelects } from 'v-region'
Vue.component('v-region-selects', RegionSelects)

二.在页面 / 模块中使用

使用全局注册的组件

<template>
  <v-region-selects @change="regionChange" />
</template>
 
<script>
export default {
  methods: {
    // Responding to data changes
    regionChange (data) {
      console.log(data)
    }
  }
}
</script>

使用本地注册的组件

<template>
  <region-selects @change="regionChange" />
</template>
 
<script>
import { RegionSelects } from 'v-region'
 
export default {
  components: {
    RegionSelects
  },
  methods: {
    // Responding to data changes
    regionChange (data) {
      console.log(data)
    }
  }
}
</script>

Selects 常规表单下拉元素模式

<region-selects
  :city="false"
  :area="false"
  v-model="region"
/>
 
<script>
import { RegionSelects } from 'v-region'
 
export default {
  components: {
    RegionSelects
  },
  data () {
    return {
      region: {}
    }
  }
}
</script>

更多样式配置代码可以查看官网api

https://terryz.gitee.io/vue/#/region/demo