@south-rd/smarthub-areas-element v1.0.3

smart-file

本地项目初始化

yarn install

查看例子

yarn dev

组件打包

yarn run lib

基于 elementui，使用响应式处理元素 PC、手机样式

本地开发调试

本地项目 执行组件打包命令

yarn run lib

开启文件链接

yarn link

本地项目环境安装本组件

项目链接引用

yarn link @south-rd/smarthub-areas-element

引入组件

import smarthubareasElement from '@south-rd/smarthub-areas-element'
import '@south-rd/smarthub-area-element/lib/smarthub-areas-element.css'
Vue.use(smarthubareasElement)

使用组件

组件名称

<smarthubareasElement @kidChange="checkEditBills"></smarthubareasElement>

子组件参数

<template>
  <div class="smarthub-areas-element">
    <el-select
      v-model="province"
      placeholder="省"
      class="elSelect"
      @change="
        (id) => {
          getCity(id, 2, true);
        }
      "
    >
      <el-option
        :label="v.fullname"
        :value="v.id"
        v-for="(v, k) in provinceList"
        :key="k"
      />
    </el-select>
    <!-- 市 -->
    <el-select
      v-model="city"
      placeholder="市"
      class="elSelect"
      @change="
        (id) => {
          getCity(id, 3);
        }
      "
    >
      <el-option :label="v.fullname" :value="v.id" v-for="(v, k) in cityList" :key="k" />
    </el-select>
    <!-- 区 -->
    <el-select v-model="area" placeholder="区" class="elSelect"
    @change="
        (id) => {
          getCity(id, 4);
        }
      ">
      <el-option :label="v.fullname" :value="v.id" v-for="(v, k) in areaList" :key="k" />
    </el-select>
  </div>
</template>

<script>
export default {
  name: "smarthubareasElement", // 注意这个name是必须的，定义对外组件的名称
  mixins: [],
  components: {},

  data() {
    return {
      province: "",
      city: "",
      area: "",
      provinceList: [],
      cityList: [],
      areaList: [],
    };
  },

  computed: {},
  mounted() {
    this.getCity("", 1);
  },

  methods: {
   async getCity(id,type,resetPro) {
        // console.log(id, type, 111);
      let param = {
        key: "5LUBZ-BKJCU-WWOV4-BVSWK-JWCIH-GGF35",
        output: "jsonp",
      };
      if (resetPro) {
        this.city = "";
        this.area = "";
      }
      if (id) {
        param.id = id;
      }
      let res = await this.$jsonp(
        `https://apis.map.qq.com/ws/district/v1/getchildren`,
        param
      );
      if (!id && type === 1) {
        this.provinceList = res.result[0];
      }
      if (id && type === 2) {
        this.cityList = res.result[0];
      }
      if (id && type === 3) {
        this.areaList = res.result[0];
      }
      console.log(res, "tag");
      //   console.log(res);
      this.$emit("kidChange", {id:id,type:type,resetPro:resetPro});

    },
  },
};
</script>

父组件参数

<template>
  <div id="app">
    <smarthubareasElement @kidChange="checkEditBills"></smarthubareasElement>
  </div>
</template>

<script>
import smarthubareasElement from '../packages/smarthubareasElement/smarthubareasElement.vue'
export default {
   components: {
    smarthubareasElement
  },
  name: "App",
  data() {
    return {
      selectProvince: "",
      selectCity: "",
      selectArea: "",
    };
  },
  methods: {
    checkEditBills(data) {
      // console.log(data, 55555555555555);
      if (data.type == 2) {
        this.selectProvince = data.id;
        // console.log(this.selectp, "bbbbbbbbbbbb");
      }
      if (data.type == 3) {
        this.selectCity = data.id;
        // console.log(this.selectc, "cccccccc");
      }
      if (data.type == 4) {
        this.selectArea = data.id;
        // console.log(this.selecta, "ffffffff");
      }
    },
  },
};
</script>

<style lang="less">
@import url("./css/normal.css");
</style>