@south-rd/smarthub-areas-vant

smart-file

本地项目初始化

yarn install

查看例子

yarn dev

组件打包

yarn run lib

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

本地开发调试

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

yarn run lib

开启文件链接

yarn link

本地项目环境安装本组件

项目链接引用

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

引入组件

import smarthubareasVant from '@south-rd/smarthub-areas-vant'
import '@south-rd/smarthub-areas-vant/lib/smarthub-areas-vant.css'
Vue.use(smarthubareasVant)

使用组件

组件名称

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

子组件参数

<template>
  <div class="smarthub-areas-vant">
    <div class="label-content">
      <Field
        input-align="right"
        readonly
        clickable
        value
        placeholder="点击选择省市区"
        @click="showArea = true"
        label-width="60"
      >
        <span slot="label" > 省市区 </span>
        <template v-if="form.area.length > 0" slot="input">
          <div class="citydiv" v-for="v in cityvalue" :key="v.code">{{ v.name }}</div>
        </template>
      </Field>
      <Popup v-model="showArea" position="bottom">
        <Area
          :columns-num="3"
          :area-list="areaList"
          @confirm="oncityConfirm"
          @cancel="showArea = false"
        />
      </Popup>
    </div>
  </div>
</template>
<script>
import { Field,Popup,Area } from 'vant';
// @ is an alias to /src
import areaList from "../../examples/area";
import cityArr from "../../examples/cityArr";
export default {
  name: "smarthubareasVant", // 注意这个name是必须的，定义对外组件的名称
   components: {
    Field,Popup,Area
  },
  data() {
    return {
      cityvalue: [],
      showArea: false,
      form: {
        area: [],
      },
      areaList,
    };
  },
  created() {
  },
  methods: {
    showDetail() {
      this.showFlag = true;
    },
    oncityConfirm(values) {
      // console.log(values, 1998);
      this.cityvalue = values;
      this.form.area = [];
      this.cityvalue.map((v, k) => {
        if (k == 0) {
          return this.form.area.push(
            cityArr.province.filter((e) => {
              return e[1] == v.name;
            })[0][0]
          );
        } else if (k == 1) {
          return this.form.area.push(
            cityArr.city.filter((e) => {
              return e[1] == v.name;
            })[0][0]
          );
        }
      });
      this.showArea = false;
       this.$emit("kidChange", {values:values});
    },
  },
};
</script>
<style lang="less">
body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.smarthub-areas-vant {
  width: 100%;
  display: block;
  background-size: cover;
}
.label-content {
  padding: 10px;
  .van-cell {
    font-size: 13px;
    line-height: 25px;
    background-color: #fff;
    border-bottom: 1px solid lightgray;
    padding: 5px 0;
    .van-field__label {
      font-weight: bold;
      text-align: left;
    }
    .van-field__control {
      text-align: right !important;
      font-size: 13px;
    }
  }
}
.border-bottom {
  border-bottom:1px solid lightgray;
}
.van-popup--center {
  top: 65%;
}
</style>

父组件参数

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

<script>
import smarthubareasVant from "../packages/smarthubareasVant/smarthubareasVant.vue";
export default {
  components: {
    smarthubareasVant,
  },
  name: "App",
  data() {
    return {
      selectProvince: "",
      selectCity: "",
      selectArea: "",
    };
  },
  methods: {
    checkEditBills(data) {
      // console.log(data, 555555555555555);
      this.selectProvince = data.values[0].name;
      this.selectCity = data.values[1].name;
      this.selectArea = data.values[2].name;
    },
  },
};
</script>
<style lang="less">
@import url("./css/normal.css");
</style>