xinkeaboard/xinkeaboard-promotion-portal/src/components/CountrySelct.vue

<template>
  <div class="country-select">
    <el-input
      v-model="productName"
      style="width: 240px"
      placeholder="第一步：输入你的产品名称，选择目标区域市场"
    />
    <span class="country-wrap">
      <el-dropdown ref="dropdown" trigger="contextmenu" popper-class="country-popper">
        <span class="country-wrap-item" @click="showCountryList" :title="countryInfo.name">
          <img :src="countryInfo.flag" />
        </span>
        <template #dropdown>
          <div class="custom-dropdown">
            <div class="custom-dropdown-filter">
              <el-input v-model="search" placeholder="Select Country">
                <template #prefix>
                  <el-icon class="el-input__icon"><search /></el-icon>
                </template>
              </el-input>
            </div>
            <div class="custom-dropdown-list">
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="item in countryList"
                  :key="item.code"
                  @click="() => selectCountry(item)"
                >
                  <img :src="item.flag" />
                  <span :class="{ 'country-name': true, active: countryInfo.code === item.code }">
                    {{ item.code }}
                    {{ '-' }}
                    {{ item.name }}
                  </span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </div>
          </div>
        </template>
      </el-dropdown>
    </span>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import countryData from '../assets/country.json';

import type { DropdownInstance } from 'element-plus';

interface countryItem {
  code: string;
  name: string;
  flag: any;
}

const images = import.meta.glob('@/assets/flags/4x3/*.svg', { eager: true, import: 'default' });
const step = ref<number>(1);
const productName = ref<string>('');
const search = ref<string>('');
const countryList: countryItem[] = countryData.map((item) => ({
  code: item.code.toUpperCase(),
  name: item.name,
  flag: images[`/src/assets/flags/4x3/${item.code}.svg`]
}));
const countryInfo = ref<countryItem>(countryList[0]);
const dropdown = ref<DropdownInstance>();

const selectCountry = (item: countryItem) => {
  countryInfo.value = item;
};

function showCountryList() {
  if (!dropdown.value) return;
  dropdown.value.handleOpen();
}
</script>

<style lang="scss">
.country-popper {
  .custom-dropdown {
    display: flex;
    flex-direction: column;
    width: 240px;
    height: 400px;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;

    &-filter {
      height: 48px;

      .el-input__wrapper {
        height: 45px;
      }
    }

    &-list {
      flex: 1;
      overflow: auto;
      height: 100%;

      .el-dropdown-menu__item {
        padding: 10px;
        font-weight: 400;

        .country-name {
          color: #282e30;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;

          &.active {
            color: #036eb8;
          }
        }
        img {
          width: 30px;
          margin: 0 6px;
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.country-select {
  display: flex;
  align-items: center;
  :deep(.el-input) {
    width: 25rem !important;
    height: 3rem !important;
  }

  :deep(.el-input__inner) {
    &::placeholder {
      font-size: 1rem !important;
    }
  }
}

.country-wrap {
  &-item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 5.75rem;
    height: 4.25rem;
    background-color: #ffffff;
    margin-left: 0.625rem;
    cursor: pointer;

    img {
      width: 4.5rem;
    }
  }
}
</style>