realtorEasier-webSite/pc/src/components/common/phoneAddressSelect.vue

<template>
  <div class="phone-address">
    <div class="search-w">
      <input class="search-input" placeholder="搜索" type="text" v-model="keyword">
      <h-icon type="sousuo" class="sousuo-icon" />
    </div>
    <ul class="num-list">
      <li class="num-item" v-for="(item, index) in selectCall" :key="index" @click="selectPhone(item)">{{`${item[1]}(${item[0]})`}}</li>
    </ul>
  </div>
</template>

<script>
import selectCall from '@/util/country.js'
export default {
  data () {
    return {
      keyword: ''
    }
  },
  computed: {
    selectCall () {
      return selectCall.filter(item => `${item[1]}(${item[0]})`.indexOf(this.keyword) > -1)
    }
  },
  methods: {
    selectPhone (item) {
      this.$emit('select', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.phone-address {
  padding: 20px 20px 10px;
  border:1px solid rgba(144,144,144,1);
  border-radius: 3px;
  font-size: 14px;
  color: #202020;
  height: 224px;
  width: 240px;
  overflow: auto;
  position: absolute;
  background: #fff;
  left: 0;
  .search-w {
    position: relative;
  }
  .search-input {
    height: 26px;
    line-height: 24px;
    background:rgba(247,247,247,1);
    border:1px solid rgba(144,144,144,1);
    border-radius:3px;
    width: 100%;
    padding-right: 27px;
    &::placeholder {
      text-align: right;
    }
  }
  .sousuo-icon {
    position: absolute;
    right: 8px;
    top: 8px;
    line-height: 26px;
    color: #909090;
    display: inline;
  }
  li {
    cursor: pointer;
    border-bottom: 0.25px solid #707070;
    padding: 6px 0;
    line-height: 18px;
    color: #909090;
    &:hover {
      color: #202020;
    }
  }
}
</style>