proginn-frontend/components/input/area.vue

<template>
  <div class="input-area">
    <el-select ref="select" v-model="code" @change="change" slot="prepend" placeholder="请选择">
      <div slot="prefix" class="code" @click="$refs.select.focus()">{{code}}</div>
      <el-option v-for="(area, index) of areas" :key="index" :label="area.name" :value="area.pre"></el-option>
    </el-select>
    <el-input v-model="mobile" @change="change" placeholder="请输入手机号"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      areas: [],
      code: '+86',
      mobile: '',
    }
  },
  computed: {
    fullMobile() {
      return `${this.code}-${this.mobile}`
    }
  },
  mounted() {
    this.getAreas()
  },
  methods: {
    async getAreas() {
      let res = await this.$axios.$post('/api/user/get_mobile_pre_arr')
      if(res) {
        this.areas = res.data.mobilePreArr
      }
    },
    change() {
      this.$emit('change', this.fullMobile)
    },
  }
}
</script>

<style scoped>
.input-area {
  position: relative;
  display: flex;
  align-items: center;
}
.el-select {
  width: 120px;
}
.code {
  position: absolute;
  top: 2px;
  left: 10px;
  width: 50px;
  line-height: 36px;
  background: white;
  cursor: pointer;
  text-align: center;
  color: #333;
}
</style>