今回は、Vue.js で設定可能なログイン フォームを実装する手順について詳しく説明します。Vue.js で設定可能なログイン フォームを実装するための 注意事項とは何ですか。見て。
ビジネスシナリオ
以前は、プロジェクトは携帯電話番号 + パスワードログインのみをサポートしており、フロントエンドがフォームを直接記述していましたが、その後、フォーム要素を粒度として、携帯電話番号、パスワード、SMS 認証コードのコンポーネントが分離されており、それぞれの組み合わせ、ログイン、登録、および取得によって独自の
フォーム認証 メソッドを使用できます。パスワードなどをすぐに入力できます。フォームコンポーネント。高結合性と低結合性、高結合性と低結合性...これを 10 回繰り返します~
. ├ common ├ captcha.vue | ├ password.vue | └ phone.vue ├ login | └ index.vue ├ register | └ index.vue └ resetPassword └ index.vue
コード
リクエストサーバー構成データ:/* 参数说明: * 'password': 密码登录 * 'captcha': 短信验证码登录 * 'password_or_captcha': 密码或短信登录 * 'password_with_captcha': 密码+短信登录 */ config: { login_methods: 'password' }
.login-card .login-header h3 登录 .login-content phone(ref="phone") password( v-if="isPasswordMode" ref="password" ) captcha( v-if="isCaptchaMode" ref="captcha" ) template(v-if="isPasswordWithCaptchaMode") captcha(ref="captcha") password(ref="password") template(v-if="isPasswordOrCaptchaMode") ... el-button(@click="login") 登录
async login () { if (!this.validate()) return const loginData = this.getLoginData() await this.postLogin(loginData) ... }
validate () { const phone = this.$refs.phone.validate() let isPass = false if (this.isPasswordMode) { if (this.$refs.password) isPass = this.$refs.password.validate() } if (this.isCaptchaMode) { if (this.$refs.captcha) isPass = this.$refs.captcha.validate() } if (this.isPasswordWithCaptchaMode) ... if (this.isPasswordOrCaptchaMode) ... isPass = phone && isPass return isPass }
.login-password el-form( :model="form" :rules="rules" ref="form" @submit.native.prevent="" ) el-form-item(prop="password") el-input( v-model="form.password" type="password" name="password" )
validate () { let res = false this.$refs.form.validate((valid) => { res = valid }) return res }
computed: { ...mapState('login', { phone: state => state.phone, password: state => state.password, captcha: state => state.captcha }), }, methods: { ... getLoginData () { let mode = '' const phone = this.phone ... const data = { phone } if (this.isPasswordMode) { mode = 'password' data.password = password } if (this.isCaptchaMode) { mode = 'captcha' data.captcha = captcha } if (this.isPasswordWithCaptchaMode) ... if (this.isPasswordOrCaptchaMode) ... data.mode = mode return data } }
補足:
全選択と全選択解除のvue.jsサンプルコードnew Vue({ el: '#app', data: { checked: false, checkedNames: [], checkedArr: ["Runoob", "Taobao", "Google"] }, methods: { changeAllChecked: function() { if (this.checked) { this.checkedNames = this.checkedArr } else { this.checkedNames = [] } } }, watch: { "checkedNames": function() { if (this.checkedNames.length == this.checkedArr.length) { this.checked = true } else { this.checked = false } } } })
Vue が HTML 文字列を HTML に変換する手順の詳細な説明
Koa2 ファイルのアップロードおよびダウンロードのケースの詳細な説明
以上がVue.js を使用して構成可能なログイン フォームを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。