（原创）vue选择检索国家页⾯模板<!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="lplaceholder"
class="country_input" id="country_name" @click="showcountryfn($event)" readonly/>
<img src="img/triangle_3.png" alt="" class="triangle" v-show="!isShowSelect">
<img src="img/select_up.png" alt="" class="triangle" v-show="isShowSelect">
<div class="country-list phone_div" v-show="showcountry" id="country_list">
<input type="text" :placeholder="untry_search" id="flag" @keyup="searchList()"
@click="showList($event)"
class="search_input" v-model="searchValue"/>
<ul id="country_ul">
<li class="country preferred" v-for="item in countryData"
@click="unty,item.classname,item.phoneCo,$event)">
<div class="flag-box">
<div class="iti-flag " :class="item.classname"></div>
</div>
<span class="country-name">{{unty}}</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 ">{{btn}}</div>
</div>
</div>
</body>
<script src="cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<script src="cdn.jsdelivr/npm/vue-resource@1.5.1"></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.language = BrowserLanguage();
},
methods: {
getData() {
let that = this;
that.$http({ //调⽤接⼝
method: 'GET',
url: DataUrl //this指data
}).then(function (response) { //接⼝返回数据
}, 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 = ElementById("country_name"); inputval.value = unty
}, function (error) {
})
},
//获取浏览器语⾔类型
getBrowserLanguage() {
let language;
let result = "";
let l_language = Item("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 = ElementById("country_list"); ele_datalist.style.display = "block";
let element = ElementById('flag');
element.focus();
this.showcountry = !this.showcountry;
this.isShowSelect = !this.isShowSelect;
$event.stopPropagation();
},
showList($event) {
$event.stopPropagation();
},
selcountry(county, classname, phoneCo, $event) {
let inputval = ElementById("country_name"); inputval.value = county
let ele_class = ElementById("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: DataUrl //this指data
}).then(function (v) {
if (this.language == 'cn') {
this.phoneCo = '+86'
} else if (this.language == 'en-us') {
this.phoneCo = '+1'
} else if (this.language == 'ja') {
this.phoneCo = '+81'
} else if (this.language == 'ko') {
this.phoneCo = '+82'
} else if (this.language == 'vi') {
this.phoneCo = '+84'
}
}, function (v) {
});
},
// var ele_key = ElementById("flag")
searchList() {
this.showcountry = true;
let val = this.searchValue;
/
/获取输⼊框⾥匹配的数据
let srdata = [];
for (let i = 0; i < untryDataList.length; i++) {
if (im().length > 0 && untryDataList[i].county.indexOf(val) > -1 || im().length > 0 && untryDataList[i].phoneCo.indexOf(val) > -1) { let ele_datalist = ElementById("country_list");
ele_datalist.style.display = "block";
this.showcountry = true;
srdata.untryDataList[i]);
}
}
//获取到的数据准备追加显⽰, 前期要做的事情: 清空数据，然后显⽰数据列表，如果获取到的数据为空，
则不显⽰
let ele_datalist = ElementById("country_list");
ele_datalist.style.display = "block";
let ele_ullist = ElementById("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 < untryDataList.length; i++) {
htm += '<li class="country preferred" data-code="' + untryDataList[i].phoneCo + '">' +
'<div class="flag-box">' +
'<div class="iti-flag ' + untryDataList[i].classname + '"></div>' +
'</div>' +
'<span class="country-name">' + untryDataList[i].county + '</span>' +
'<span class="dial-code">' + untryDataList[i].phoneCo + '</span>'
}
ele_ullist.innerHTML = htm;
let list = ElementById("country_ul").getElementsByTagName("li");
let inputval = ElementById("country_name");
let flag_iti = ElementById("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 = ElementById("country_name");
for (let i = 0; i < srdata.length; i++) {
this.showcountry = true;
let ele_li = ateElement("li");
let ele_div = ateElement("div");
let ele_flag = ateElement("div");
let ele_span = ateElement("span");
let ele_span1 = ateElement("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");
Content = srdata[i].county;
Content = srdata[i].phoneCo;
lick = function () {
this.isShowSelect = false;
// this.inputVal = ElementsByClassName('country-name')[0].innerHTML; self.value = ElementsByClassName('country-name')[0].innerHTML;
var ele_class = ElementById("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地址是github/jiuyuetian007/vueSelectInput
*/
</script>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论