Vue组件之极简的地址选择器的实现

首先我们需要了解一下Vue组件的基本知识。

什么是Vue组件？

Vue 组件是可复用的 Vue 实例，拥有自己的视图和行为。在 Vue 中，组件是基本的代码复用单元，一个页面可以由多个小的组件组成，每个组件封装了自己的代码和模板，可以单独的进行开发、测试和维护。

Vue组件的基本结构

一个 Vue 组件通常由模板、样式和逻辑组成。模板是组件的显示部分，样式是组件的样式部分，逻辑是组件的操作部分。

一个简单的 Vue 组件的结构如下所示：

<!-- 模板 -->
<template>
  <div class="my-component">
    <!-- 组件的显示部分 -->
  </div>
</template>

<!-- 样式 -->
<style scoped>
  .my-component {
    /* 组件的样式部分 */
  }
</style>

<!-- 逻辑 -->
<script>
export default {
  name: 'MyComponent',
  /* 组件的操作部分 */
}
</script>

Vue组件之极简的地址选择器的实现

下面我们以一个极简的地址选择器为例，讲解一下如何实现一个 Vue 组件。

界面设计

我们需要一个输入框，一个展示选择结果的文本框，以及一个省市区三级联动选择框。

<template>
  <div class="address-picker">
    <input type="text" v-model="searchText" placeholder="请输入关键字">
    <div class="choose-result">
      <span v-for="item in chosenList">{{item}} / </span>
    </div>
    <div class="picker-wrapper">
      <div class="picker-item">
        <input type="radio" name="province" v-model="province" :value="item.name" v-for="item in provinceList" :key="item.name">
        <label v-for="item in provinceList" :for="'pro-'+item.id">{{item.name}}</label>
      </div>
      <div class="picker-item">
        <input type="radio" name="city" v-model="city" :value="item.name" v-for="item in filteredCityList" :key="item.name">
        <label v-for="item in filteredCityList" :for="'city-'+item.id">{{item.name}}</label>
      </div>
      <div class="picker-item">
        <input type="radio" name="district" v-model="district" :value="item.name" v-for="item in filteredDistrictList" :key="item.name">
        <label v-for="item in filteredDistrictList" :for="'dis-'+item.id">{{item.name}}</label>
      </div>
    </div>
  </div>
</template>

数据处理

我们需要从服务器获取省市区数据，并且在用户输入关键字时，根据输入的内容来实时过滤数据。

<script>
export default {
  name: 'AddressPicker',
  data () {
    return {
      provinceList: [],
      cityList: [],
      districtList: [],
      province: '',
      city: '',
      district: '',
      searchText: ''
    }
  },
  computed: {
    chosenList () {
      const result = []
      if (this.province) {
        result.push(this.province)
      }
      if (this.city) {
        result.push(this.city)
      }
      if (this.district) {
        result.push(this.district)
      }
      return result
    },
    filteredCityList () {
      if (!this.province) {
        return []
      }
      return this.cityList.filter((item) => {
        return item.province === this.province
      })
    },
    filteredDistrictList () {
      if (!this.city) {
        return []
      }
      return this.districtList.filter((item) => {
        return item.city === this.city
      })
    }
  },
  mounted () {
    this.loadProvinceList()
  },
  methods: {
    loadProvinceList () {
      // 发送请求获取省份列表
      axios.get('/api/province')
        .then(({data}) => {
          this.provinceList = data
        })
    },
    loadCityList (province) {
      // 发送请求获取市列表
      axios.get(`/api/city?province=${province}`)
        .then(({data}) => {
          this.cityList = data
          this.city = ''
        })
    },
    loadDistrictList (city) {
      // 发送请求获取区县列表
      axios.get(`/api/district?city=${city}`)
        .then(({data}) => {
          this.districtList = data
          this.district = ''
        })
    }
  },
  watch: {
    province (newVal, oldVal) {
      if (newVal) {
        this.loadCityList(newVal)
      }
    },
    city (newVal, oldVal) {
      if (newVal) {
        this.loadDistrictList(newVal)
      }
    },
    searchText (newVal, oldVal) {
      // 进行关键字匹配
      // ...
    }
  }
}
</script>

使用组件

最后，在页面上使用该组件即可：

<template>
  <div>
    <p>请选择地址：</p>
    <address-picker></address-picker>
  </div>
</template>

<script>
import AddressPicker from './components/AddressPicker.vue'

export default {
  name: 'App',
  components: {
    AddressPicker
  }
}
</script>

示例说明

1. 示例一：搜索关键字

用户输入关键字时，我们需要根据关键字来对省市区数据进行过滤。代码实现请参考上面的 watch 属性中的 searchText 方法。

1. 示例二：三级联动

当用户选择一个省份时，我们需要根据省份来获取城市列表，并且让用户选择一个城市；当用户选择一个城市时，我们需要根据城市来获取区县列表，并且让用户选择一个区县。代码实现请参考上面的 methods 和 watch 属性中的相关方法。