dev/dcp-web-gate/src_old/components/GlobalRoaming.vue

<template>
  <el-input
    :placeholder="$i18n.locale=='en'?'Please enter cellphone number.': '请输入手机号码'"
    class="input-with-select login2_item dcp_input"
    style="width:100%"
    maxlength="11"
    show-word-limit
    @input="inputTel"
    v-model="tel"
    oninput="value=value.replace(/[^0-9.]/g,'')"
  >
    <el-select v-model="select" slot="prepend" placeholder=""  @change="countryChange">
      <div :style="{width: size.width, padding: '0 20px', 'box-sizing': 'border-box'}">
        <el-input
            :placeholder="$i18n.locale=='en'?'Search your country and area': '搜索您的国家和地区'"
            suffix-icon="el-icon-search"
            v-model="searchVal"
            maxlength="20"
            show-word-limit
            @input="inputSearch"
          ></el-input>
        <div style="padding-top: 10px; font-size: 14px; overflow: hidden">
          <span
            style="float: left; margin-right: 10px;"
            :class="getSearchs=='常用国家/地区'?'getSearchs2 cursor':'getSearchs1 cursor' "
            @click="commonAreas"
            v-show="!isInputSearch"
          >{{$i18n.locale=='en'?'The Commonly Used': '常用国家/地区'}}</span>
          <span
            style="float: left;margin-right: 10px;"
            v-for="item in countrySearchs"
            :key="item"
            :class="item==getSearchs?'getSearchs2 cursor':'getSearchs1 cursor' "
            @click="getCountrySearchs(item)"
          >{{item}}</span>
        </div>
        <div class="scroll-view">
            <el-option value="空选项" disabled style="height: 0px"></el-option>
            <el-option
            :label="$i18n.locale == 'en'? computedLabel(item.enValue, item.id, 9): computedLabel(item.cnValue, item.id, 5)"
            :value="item.id"
            v-for="item in countrys"
            :key="item.pinyin"
            >
            <span style="float: left; margin-right: 10px">
                <img
                v-if="showFlag"
                style="margin-top: 11px"
                :src="require('@/assets/img/nationalflag/'+item.pinyin+'_'+item.id+'.png')"
                width="19"
                height="12"
                alt
                />
            </span>
            <span style="float: left;">{{ $i18n.locale == 'en'? item.enValue: item.cnValue }}</span>
            <span style="float: right;">{{ item.id }}</span>
            </el-option>
            <div
            v-show="countryEmpty"
            style="color: #606266; font-size: 14px; line-height: 24px"
            >{{$i18n.locale=='en'?'No matching country or region was found': '未找到匹配的国家或地区'}}</div>
        </div>
      </div>
    </el-select>
  </el-input>
</template>

<script>
import country from "@/assets/js/counytryCode.js";
export default {
  props: {
    size: {
      type: Object
    },
    language: {
      type: String,
      default: 'zh'
    },
    showFlag: {
      type: Boolean,
      default: true,
    },
    code: {
      type: String,
      default: '',
    },
    mobile: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tel: '',
      searchVal: '',
      select: "0086",
      isInputSearch: false, //是否是输入搜索
      getSearchs: "",
      countrys: [],
      countrySearchs: [],
      countryEmpty: false, // 是否没有匹配项
    };
  },
  watch: {
    code(val){
      this.select = val;
    },
    mobile(val){
      this.tel = val
    }
  },
  mounted() {
    this.commonAreas();
    this.countrySearchs = this.getLetters(country);
    this.$emit('getAreaCode', this.select)
  },
  methods: {
    computedLabel(value, id, n){
      return value.length>n? value.slice(0, n-1)+'... '+id: value+' '+id
    },
      inputTel(value){
          this.$emit('input', value)
      },
    // 输入框搜索国家地区
    inputSearch(value) {
      if (value.length) {
        this.isInputSearch = true;
        let reg = new RegExp(value, "i");
        if (this.$i18n.locale == "zh") {
          this.searchScope = country.filter((item, i) => {
            return reg.test(item.pinyin) || reg.test(item.cnValue);
          });
        } else {
          this.searchScope = country.filter((item, i) => {
            return reg.test(item.enValue);
          });
        }
        this.countrySearchs = this.getLetters(this.searchScope);
        if (this.searchScope.length) {
          this.countryEmpty = false;
        } else {
          this.countryEmpty = true;
        }
        this.countrys = this.searchScope;
        this.getCountrySearchs(this.countrySearchs[0]);
      } else {
        this.isInputSearch = false;
        this.commonAreas();
        this.countrySearchs = this.getLetters(country);
      }
    },
    // 点击字母搜索国家地区
    getCountrySearchs(letter) {
      this.getSearchs = letter;
      let searchScope = this.isInputSearch ? this.searchScope : country;
      let reg = new RegExp("^" + letter, "i");
      if (this.$i18n.locale == "zh") {
        this.countrys = searchScope.filter((item, i) => {
          return reg.test(item.pinyin);
        });
      } else {
        this.countrys = searchScope.filter((item, i) => {
          return reg.test(item.enValue);
        });
      }
    },
    // 点击常用国家/地区
    commonAreas() {
      this.getSearchs = "常用国家/地区";
      this.countrys = country.slice(0, 10);
    },
    // 获取索引字母
    getLetters(region) {
      let arr = [];
      if (this.$i18n.locale == "zh") {
        region.forEach((item, i) => {
          let initial = item.pinyin.slice(0, 1).toUpperCase();
          if (!arr.includes(initial)) {
            arr.push(initial);
          }
        });
      } else {
        region.forEach((item, i) => {
          let initial = item.enValue.slice(0, 1);
          if (!arr.includes(initial)) {
            arr.push(initial);
          }
        });
      }
      return arr.sort();
    },
    // 搜索地区发生变化
    countryChange(item) {
      console.log(item);
      this.$emit('getAreaCode', item)
    },
  },
};
</script>

<style scoped>
.scroll-view{
    width: 100%;
    height: 150px;
    overflow-x: hidden;
}
.scroll-view::-webkit-scrollbar{
    display: none;
}
.getSearchs1 {
  color: #0c27ff;
}
.getSearchs2 {
  color: #d12910;
}
.dcp_input /deep/ .el-select-dropdown__item{
    padding: 0;
}

</style>