手機(jī)號(hào)登錄，分析一下頁(yè)面可以知道一般是有兩個(gè)按鈕(獲取驗(yàn)證碼,登錄)兩個(gè)框(輸入手機(jī)號(hào),輸入驗(yàn)證碼)

所以有了下面這個(gè)玩意(不看具體功能，只看結(jié)構(gòu))

<template>

    <div class="login-wrapper">

        <div class="title-bar">登錄</div>

        <div class="wrapper phone-wrapper">

            <span class="title">手機(jī)號(hào)</span>

            <input class="input phone" type="text" placeholder="手機(jī)號(hào)">

        </div>

        <div class="wrapper code-wrapper">

            <span class="title">驗(yàn)證碼</span>

            <input class="input code" type="number" placeholder="驗(yàn)證碼">

            <div class="send">獲取驗(yàn)證碼</div>

        </div>

        <div class="wrapper btn-wrapper">

            <div class="input btn">登錄</div>

        </div>

    </div>

</template>

這個(gè)時(shí)候就可以開始寫邏輯了，也是來(lái)簡(jiǎn)單分析一下，登錄需要點(diǎn)擊，獲取驗(yàn)證碼需要點(diǎn)擊并且能倒數(shù)秒數(shù)，也就是動(dòng)態(tài)修改文字，體驗(yàn)好一點(diǎn)可以檢查限定手機(jī)號(hào)位數(shù)，驗(yàn)證碼位數(shù)。

那就差不多是下面這個(gè)樣子

<template>

    <div class="login-wrapper">

        <div class="title-bar">登錄</div>

        <div class="wrapper phone-wrapper">

            <span class="title">手機(jī)號(hào)</span>

            <input class="input phone" type="text" placeholder="手機(jī)號(hào)"

                   :value="phone"

                   ref="phone" v-on:change="changePhone" v-on:input="changePhone">

        </div>

        <div class="wrapper code-wrapper">

            <span class="title">驗(yàn)證碼</span>

            <input class="input code" type="number" placeholder="驗(yàn)證碼"

                   :value="code"

                   ref="code" v-on:change="changeCode" v-on:input="changeCode">

            <div @click="loginCode" class="send">{{codeText}}</div>

        </div>

        <div class="wrapper btn-wrapper">

            <div class="input btn" @click="login">登錄</div>

        </div>

    </div>

</template>

<script>

        name: "LoginPhone",

        data() {

            return {

                phone: '',  //輸入框中的手機(jī)號(hào)

                code: '',  //輸入框中的驗(yàn)證碼

                codeText: '獲取驗(yàn)證碼',  //倒計(jì)時(shí)顯示文字

                timingBoard: 60,  //倒計(jì)時(shí)數(shù)

                timer: null,  //一個(gè)定時(shí)器，用來(lái)倒數(shù)驗(yàn)證碼

            }

        },

        methods: {

            loginCode() {},   //獲取驗(yàn)證碼

            login() {},       //登錄

            changePhone() {}, //檢查手機(jī)號(hào)長(zhǎng)度

            changeCode() {},  //檢查驗(yàn)證碼長(zhǎng)度

        }

</script>

有了這些已經(jīng)足夠你實(shí)現(xiàn)出一個(gè)基本的手機(jī)號(hào)登錄界面了，如需完全代碼請(qǐng)點(diǎn)擊下面gist鏈接

完整代碼參閱: http://m.lncdfzh.com.cn/flxxyz/64ceb06a0754d67a771b3e3e7dc94d48