vue+vant 移动端国际区号组件封装

1.组件

<template>
  <div>
    <van-nav-bar title="Select Country/Region" left-arrow @click-left="onClickLeft"/>
    <van-search v-model="countryName" placeholder="请输入搜索关键词" />
    <van-index-bar>
       <!--循环数据展示-->
      <div v-for="(list, key) of ListDatas" :key="key">
        <van-index-anchor :index="key" />
        <div v-for="item of list" :key="item.name">
          <van-cell
            :title="item.name"
            @click.stop="handleItemClick(item)"
          ></van-cell>
        </div>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import dataList from "../assets/data.json";
import {
  Field,
  Dialog,
  IndexBar,
  IndexAnchor,
  Cell,
  Search,
  NavBar
} from "vant";
export default {
  name: "index",
  props: {
    /*
     * @description 国际区号
     * */
    countryCode: {
      type: String,
      default: '86',
    },
    //点击后隐藏属性
    shows:{
      type:Boolean,
    }
  },
  components: {
    [Field.name]: Field,
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor,
    [Cell.name]: Cell,
    [Search.name]: Search,
     [NavBar.name]: NavBar,
  },
  data() {
    return {
      FirstPin: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        'I',
        "J",
        "K",
        "L",
        "M",
        "N",
        'O',
        "P",
        "Q",
        "R",
        "S",
        "T",
        'U',
        'V',
        "W",
        "X",
        "Y",
        "Z",
      ],
      //数据对象
      ListData: {},
      //搜索名称
      countryName: "",
      //选中显示
      code: "",
    };
  },
  methods: {
    //头部返回事件
    onClickLeft(){
      this.$emit("update:shows", false);
    },
    //点击事件
    handleItemClick(obj) {
      this.code = obj.code;
      let code =obj.code.substring(2)
      // 更改父组件的值
      this.$emit("update:countryCode", code);
      this.$emit("update:shows", false);
  
    },
  },
  computed: {
    //计算属性模糊搜索
    ListDatas() {
      if (this.countryName) {
        let newArr = {};
        this.FirstPin.forEach((item) => {
            console.log('item',item)
          if (this.ListData[item]) {
            this.ListData[item].forEach((list) => {
                console.log('list',list)
              if (list.name.indexOf(this.countryName) != -1) {
                let a = list.name.charAt(0);
                 console.log('a',a)
                if (newArr[a]) {
                  newArr[a].push(list);
                } else {
                  newArr[a] = [];
                  newArr[a].push(list);
                }
              }
            });
          }
        });
        return newArr;
      } else {
        return this.ListData;
      }
    },
  },
  mounted() {},
  created() {
    //初始化数据
    this.ListData = dataList;
  },
};
</script>

<style scoped lang="less">
/deep/.van-index-bar__index {
  padding: 0 2.133vw 0 4.267vw;
  font-weight: 500;
  font-size: 2.667vw;
  line-height: 5.733vw;
}
/deep/ .van-index-anchor {
  text-align: center;
  z-index: 1;
  box-sizing: border-box;
  padding: 0 4.267vw;
  color: #323233;
  font-weight: 500;
  font-size: 3.733vw;
  line-height: 8.533vw;
  background-color: #f0f6fb;
}
/deep/ .van-cell {
  border-bottom: 1px solid #fafafa;
}
/deep/.van-search {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box;
    padding: 2.667vw 7.2vw;
    background-color: #fff;
}
</style>

2.使用组件代码

//点击cion图片 
<input maxlength="11"  class="numbercode"  type="text" v-model="areaCode" placeholder="">
 <i @click="areaCodeShow=true" style="margin-left: 10px;" class="iconfont iconxiangxia"</i>

//显示国际区号组件
   <!--区号弹出框-->
   //areaCode 组件选中的区号值  areaCodeShow 组件选中后隐藏值
    <van-popup v-model="areaCodeShow" style="width:100%">
      <code-select  :countryCode.sync="areaCode" :shows.sync="areaCodeShow"></code-select>
    </van-popup>

效果图

3数据格式