Vueはiviewに基づいてログインパスワードの表示と隠し機能を実現します。
iview概要
iViewはVue.jsベースのオープンソースUIコンポーネントライブラリで、主にPCインターフェースの中バックグラウンド製品にサービスしています。
1.背景
最近、abpを使ってプロジェクトを開発する過程で、フロントエンドのvueがログインパスワードを入力する時はデフォルトで隠しますが、もしユーザがパスワードを入力し間違えたら、表示と隠しを切り替える必要があります。だからこの文があります。
2.最終効果を実現する
2.1パスワードを隠す
2.2パスワードを表示する
パスワードを表示するには、パスワードボックスの左側の目をクリックします。
3.考え方を実現する
3.1 v-if現在のパスワード表示状態を判断する
パスワード入力ボックスとパスワードアイコンの最外層はDivタグで包まれ、vueのv-i-f-elseで表示または非表示状態を傍受します。
3.2パスワード隠し状態
アイコンとパスワード入力ボックスをDivタグで包み、目を閉じるアイコンを設定し、入力ボックスの種類はpasswordです。
アイコンを使うと次のようになります。
Iviewページを選択したアイコンメニューは以下の通りです。
下の図のような二つの目を選択してください。
パスワードが隠しられている状態では、閉じたアイコンとパスワードの種類を表示し、同時に目元アイコンのクリックイベントを傍受して、目を開けた状態（すなわちパスワード表示状態）に切り替えます。
パスワードが表示されている状態で、開いているアイコンとtextタイプを表示し、同時に目のアイコンのクリックイベントをモニターします。
目を閉じた状態に切り替えます。
本論文は写真を導入する必要がなく、iviewの目を開けたアイコンを便利に利用しました。
vue中v-i-fを利用して、v-elseは直接ラベル（すなわち表示データ）に向かってプログラミングします。
divタグを活用しました。iviewのiconアイコンはイベントを傍受できないので、ここではiconアイコンをdivタグで包んで、クリックして傍受することができます。
締め括りをつける
ここで、Vueについてはiviewに基づいてログインパスワードの表示と隠し機能を実現する文章を紹介します。もっと関連するvue登録パスワードは隠し内容を表示します。私達の以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。
iViewはVue.jsベースのオープンソースUIコンポーネントライブラリで、主にPCインターフェースの中バックグラウンド製品にサービスしています。
1.背景
最近、abpを使ってプロジェクトを開発する過程で、フロントエンドのvueがログインパスワードを入力する時はデフォルトで隠しますが、もしユーザがパスワードを入力し間違えたら、表示と隠しを切り替える必要があります。だからこの文があります。
2.最終効果を実現する
2.1パスワードを隠す
2.2パスワードを表示する
パスワードを表示するには、パスワードボックスの左側の目をクリックします。
3.考え方を実現する
3.1 v-if現在のパスワード表示状態を判断する
パスワード入力ボックスとパスワードアイコンの最外層はDivタグで包まれ、vueのv-i-f-elseで表示または非表示状態を傍受します。
<div >
<div v-if="switchPassDisFlag">
<div v-on:click="SwitchPassDis">
<i class="ivu-iivu-icon-ios-eye-off-outline ivu-input-iivu-input-icon-normal" style="left:0"></i>
</div>
<input v-model="loginModel.passwoautocomplete="off" spellcheck="faltype="password" :placeholde('PasswordPlaceholder')" class="ivu-inivu-input-large" style="padding-left:3padding-right:0">
</div>
<div v-else>
<div v-on:click="SwitchPassDis">
<i class="ivu-icon ivu-icon-ios-eye-outlivu-input-icon ivu-input-icon-normstyle="left:0"></i>
</div>
<input v-model="loginModel.passwoautocomplete="off" spellcheck="faltype="text" :placeholde('PasswordPlaceholder')" class="ivu-inivu-input-large" style="padding-left:3padding-right:0">
</div>
</div>
switchPassDisFlag:boolean=falseここではtypescriptの強いタイプを使っていますので、bootleanタイプと定義する必要があります。bollanタイプと定義されているのは下のモニターアイコンをクリックしてイベント中の状態を取っても便利です。3.2パスワード隠し状態
アイコンとパスワード入力ボックスをDivタグで包み、目を閉じるアイコンを設定し、入力ボックスの種類はpasswordです。
アイコンを使うと次のようになります。
Iviewページを選択したアイコンメニューは以下の通りです。
下の図のような二つの目を選択してください。
パスワードが隠しられている状態では、閉じたアイコンとパスワードの種類を表示し、同時に目元アイコンのクリックイベントを傍受して、目を開けた状態（すなわちパスワード表示状態）に切り替えます。
div v-if="switchPassDisFlag">
<div v-on:click="SwitchPassDis">
<i class="ivu-icon ivu-icon-ios-eye-off-outline ivu-input-icon ivu-input-icon-normal" style="left:0"></i>
</div>
<input v-model="loginModel.password" autocomplete="off" spellcheck="false" type="password" :placeholder="L('PasswordPlaceholder')" class="ivu-input ivu-input-large" style="padding-left:32px;padding-right:0">
</div>パスワードが表示されている状態で、開いているアイコンとtextタイプを表示し、同時に目のアイコンのクリックイベントをモニターします。
目を閉じた状態に切り替えます。
<div v-else>
<div v-on:click="SwitchPassDis">
<i class="ivu-icon ivu-icon-ios-eye-outline ivu-input-icon ivu-input-icon-normal" style="left:0"></i>
</div>
<input v-model="loginModel.password" autocomplete="off" spellcheck="false" type="text" :placeholder="L('PasswordPlaceholder')" class="ivu-input ivu-input-large" style="padding-left:32px;padding-right:0">
</div>
SwitchPassDis()
{
this.switchPassDisFlag=!this.switchPassDisFlag;
}本論文は写真を導入する必要がなく、iviewの目を開けたアイコンを便利に利用しました。
vue中v-i-fを利用して、v-elseは直接ラベル（すなわち表示データ）に向かってプログラミングします。
divタグを活用しました。iviewのiconアイコンはイベントを傍受できないので、ここではiconアイコンをdivタグで包んで、クリックして傍受することができます。
締め括りをつける
ここで、Vueについてはiviewに基づいてログインパスワードの表示と隠し機能を実現する文章を紹介します。もっと関連するvue登録パスワードは隠し内容を表示します。私達の以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。