1.驗證碼倒計時

使用者點選“傳送驗證碼”的按鈕以後，在60s內不可以再次點選，並開啟60s倒計時功能

<template>
  <el-button @click="postPhoneCode" v-if="phoneCodeStatus">傳送驗證碼</el-button>
  <el-button v-else-if="!phoneCodeStatus" disabled>{{count}}s</el-button>
</template>
<script>
   export default {
     data(){
        return {
              phone:"",
              phoneCodeStatus: true
         }
      },
      methods:{
               postPhoneCode() {
                const data = {
                    phone: this.phone//使用者填寫
                }
                postPhoneCode(data).then(res => {
                    if (res.data.code === 101) { //請求成功狀態
                        const TIME_COUNT = 60;//倒計時60s
                        this.count = TIME_COUNT;//賦值，以便判斷時間
                        this.phoneCodeStatus = false//切換按鈕狀態，按鈕不可點選
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--;
                            } else {
                                this.phoneCodeStatus = true
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000)//時間每減一秒，計時器 -1
                        this.$message({
                            message: '傳送驗證碼成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('傳送失敗！');
                    }
                }).catch(err => {
                    console.log('傳送手機失敗', err)
                    this.$message.error('傳送驗證碼失敗！');
                })
            },

     }
  }
</script>
 

2.自動登入功能

點選“自動登入”的單選框以後，在本地儲存裡儲存使用者的資料，下次登入的時候，查詢本地儲存，有記錄的話，填充form的資料；當再次點選時，銷燬本地儲存的相應資料

<template>
   <el-checkbox v-model="is_checked" @change="check">自動登入</el-checkbox>
</template>
<script>
   export default {
        data(){
             return {
                 is_checked: false
             }
        },
        mounted(){
        //如果本地儲存的資料裡有phone的記錄，“自動登入”的單選框就為true
            if (window.localStorage.getItem('phone')) {
                this.is_checked = true
            }
        },
        methods:{
           check(val){//val有兩個值true false
                if (val) {
                    window.localStorage.setItem('phone', this.phone)//在本地儲存裡儲存phone資料
                } else {
                    window.localStorage.removeItem('phone')//在本地儲存裡刪除phone記錄
                }
           }
        }

   }
</script>
 

3.導航選單

1. 當有二級選單時，一級選單點選無效

import Vue from 'vue';
import VueRouter from 'vue-router';
import centre from './pages/content/Centre'

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        component: home,
        meta: { title: '個人中心', icon: '' },
        name: 'centre',
        hidden: true,
        children: [
            {
                path: 'centre',
                component: centre,
                name: 'centre',
                meta: { title: '個人中心', icon: '' }
            }
        ]
    }
];

const router = new VueRouter({routes});

export default router;

 

2. 二級選單啟用時，一級選單展開（頁面重新整理時有效）

<template>
    <el-menu class="leftmenu" background-color="#e4e4e4" text-color="#0e2b32" active-text-color="#ffffff"
             :router="true" :default-active="$route.path" :open="$route.path">
        <el-submenu v-for="(submenu, index) in menu" :key="index" :index="submenu.title">
            <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{submenu.title}}</span>
            </template>
            <el-menu-item v-for="(item, idx) in submenu.children" :key="idx" :index="item.path">
                {{item.label}}
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<script>
    export default {
        name: 'PageMenu',
        data() {
            return {
                menu: [
                   {
                        title: '個人中心',
                        children: [
                            {label: '-個人中心', path: '/centre'}
                        ]
                    }
                ]
            };
        }
    };
</script>

4.vuex 全域性變數

5.頁面重新整理問題

本地測試，頁面（一級、二級…）重新整理正常，上線後，頁面重新整理報404 解決方法：取消router的history模式

6.顯示富文字內容

<template>
    <div v-html="context"></div>
</template>
<script>
    export default {
        data() {
            context: null //後端獲取到的資料
        }
   }
</script>

7.正則校驗

//最新手機號正則（因為遇上了199xxxxxxxx的手機號碼）
var mobile = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
//身份證號碼正則
var identity = /\d{17}[\d|x]|\d{15}/

8.mint-ui field校驗

效果圖：

<template>
                  <mt-field label="姓名" placeholder="請輸入姓名" v-model="name" :state="NameStatus"  @blur.native.capture="checkName"></mt-field>
</template>
<script>
export default {
        data() {
            return {
                //校驗
                NameStatus: null
            }
        },
         methods: {
              checkName(){
                const name = this.name;
                if(name.length < 2 || name.length > 6){
                    this.NameStatus="error";
                } else{
                    this.NameStatus="success";
                }
            },

       }
}
</script>

9.同一個瀏覽器登入多個賬號導致使用者資訊混亂

大佬都無法解決，別跟我談需求#掀桌