# AreaSelect 地址

<template>
  <div class="address-demo">
    <h3-area-select
      v-model="pct"
      :visible="visible"
      :format="format"
      :source="source"
      @change="onChange"
      @toggle="onToggle"
    />
    <p style="margin:10px">您选择的是：{{pct}}</p>
  </div>
</template>
<script>
export default {
  created() {
    this.source = () => axios.get('https://static-test.cdn.h3yun.com/lib/v1/pct.min.json');
  },
  mounted () {
    this.pct = [ { "id": "440000", "name": "广东省", "level": "province" }, { "id": "440300", "name": "深圳市", "level": "city"}, { "id": "440305", "name": "南山区", "level": "district" } ];
    console.log('this: ', this);
  },
  data() {
    return {
      visible: false,
      pct: [],
      source: () => [],
      format: 'P-C-T',
    };
  },
  methods: {
    onChange(val) {
      console.log('pct onChange', val);
    }
    onToggle(val) {
      this.visible = val;
    }
  },
};
</script>

<template>
  <div class="address-demo">
    <h3-area-select
      v-model="pct"
      :format="format"
      :source="source"
      @change="onChange"
    />
    <p style="margin:10px">您选择的是：{{pct}}</p>
  </div>
</template>
<script>
export default {
  created() {
    this.source = () => axios.get('https://static-test.cdn.h3yun.com/lib/v1/pct.min.json');
  },
  data() {
    return {
      pct: [],
      source: () => [],
      format: 'P-C',
    };
  },
  methods: {
    onChange(val) {
      console.log('pct onChange', val);
    }
  },
};
</script>

<template>
  <div class="address-demo">
    <h3-area-select
      v-model="pct"
      :format="format"
      :source="source"
      @change="onChange"
    />
    <p style="margin:10px">您选择的是：{{pct}}</p>
  </div>
</template>
<script>
export default {
  created() {
    this.source = () => axios.get('https://static-test.cdn.h3yun.com/lib/v1/pct.min.json');
  },
  data() {
    return {
      pct: [],
      source: () => [],
      format: 'P',
    };
  },
  methods: {
    onChange(val) {
      console.log('pct onChange', val);
    }
  },
};
</script>

<template>
  <div class="address-demo">
    <h3-area-select
      v-model="pct"
      :format="format"
      :source="source"
      @change="onChange"
      :isScoped="true"
    />
    <p style="margin:10px">您选择的是：{{pct}}</p>
  </div>
</template>
<script>
export default {
  created() {
    this.source = () => axios.get('https://static-test.cdn.h3yun.com/lib/v1/pct.min.json');
  },
  mounted () {
    this.pct = [ { "id": "110000", "name": "北京市", "center": "116.405285,39.904989", "level": "province", "adcode": "110000" } ];
  },
  data() {
    return {
      showModel: false,
      pct: [],
      source: () => [],
      format: 'P-C-T',
    };
  },
  methods: {
    onChange(val) {
      console.log('pct onChange', val);
    }
  },
};
</script>