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数据格式
