vue+node全棧移動商城【8】-vant新建註冊頁面

上一節我們已經實現了註冊頁面的跳轉，那麼在這一節，我們全用vant這個框架，把註冊頁面給完善起來。讓它可以擁有基本的頁面交互功能。
爲下一步的登陸、註冊作好準備。

---

這是
vant官網，

在左側的導航裏，向下滾動到，
NavBar 導航欄

先看【使用指南】把下面的代碼加入到main.js中

import { NavBar } from 'vant';
Vue.use(NavBar);

而後根據咱們的須要，在register.vue文件中的template中，加入如下代碼，

<van-nav-bar
            :title=msg
            left-text="返回"
            left-arrow
            @click-left="goBackFn"
            />

在register.vue文件中的script中，加入如下代碼，

data(){
        return {
            msg:'註冊頁面',

            username:'',
            password:'',
            password2:'',

            userErr:'用戶名不能爲空',
            passErr:'密碼不能爲空'
        }
    },

---

methods:{
    // 回到上一步
    goBackFn(){
        this.$router.go(-1);
    }
}

如今你應該可以看到一個導航條，而且你點擊返回的時候，可以返回到上一頁。

---

接下來，我們使用【Field 輸入框】來實現用戶輸入的部分，
點擊： Field 輸入框，
查看文檔的使用指南，把下面的代碼，加入到main.js中，

import { Field } from 'vant';
Vue.use(Field);

咱們使用Field的自定義類型，在register.vue文件中的template區域中，加入如下代碼，

<van-field
    v-model="username"
    required
    clearable
    label="用戶名"
    placeholder="請輸入用戶名"
    @click-icon="username=''"
    :error-message="userErr"
    />

<van-field
    v-model="password"
    type="password"
    required
    clearable
    label="密碼"
    placeholder="請輸入密碼"
    @click-icon="username=''"
    :error-message="passErr"
    />

<van-field
    v-model="password2"
    type="password"
    required
    clearable
    label="重複密碼"
    placeholder="請重複輸入密碼"
    @click-icon="username=''"
    :error-message="passErr"
    />

在script區域中加入如下代碼，

data(){
    return {
        msg:'註冊頁面',

        username:'',
        password:'',
        password2:'',

        userErr:'用戶名不能爲空',
        passErr:'密碼不能爲空'
    }
}

這時，咱們的register.vue註冊頁面，雖然尚未添加相應的js方法，但就頁面來說已經初步完成。

---

更快觀看 更多教程內容，請掃下方二維碼，關注微信公衆號：web前端教室，謝謝。 更有前端學習羣，讓你組團學習，更快進步。