<template>
|
<div class="intl-tel-input allow-dropdown w-full mt-1.5" @click="hideSubMenu = !hideSubMenu">
|
<div class="flag-container w-full">
|
<div class="selected-flag" style="width: 100%" :title="currentData.name + ': +' + currentData.dialCode"
|
>
|
<div :class="'iti-flag ' + currentData.code"></div>
|
<div class="flex items-center h-full ml-20 text-base text_color">{{ currentCountry }}</div>
|
</div>
|
<ul class="country-list" v-show="!hideSubMenu">
|
<li v-for="item in frontCountriesArray" :key="item.id"
|
:class="'country ' + (item.code == currentCode ? 'highlight' : '')"
|
@click.stop="handleClick(item)">
|
<div class="flag-box">
|
<div :class="'iti-flag ' + item.code"></div>
|
</div>
|
<span class="country-name">{{ item.name }}</span>
|
<span class="dial-code">+{{ item.dialCode }}</span>
|
</li>
|
<!-- <li class="divider"></li>-->
|
<li class="van-hairline--bottom" v-for="item in countriesArray" :key="item.id"
|
:class="'country ' + (item.code == currentCode ? 'highlight' : '')"
|
@click.stop="handleClick(item)">
|
<div class="flag-box">
|
<div :class="'iti-flag ' + item.code"></div>
|
</div>
|
<span class="country-name">{{ item.name }}</span>
|
<span class="dial-code">+{{ item.dialCode }}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
|
<script>
|
import countries from './countryList'
|
|
export default {
|
props: {
|
toFront: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
countryCode: {
|
type: String,
|
default: Object.keys(countries)[0],
|
validator(code) {
|
var clearCode = String(code).toLowerCase()
|
return !!countries[clearCode]
|
}
|
}
|
},
|
|
data() {
|
console.log()
|
return {
|
currentCode: this.countryCode,
|
hideSubMenu: true,
|
}
|
},
|
|
computed: {
|
currentData() {
|
return countries[this.currentCode]
|
},
|
frontCountriesArray() {
|
const toFrontCodes = {}
|
this.toFront.forEach((code) => {
|
const stringCode = String(code)
|
const needObj = countries[stringCode]
|
|
if (needObj) {
|
toFrontCodes[stringCode] = needObj
|
}
|
})
|
return toFrontCodes
|
},
|
countriesArray() {
|
const countryCopie = {...countries}
|
this.toFront.forEach((code) => {
|
delete countryCopie[code]
|
})
|
return countryCopie
|
},
|
currentCountry() {
|
return countries[this.currentCode].name.split(' (')[0]
|
}
|
},
|
|
watch: {
|
countryCode(newCode) {
|
this.setCountry(countries[newCode])
|
},
|
},
|
|
methods: {
|
setCountry(item) {
|
this.currentCode = item.code
|
this.toFront.push(String(item.code))
|
this.$emit('excountry', item)
|
},
|
handleClick(item) {
|
console.log(item.name)
|
this.currentCode = item.code;
|
this.hideSubMenu = true;
|
console.log(this.hideSubMenu)
|
this.setCountry(item);
|
},
|
},
|
|
mounted() {
|
this.$emit('excountry', countries[this.countryCode])
|
}
|
}
|
</script>
|
|
|
<style lang="scss" scoped>
|
@import "intl.css";
|
|
.intl-tel-input {
|
height: 40px;
|
color: #666;
|
font-size: 14px;
|
|
.country-list {
|
width: 335px;
|
height: 400px;
|
margin-top: 12px;
|
border: none;
|
}
|
}
|
|
.item-list {
|
|
}
|
|
.van-hairline--bottom{
|
background: #1C2946;
|
}
|
:deep(.van-hairline--bottom) {
|
// background-color: red;
|
&::after{
|
border-color: $border_color;
|
}
|
}
|
</style>
|
|
