当前位置：首页 > VUE

vue实现地址

2026-02-17 23:54:03VUE

Vue 实现地址功能

在 Vue 中实现地址功能通常涉及地址选择、地址管理和地址展示等模块。以下是常见的实现方法和步骤：

地址选择组件

使用第三方地址选择库如 v-distpicker 或手动实现省市区三级联动：

vue实现地址

<template>
  <v-distpicker :province="address.province" :city="address.city" :area="address.district" @province="onProvinceChange" @city="onCityChange" @area="onDistrictChange"></v-distpicker>
</template>

<script>
import VDistpicker from 'v-distpicker'
export default {
  components: { VDistpicker },
  data() {
    return {
      address: {
        province: '',
        city: '',
        district: ''
      }
    }
  },
  methods: {
    onProvinceChange(data) {
      this.address.province = data.value
    },
    onCityChange(data) {
      this.address.city = data.value
    },
    onDistrictChange(data) {
      this.address.district = data.value
    }
  }
}
</script>

地址表单实现

创建完整的地址表单，包含收件人、电话、详细地址等字段：

<template>
  <div class="address-form">
    <input v-model="form.name" placeholder="收件人姓名">
    <input v-model="form.phone" placeholder="联系电话">
    <v-distpicker v-model="form.region"></v-distpicker>
    <textarea v-model="form.detail" placeholder="详细地址"></textarea>
    <button @click="submit">保存地址</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        phone: '',
        region: {},
        detail: ''
      }
    }
  },
  methods: {
    submit() {
      // 提交地址逻辑
    }
  }
}
</script>

地址列表展示

实现地址列表展示和管理功能：

vue实现地址

<template>
  <div class="address-list">
    <div v-for="(item, index) in addresses" :key="index" class="address-item">
      <p>{{ item.name }} {{ item.phone }}</p>
      <p>{{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}</p>
      <button @click="setDefault(item.id)">设为默认</button>
      <button @click="editAddress(item)">编辑</button>
      <button @click="deleteAddress(item.id)">删除</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addresses: [
        {
          id: 1,
          name: '张三',
          phone: '13800138000',
          province: '广东省',
          city: '深圳市',
          district: '南山区',
          detail: '科技园路1号',
          isDefault: true
        }
      ]
    }
  },
  methods: {
    setDefault(id) {
      // 设置默认地址逻辑
    },
    editAddress(item) {
      // 编辑地址逻辑
    },
    deleteAddress(id) {
      // 删除地址逻辑
    }
  }
}
</script>

地址数据管理

使用 Vuex 管理地址状态：

// store/modules/address.js
const state = {
  addresses: [],
  defaultAddressId: null
}

const mutations = {
  SET_ADDRESSES(state, addresses) {
    state.addresses = addresses
  },
  SET_DEFAULT_ADDRESS(state, id) {
    state.defaultAddressId = id
  }
}

const actions = {
  fetchAddresses({ commit }) {
    // 获取地址列表
  },
  setDefaultAddress({ commit }, id) {
    commit('SET_DEFAULT_ADDRESS', id)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

地址搜索自动补全

集成地图API实现地址搜索自动补全功能：

<template>
  <div>
    <input v-model="searchText" @input="onSearchInput" placeholder="搜索地址">
    <ul v-if="suggestions.length">
      <li v-for="(item, index) in suggestions" :key="index" @click="selectSuggestion(item)">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      suggestions: []
    }
  },
  methods: {
    onSearchInput() {
      // 调用地图API获取建议地址
      if (this.searchText.length > 2) {
        // 示例：使用AMap API
        AMap.plugin('AMap.Autocomplete', () => {
          const autoComplete = new AMap.Autocomplete()
          autoComplete.search(this.searchText, (status, result) => {
            if (status === 'complete') {
              this.suggestions = result.tips
            }
          })
        })
      }
    },
    selectSuggestion(item) {
      this.searchText = item.title
      this.suggestions = []
    }
  }
}
</script>