<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>ログイン</ TITLE>
<META HTTP-当量= "Content-Typeの"コンテンツ= "テキスト/ HTML;のcharset = UTF-8 "/>
<メタ名="ビューポート"
コンテンツ="幅=デバイス幅、初期スケール= 1.0、最小スケール= 1.0、最大規模= 1.0、ユーザースケーラブルなし=ビューポートフィット=カバー"/>
<メタHTTP-当量="プラグマ」コンテンツ= "キャッシュなし" />
<メタHTTP-当量= "キャッシュ制御"コンテンツ= "キャッシュなし" />
<メタHTTP-当量=内容= "0" /> "期限が切れ"
= <メタHTTP-当量"アクセス制御-許可-起源"コンテンツ= "*" />
<リンクのrel = "スタイルシート"のhref = "CSS / base.css"タイプ= "テキスト/ cssの" />
<リンクのhref = "CSS / login.css"のrel = "スタイルシート"タイプ= "テキスト/ cssの"メディア= "画面" />
<リンクのrel = "スタイルシート"のhref = "CSS / flog.css" />
</ HEAD>
<BODY>
<！ - <divのクラスは= "ワープ" ID = "アプリ" @ = "mainClickを（）"をクリック> - >
<DIV CLASS = "反り" ID = "アプリケーション">
<IMG SRC = "IMG /ロゴ2.png"クラス= "ロゴ" />
<DIV CLASS = "フォーム" ID = "formdiv">
< DIVクラス= "国際-TEL-入力できるように、ドロップダウンwarpinput">
<DIV CLASS = "フラグコンテナ">
<DIV CLASS = "選択フラグ"のtabindex = "0">
<DIV CLASS = "ITI-フラグ"：クラス= "languageData.classname" ID = "flag_iti"> </ div>
</ div>
</ div>
の<input type = "text"：プレースホルダ= "languageData.telplaceholder"
スタイル=「テキスト整列：左;」 Vモデル= "searchValue" /> <UL ID = "country_ul"> <LIクラスは、= V-ため= "countryDataの項目" "国が好ましいです"
@ = "selcountry（item.county、item.classname、item.phoneCo、$イベント）">をクリックし
、<DIV CLASS = "フラグ-ボックス">
<DIV CLASS = "ITI-フラグ"：クラス= "item.classname" > </ div>
</ div>
<スパンクラス= "国名"> {{item.county}} </スパン>
<スパンクラス= "コードをダイヤル"> {{item.phoneCo}} </スパン>
</ LI>
</ UL>
</ div>
</ div>
<！ - <DIV CLASS = "codediv">の<input type = "text"クラス= "codeint" /> <スパン> <IMG SRC = "画像/ code.png" /> </ span>を</ div> - >
<DIV CLASS = "BTNのredbtn"> {{languageData.nextbtn}} </ div>
</ div>
</ DIV >
</ BODY>
<SCRIPT SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ SCRIPT>
<SCRIPT SRC =「https://cdn.jsdelivr.net/npm /[email protected]「> </ SCRIPT>
<SCRIPT>
VAR =デモ新しい新しいヴュー（{
EL： '#app'、
データ：{
getDataUrl： './static/countryJson.json'、//データを保存インタフェース
languageUrl： './static/language.json'、//多言語データ・インターフェース、
言語： ''、
languageData： ''、
CountryData： ''、
telplaceholder： ''、
isShowSelect：偽へ
showcountry：偽へ
phoneCo： 「」
countryDataList：[]、
searchValue： ''、
郡： ''、
inputVal： ''
}、
作成（）{
this.getData（）//定义方法
this.getLanguage（）//定义
this.language = this.getBrowserLanguage（）。
this.getphone（）;
}、
メソッド：{
のgetData（）{
すなわち=これを聞かせて、
その$ HTTP（{//调用接口。
方法： 'GET'、
URL：this.getDataUrl //この指データ
}）。次に、（関数（応答）{//接口返回数据
this.countryData = response.body [この.language]
}、関数（誤差）{
}）
}
//は、多言語取得
はgetLanguage（）{
;このことLET =
。その$のHTTP（{//コール・インタフェース
'GET'、：メソッド
URL：//これはthis.languageUrlデータを意味
}）その後、（機能。 （応答）{//戻りインターフェースデータは
this.languageData = response.body [this.language];
せinputval =のdocument.getElementById（ "COUNTRY_NAME"）;
inputval.value = this.languageData.county
}、関数（誤差）{
}）
}
//ブラウザの言語の種類取得
getBrowserLanguageを（）{
言語を聞かせて。
=「」結果をしましょう。
l_language = localStorage.getItem（ "言語"）しましょう。
（！l_language || l_language == ''）{もし
あれば（navigator.language）{
言語= navigator.language。
}他{
言語= navigator.browserLanguage。
}
（language.indexOf（ "zh-"）> = 0）{もし
//中文
結果= "CN"。
}それ以外の場合（language.indexOf（ "エン"）>
}そうであれば（language.indexOf（ "ja-"）> = 0）{
//日语
結果= "JA"。
}他{
結果= "EN-US"。
}
}他{
結果= l_language。
}
戻り値の結果;
}、
showcountryfn（$イベント）{
せele_datalist =のdocument.getElementById（ "COUNTRY_LIST"）。
ele_datalist.style.display =「ブロック」。
せ元素= window.document.getElementById（ 'フラグ'）;
element.focus（）;
！this.showcountry = this.showcountry。
this.isShowSelect = this.isShowSelect！;
$するevent.stopPropagation（）;
}、
showList（$イベント）{
$するevent.stopPropagation（）;
}、
selcountry（郡、クラス名、phoneCo、$イベント）{
inputval =のdocument.getElementById（ "COUNTRY_NAME"）をしましょう。
inputval.value =郡
ましょうele_class =のdocument.getElementById（ "flag_iti"）;
ele_class.setAttribute（ "クラス"、 "ITI-フラグ" +クラス名+ ""）。
COUNTRY_CODE = phoneCo。
this.showcountry = falseは、
this.isShowSelect = falseは、
$するevent.stopPropagation（）;
}、
getphone（）{
すなわち=これを聞かせて、
。その$ HTTP（{//调用接口
方法： 'GET'、
URL：this.getDataUrl //この指データ
}）。その後、（関数（V）{
（this.language == 'CN'）{もし
これ。 countryDataList = v.body.cn;
this.phoneCo = '+86'
}そうであれば（this.language == 'EN-US'）{
this.countryDataList = v.body.en;
this.phoneCo = '+1'
}そうであれば（this.language == 'JA'）{
this.countryDataList = v.body.ja。
this.phoneCo = '+81'
そう}（this.language == 'KO'）であれば{
this.countryDataList = v.body.ko。
this.phoneCo = '+82'
}そうであれば（this.language == 'VI'）{
this.countryDataList = v.body.vi。
this.phoneCo = '+84'
}
}、関数（V）{
}）;
}
// VARのele_key =のdocument.getElementById（ "フラグ"
this.showcountry =はtrue。
ヴァル= this.searchValueをしましょう。
//获取输入框里匹配的数据
せsrdata = [];
（LET i = 0; iについて<this.countryDataList.length; iは++）{
。IF（val.trim（）長さ> 0 && this.countryDataList [I] .county.indexOf（ヴァル）> -1 ||ヴァル。トリム（）> 0 && this.countryDataList [I] .phoneCo.indexOf（val）で長さ> -1）{。
）ele_datalist =のdocument.getElementById（ "COUNTRY_LIST"ましょう。
ele_datalist.style.display =「ブロック」。
this.showcountry =はtrue。
srdata.push（this.countryDataList [I]）。
//行うには、追加、前のものを表示する準備ができてデータを取得する：表示されない、データを消去し、取得したデータが空の場合、データの一覧が表示され
LET ele_datalist =のdocument.getElementById（「COUNTRY_LISTを」）;
ele_datalist.style = .display "ブロック";
LET ele_ullist =のdocument.getElementById（ "country_ul"）;
ele_ullist.style.display = "ブロック";
ele_ullist.innerHTML = "";
IF（srdata.length == 0）{
ele_datalist.style。 =表示"ブロック";
せHTM = ""
のための（LET I = 0; I <this.countryDataList.length; I ++）{
HTM + = '<LIクラス= "カントリー好ましい"データコード=「'+ this.countryDataList [i]は.phoneCo + '">' +
'<DIV CLASS = "フラグボックス">' +
'<DIV CLASS = "ITI-フラグ' + this.countryDataList [I] .classname + '"> </ div>' +
'</ div>' +
' <スパンクラス= "国名">」+ this.countryDataList [i]を.county + '</ span>の' +
'<スパンクラス= "ダイヤルコード">' + this.countryDataList [i]の.phoneCo + '</スパン>'
}
ele_ullist.innerHTML = HTM。
聞かせてリスト=のdocument.getElementById（ "country_ul"）のgetElementsByTagName（ "LI"）。
聞かせてinputval =のdocument.getElementById（ "COUNTRY_NAME"）;
flag_iti =のdocument.getElementById（ "flag_iti"）しましょう。
以下のために（; iはlist.lengthを<; I = 0せiは++）{
リスト[i]は.INDEX = I。
リスト[i]が.onclick =関数（）{
this.isShowSelect = FALSE;
c_code = this.attributes [ "データコード"]のnodeValue。
COUNTRY_CODE = c_code.split（ '+'）[1]。
inputval.value = this.children [1] .innerHTML
flag_iti.className = this.children [0] [0] .classNameを.children。
ele_datalist.style.display =「なし」。
}
}
}
//検索を非表示にするには、検索ボックス、データのリストにデータの後をクリックし、各ラインのイベントをクリックし、データの一覧を表示するには、データを追加し、すること
;（「COUNTRY_NAME」）自己=のdocument.getElementByIdを聞かせて
（I = letのために0; Iはsrdata.lengthを<; Iは++）{
this.showcountry = TRUEに、
LET ele_li =のdocument.createElement（ "李"）;
LET ele_div =のdocument.createElement（ "DIV"）;
LET ele_flag =のdocument.createElement（「DIV "）;
LET ele_span =のdocument.createElement（"スパン"）;
LET ele_span1 =のdocument.createElement（"スパン"）;
ele_li.setAttribute（"クラス""カントリー「）;
ele_li。setAttribute（ "クラス"、 "好ましいです"）。
ele_li.setAttribute（ "クラス"、 "国"）;
ele_div.setAttribute（「クラス」、「フラグボックス」）。
ele_flag.setAttribute（ "クラス"、 "ITI-フラグ" + srdata [I] .classname + ""）。
ele_span.setAttribute（ "クラス"、 "国名"）
ele_span1.setAttribute（ "クラス"、 "ダイヤルコードを"）;
ele_span.textContent = srdata [I] .county。
ele_span1.textContent = srdata [I] .phoneCo。
ele_li.onclick =関数（）{
this.isShowSelect = FALSE;
// this.inputVal = this.getElementsByClassName（」
self.value = this.getElementsByClassName（ '国名'）[0] .innerHTML。
VAR ele_class =のdocument.getElementById（ "flag_iti"）;
ele_class.setAttribute（ "クラス"、this.children [0] .children [0] .className）を、
ele_datalist.style.display =「なし」。
}
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>
（オリジナル）VUE国家ページテンプレートを取得することを選択します
おすすめ
転載: www.cnblogs.com/jiuyuetian/p/10966728.html
おすすめ
ランキング