项目存档(vue ElementUI vant)

js

等待后执行

this.$nextTick(function() {
    this.fun()
})

路由问题

• 子路由

{
    path: "/",
    name: "index",
    redirect: "/signActive",//重定位
    component: () => import (/* webpackChunkName: "home" */ "@/components/PC/PCtotal/"),
    children:[
      {
        path: "/home",
        name: "home",
        component: () => import (/* webpackChunkName: "home" */ "@/views/PC/home/"),
        meta: { title: "首页",keepAlive: true}
      }
}

• 其他页面获取路由名

this.$route.name

• 路由跳转
  • replace 不会回退
    • params 浏览器路径上不会显示参数
    • query 会显示
  • push 会回退
    • param
    • query

<!-- 标签跳转 to原理同push -->
<router-link to="/"></router-link>
<router-link to="{path:'routerPath',query:{name: '111'}"><button>跳转</button></router-link>

this.$router.replace('/routerPath');
this.$router.push('routerpath');
//传参
var detail = {name: '11',····}
// params传参需要用router的name来识别路径
this.$router.push({name:'routerName',params:detail});
this.$router.replace({name:'routerName',params:detail});
// query
this.$router.push({path:'routerPath',query:detail});
this.$router.replace({path:'routerPath',query:detail});
//接收参数
this.$route.params
this.$route.query

请求 响应拦截

import axios from "axios";
import router from "@/router";
import md5 from "js-md5";
const request = axios.create({
  baseURL: "/"
});

//请求数据处理 加密字符串
var objFun = function(object){
  var obj=object  
  var objString=[];
  for(var key in obj){    
    objString.push(key,obj[key])
  }    
  var encryptionData = md5(objString.join(""))
  return encryptionData
}

// 请求拦截
request.interceptors.request.use(
  config => {
    // var token = localStorage.getItem("token");
    var obj = config.data
    var data = localStorage.getItem("data");
    if (data) {
      let token  = (JSON.parse(data)).token
      let encryptionData = objFun(obj)
      config.headers.authorization = token;
      config.headers.encryptionData = encryptionData;
      get("data",1)
    }else{
      // router.push({
      //   name: "login"
      // });
    }
    return config;
  },
  err => {
      // return Promise.reject(err);
  }
)
// 响应拦截
request.interceptors.response.use(response => {
  const code = response.data.code;
  if (code == 403) {
    // router.push({
    //   name: "login"
    // });
  }else {
    return response;
  }
}, error => {
  // router.push({
  //   name: "login"
  // });
  return Promise.reject(error);
});

export default request; // 导出 axios 对象

登录设置过期时间

// 添加
this.set("data", data.object.token,data.object.userName)

set(key,value1,value2){
    var curTime = new Date().getTime();
    localStorage.setItem(key,JSON.stringify({token:value1, username:value2, time:curTime}));
},
// 本地查看localStorage.getItem("data")格式为{"token":"111","username":"name","time":"12458790"}
// 设置本地token过期时间
var get = function(key,exp){
  var data = localStorage.getItem(key);
  var dataObj = JSON.parse(data);
  var timedec = new Date().getTime()  - dataObj.time 
  if (timedec > exp*60*60*24*1000) {
      alert("用户信息已过期，请重新登录")
      localStorage.removeItem('data');
      router.push({
        name: "login"
      });
  }else{
      var token = dataObj.token
      return token;
  }
}

ElementUI

表单

• 重置问题：使用

this.$refs[formName].resetFields(); 

重置表单后，部分输入框无法输入文字

解决方案：将formName里的值初始化时赋空值

• [Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘validate’ of undefined”

解决方案：表单忘记添加ref=“formName”

• el-table 分页的每一页的起始序号为1

<el-table-column show-overflow-tooltip width="80" align="center" type="index" :index="1" label="序号">
    <template scope="scope">
        <span>{{(searchForm.pageNum - 1) * searchForm.pageSize   + scope.$index + 1}}</span>
    </template>
</el-table-column>


export default {
    data() {
       return {
   			searchForm: {
                pageNum: "1",
                pageSize: "15"
            },
       }
    }
}

Vant

下拉刷新和上拉加载

.vue template部分

 <van-pull-refresh v-model="isDownLoading" @refresh="onDownRefresh">
    <van-list class="msglist" v-model="isUpLoading" :finished="upFinished" :immediate-check="false" :offset="10" finished-text="没有更多了" @load="onLoadList">
        <div class="msg van-clearfix clear" v-for="item in signList" :key="item.planId">
            <div class="msg-item">
                <p>
                    <span class="msg-item-date">{{(item.planningTime.substr(0, 10))}}</span>
                    <span v-if="item.checkInStatus == '1'" class="msg-item-status01">正常</span>
					<span v-if="item.checkInStatus == '2'"  class="msg-item-status">迟到</span>
				</p>
				<p class="msg-item-content nowrap">{{item.planContent}}</p>
			</div>
		</div>
	</van-list>
</van-pull-refresh>

script

export default {
    data() {
        return {
            reqProData: {
                pageNum: 1,
                pageSize: 1
            },
            signList: [],
            isDownLoading: false, // 下拉刷新
            isUpLoading: false, // 上拉加载
            upFinished: false, // 上拉加载完毕
            offset: 50,
        }
    },
    mounted(){
        this.search("up")
    },
    activated(){
        this.search("up")
    },
    methods: {
         onDownRefresh() {
            this.reqProData = {
                pageNum: 1,
                pageSize: 15
            }
            this.upFinished = false // 不写这句会导致你上拉到底过后在下拉刷新将不能触发下拉加载事件
            this.search("up") // 加载数据
        },
        onLoadList() {
            this.reqProData.pageNum++
            this.search("down")
        },
        search(flag) {
        	// 这里请求后台接口
            queryMySignIn(this.reqProData).then(res => {
            	// 请求成功后
                const data = res.data;
                if (data.success) {
                    if(flag == "up"){
                        // 下拉刷新
                        this.signList = data.object.list // 后台返回的数据赋值
                        this.isDownLoading = false
                    }else if(flag == "down"){
                        // 上拉加载
                        // 如果是最后一页，关闭上拉加载
                        if(data.object.isLastPage == true){
                            let rows = data.object.list; //请求返回当页的列表
                            this.isUpLoading = false;
                            this.signList = this.signList.concat(rows);
                            this.upFinished = true;
                            return;
                        }else{
                            let rows = data.object.list; //请求返回当页的列表
                            this.isUpLoading = false;
                            this.total = data.object.total; 
                            if (rows == null || rows.length === 0) {
                                // 加载结束
                                this.upFinished = true;
                                return;
                            }
                            // 将新数据与老数据进行合并
                            this.signList = this.signList.concat(rows);
                            //如果列表数据条数>=总条数，不再触发滚动加载
                            if (this.signList.length >= this.total) {
                                this.upFinished = true;
                            }
                        }
                    }
                }else {
                    this.$message ({
                        message: data.message,
                        type: "warning"
                    })
                }
            })
        }
	},
}