中国省市区vue地区选择组件

import data from './data.js'

import $ from 'jquery'

export default {

  name: 'AreaSelect',

  model: {

    props: 'value',

    event: 'change'

  },

  props: {

    value: {

      type: String,

      default: function() {

        return ''

      }

    },

    level: {

      type: String,

      default: function() {

        return 'street'

      }

    }

  },

  data() {

    return {

      areas: data,

      innerLevel: 4,

      dropDown: {

        open: false

      },

      currentTab: 'province',

      province: {

        key: '',

        value: ''

      },

      city: {

        key: '',

        value: ''

      },

      district: {

        key: '',

        value: ''

      },

      street: {

        key: '',

        value: ''

      }

    }

  },

  computed: {

    selectedArea() {

      let [key, value] = ['', '']

      if (this.province.key !== '') {

        key += this.province.key

        value += this.province.value

      }

      console.log('province:', this.province.value)

      if (this.city.key !== '') {

        key += '/' + this.city.key

        value += '/' + this.city.value

      }

      console.log('city:', this.city.value)

      if (this.district.key !== '') {

        key += '/' + this.district.key

        value += '/' + this.district.value

      }

      console.log('district:', this.district.value)

      if (this.street.key !== '') {

        key += '/' + this.street.key

        value += '/' + this.street.value

      }

      console.log('street:', this.street.value)

      console.log('------------------------------------------------------')

      return { key, value }

    }

  },

  watch: {

    'selectedArea.value'(newVal, oldVal) {

      this.$emit('change', newVal)

    }

  },

  created() {

    this.innerLevel = this.calcInnerLevel(this.level)

    this.addBlurEvent()

  },

  methods: {

    openDropDown() {

      this.dropDown.open = true

    },

    calcInnerLevel(level) {

      if (level === 'province') return 1

      if (level === 'city') return 2

      if (level === 'district') return 3

      return 4

    },

    addBlurEvent() {

      $(document).click('click', (event) => {

        if (this.dropDown.open) {

          if ($(event.target).closest('#lwAreaSelect')[0] !== $('#lwAreaSelect')[0]) {

            this.$emit('blur')

            this.dropDown.open = false

          }

        }

      })

    },

    handleAreaSelect(key, value) {

      const targetElement = $(`[data-id=${key}]`)

      this.clearNextLevelData()

      if (targetElement.hasClass('selected')) {

        targetElement.removeClass('selected')

      } else {

        this.outputNextLevelData(key, value)

      }

    },

    outputNextLevelData(key, value) {

      this[this.currentTab] = { key, value }// 保存当前级别的地区信息即可遍历生成下一级别的数据

      if (this.currentTab !== this.level) {

        if (this.currentTab === 'province') {

          this.currentTab = 'city'

        } else if (this.currentTab === 'city') {

          this.currentTab = 'district'

        } else if (this.currentTab === 'district') {

          this.currentTab = 'street'

        }

      } else {

        this.$emit('blur')

        this.dropDown.open = false

      }

    },

    handleTabChange(tabName) {

      this.currentTab = tabName

    },

    clearNextLevelData() {

      if (this.currentTab === 'province') {

        this.province = { key: '', value: '' }

        this.city = { key: '', value: '' }

        this.district = { key: '', value: '' }

        this.street = { key: '', value: '' }

      } else if (this.currentTab === 'city') {

        this.city = { key: '', value: '' }

        this.district = { key: '', value: '' }

        this.street = { key: '', value: '' }

      } else {

        this.district = { key: '', value: '' }

        this.street = { key: '', value: '' }

      }

    }

  }

}.lw-area-select {

  position: relative;

  .lw-virtual-input {

    height: 40px;

    border: 1px solid #dcdfe6;

    border-radius: 4px;

  }

  .lw-area-dropdown {

    position: absolute;

    z-index: 2005;

    width: 100%;

    background-color: #fff;

    border: 1px solid #dcdfe6;

    font-size: 12px;

    .lw-area-tab {

      height: 40px;

      >span {

        display: inline-block;

        text-align: center;

        font-size: 14px;

        border-right: 1px solid #ccc;

        border-bottom: 1px solid #ccc;

        background-color: #f0f0f0;

        &:last-child {

          border-right: none;

        }

        &.active {

          background-color: #fff;

          border-bottom-color: #fff;

        }

      }

    }

    .lw-area-content {

      padding: 16px;

      .fn-clear {

        &.fn-clear-city,

        &.fn-clear-district,

        &.fn-clear-street {

          >dd {

            margin-left: 0;

          }

        }

        >dt {

          display: inline-block;

          width: 35px;

          position: absolute;

        }

        >dd {

          display: inline-block;

          >a {

            padding: 0 10px;

            height: 24px;

            display: inline-block;

            line-height: 24px;

            border-radius: 2px;

            &.selected {

              background-color: #f00;

              border-radius: 2px;

              color: #fff;

            }

          }

        }

      }

    }

  }

}