!DOCTYPE html html lang="en" head meta charset="UTF-8" titlelogin/title meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="Access-Control-Allow-Origin" content="*"/>
<link rel="stylesheet" href="css/base.css" type="text/css"/>
<link href="css/login.css" rel="stylesheet" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/flog.css"/>
</head>
<body>
<!--<div class="warp" id="app" @click="mainClick()">-->
<div class="warp" id="app">
<img src="img/logo-2.png" class="logo"/>
<div class="form" id="formdiv">
<div class="intl-tel-input allow-dropdown warpinput">
<div class="flag-container">
<div class="selected-flag" tabindex="0">
<div class="iti-flag" :class="languageData.classname" id="flag_iti"></div>
</div>
</div>
<input type="text" :placeholder="languageData.telplaceholder"
class="country_input" id="country_name" @click="showcountryfn($event)" readonly/>
<img src="img/triangle_3.png" class="triangle" v-show="!isShowSelect">
<img src="img/select_up.png" class="triangle" v-show="isShowSelect">
<div class="country-list phone_div" v-show="showcountry" id="country_list">
<input type="text" :placeholder="languageData.country_search" id="flag" @keyup="searchList()"
@click="showList($event)"
class="search_input" style="text-align: left;" v-model="searchValue"/>
<ul id="country_ul">
<li class="country preferred" v-for="item in countryData"
@click="selcountry(item.county,item.classname,item.phoneCo,$event)">
<div class="flag-box">
<div class="iti-flag " :class="item.classname"></div>
</div>
<span class="country-name">{{item.county}}</span>
<span class="dial-code">{{item.phoneCo}}</span>
</li>
</ul>
</div>
</div>
<!--<div class="codediv"><input type="text" class="codeint" /><span><img src="image/code.png" /> </span></div>-->
<div class="btn redbtn ">{{languageData.nextbtn}}</div>
</div>
</div>
</body>
<script src="http://img.558idc.com/uploadfile/allimg/210616/1P12J327-4.jpg"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><script> var demo = new Vue({ el: ‘#app‘, data: { getDataUrl: ‘./static/countryJson.json‘, //存数据接口 languageUrl: ‘./static/language.json‘, //多语言数据接口, language: ‘‘, languageData: ‘‘, countryData: ‘‘, telplaceholder: ‘‘, isShowSelect: false, showcountry: false, phoneCo: ‘‘, countryDataList: [], searchValue: ‘‘, county: ‘‘, inputVal: ‘‘ }, created() { this.getData(),//定义方法 this.getLanguage(),//定义 this.language = this.getBrowserLanguage(); this.getphone(); }, methods: { getData() { let that = this; that.$http({ //调用接口 method: ‘GET‘, url: this.getDataUrl //this指data }).then(function (response) { //接口返回数据 this.countryData = response.body[this.language] }, function (error) { }) }, //获取多语言 getLanguage() { let that = this; that.$http({ //调用接口 method: ‘GET‘, url: this.languageUrl //this指data }).then(function (response) { //接口返回数据 this.languageData = response.body[this.language]; let inputval = document.getElementById("country_name"); inputval.value = this.languageData.county }, function (error) { }) }, //获取浏览器语言类型 getBrowserLanguage() { let language; let result = ""; let l_language = localStorage.getItem("language"); if (!l_language || l_language == ‘‘) { if (navigator.language) { language = navigator.language; } else { language = navigator.browserLanguage; } if (language.indexOf("zh-") >= 0) { //中文 result = "cn"; } else if (language.indexOf("en-") >= 0) { //英文 result = "en-us"; } else if (language.indexOf("ja-") >= 0) { //日语 result = "ja"; } else { result = "en-us"; } } else { result = l_language; } return result; }, showcountryfn($event) { let ele_datalist = document.getElementById("country_list"); ele_datalist.style.display = "block"; let element = window.document.getElementById(‘flag‘); element.focus(); this.showcountry = !this.showcountry; this.isShowSelect = !this.isShowSelect; $event.stopPropagation(); }, showList($event) { $event.stopPropagation(); }, selcountry(county, classname, phoneCo, $event) { let inputval = document.getElementById("country_name"); inputval.value = county let ele_class = document.getElementById("flag_iti"); ele_class.setAttribute("class", "iti-flag " + classname + ""); country_code = phoneCo; this.showcountry = false; this.isShowSelect = false; $event.stopPropagation(); }, getphone() { let that = this; that.$http({ //调用接口 method: ‘GET‘, url: this.getDataUrl //this指data }).then(function (v) { if (this.language == ‘cn‘) { this.countryDataList = v.body.cn; this.phoneCo = ‘+86‘ } else if (this.language == ‘en-us‘) { this.countryDataList = v.body.en; this.phoneCo = ‘+1‘ } else if (this.language == ‘ja‘) { this.countryDataList = v.body.ja; this.phoneCo = ‘+81‘ } else if (this.language == ‘ko‘) { this.countryDataList = v.body.ko; this.phoneCo = ‘+82‘ } else if (this.language == ‘vi‘) { this.countryDataList = v.body.vi; this.phoneCo = ‘+84‘ } }, function (v) { }); }, // var ele_key = document.getElementById("flag") searchList() { this.showcountry = true; let val = this.searchValue; //获取输入框里匹配的数据 let srdata = []; for (let i = 0; i < this.countryDataList.length; i++) { if (val.trim().length > 0 && this.countryDataList[i].county.indexOf(val) > -1 || val.trim().length > 0 && this.countryDataList[i].phoneCo.indexOf(val) > -1) { let ele_datalist = document.getElementById("country_list"); ele_datalist.style.display = "block"; this.showcountry = true; srdata.push(this.countryDataList[i]); } } //获取到的数据准备追加显示, 前期要做的事情: 清空数据,然后显示数据列表,如果获取到的数据为空,则不显示 let ele_datalist = document.getElementById("country_list"); ele_datalist.style.display = "block"; let ele_ullist = document.getElementById("country_ul"); ele_ullist.style.display = "block"; ele_ullist.innerHTML = ""; if (srdata.length == 0) { ele_datalist.style.display = "block"; let htm = "" for (let i = 0; i < this.countryDataList.length; i++) { htm += ‘<li class="country preferred" data-code="‘ + this.countryDataList[i].phoneCo + ‘">‘ + ‘<div class="flag-box">‘ + ‘<div class="iti-flag ‘ + this.countryDataList[i].classname + ‘"></div>‘ + ‘</div>‘ + ‘<span class="country-name">‘ + this.countryDataList[i].county + ‘</span>‘ + ‘<span class="dial-code">‘ + this.countryDataList[i].phoneCo + ‘</span>‘ } ele_ullist.innerHTML = htm; let list = document.getElementById("country_ul").getElementsByTagName("li"); let inputval = document.getElementById("country_name"); let flag_iti = document.getElementById("flag_iti"); for (let i = 0; i < list.length; i++) { list[i].index = i; list[i].onclick = function () { this.isShowSelect = false; c_code = this.attributes["data-code"].nodeValue; country_code = c_code.split(‘+‘)[1]; inputval.value = this.children[1].innerHTML flag_iti.className = this.children[0].children[0].className; ele_datalist.style.display = "none"; } } } //将搜索到的数据追加到显示数据列表, 然后每一行加入点击事件, 点击后将数据放入搜索框内, 数据列表隐藏 let self = document.getElementById("country_name"); for (let i = 0; i < srdata.length; i++) { this.showcountry = true; let ele_li = document.createElement("li"); let ele_div = document.createElement("div"); let ele_flag = document.createElement("div"); let ele_span = document.createElement("span"); let ele_span1 = document.createElement("span"); ele_li.setAttribute("class", "country"); ele_li.setAttribute("class", "preferred"); ele_li.setAttribute("class", "country"); ele_div.setAttribute("class", "flag-box"); ele_flag.setAttribute("class", "iti-flag " + srdata[i].classname + ""); ele_span.setAttribute("class", "country-name") ele_span1.setAttribute("class", "dial-code"); ele_span.textContent = srdata[i].county; ele_span1.textContent = srdata[i].phoneCo; ele_li.onclick = function () { this.isShowSelect = false; // this.inputVal = this.getElementsByClassName(‘country-name‘)[0].innerHTML; self.value = this.getElementsByClassName(‘country-name‘)[0].innerHTML; var ele_class = document.getElementById("flag_iti"); ele_class.setAttribute("class", this.children[0].children[0].className); ele_datalist.style.display = "none"; } ele_li.appendChild(ele_div); ele_li.appendChild(ele_span); ele_li.appendChild(ele_span1); ele_div.appendChild(ele_flag); ele_ullist.appendChild(ele_li); } } } }) /* * *github地址是https://github.com/jiuyuetian007/vueSelectInput */</script></html>