收货地址之Vue地区联动插件vue-area-linkage

最近项目中需要编辑“收货地址”，上网搜索发现了Vue的一款地区联动插件：vue-area-linkage，结合项目记录插件使用过程：

该插件基于Element UI，所以必须安装Element UI。

1、安装：npm i element-ui vue-area-linkage area-data

2、使用：

main.js中依赖注入：

import ElementUI from 'element-ui';//饿了么UI
import 'element-ui/lib/theme-chalk/index.css';//可以不引入，自己写样式
import VueAreaLinkage from 'vue-area-linkage';//省市区三级联动选择器

Vue.use(ElementUI);
Vue.use(VueAreaLinkage)

在使用插件的vue组件template标签中使用area-select标签

<div class="area">
  <area-select type="text" :placeholders=['选择省','选择市','选择区'] :level="2" v-model="selected" ></area-select>
</div>

在对应vue文件的script标签中设置默认选项，如下图所示：

<script>
  // 根据需要按需引入数据
  import { pca, pcaa } from "area-data";
  export default {
    data() {
      return {
        pcaa: pcaa,//最多省市区三级，结合:level='2'选择，0省、1省市、2省市区
     placeholders: ['选择省','选择市','选择区'],
        selected: [],
      }
    }
  }
</script>

注意：该插件有多种联动效果，级数由level控制，分别为：0省，1省市，2省市区联动。其他参数点击查看。

此时效果已经基本实现，也可以自定义样式。

1）当引入index.css样式时，在app.vue组件中写一个对应类名的样式覆盖之前的样式代码，注意此样式必须为公共样式，所以style标签中不加scoped。

2）当不引入index.css，完全自定义样式时，可以根据组件需要写到对应组件私有的style标签中，必须加scoped。

参考资料：

1、https://www.npmjs.com/package/vue-area-linkage

2、https://dwqs.github.io/vue-area-linkage/

收货地址之Vue地区联动插件vue-area-linkage

猜你喜欢