工作中遇到的一些问题及解决方法（vue）

最新推荐文章于 2022-03-02 10:46:15 发布

原创最新推荐文章于 2022-03-02 10:46:15 发布 · 置顶 · 674 阅读

0 ·

CC 4.0 BY-SA版权

vue2.0 专栏收录该内容

10 篇文章

订阅专栏

博客介绍了到账时间政策，还涉及Vue开发相关内容。在created生命周期调用isFriday函数，开户银行名称显示规则，路由导航守卫用于验证用户登录状态，以及点击复选框按钮勾选刷新或清除对应数据等信息技术相关要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.到账时间：到账时间执行T+1至T+3政策，遇周末顺延

isFriday () {
      let nowDay = new Date()
      let whichWeekday = nowDay.getDay()
      switch (whichWeekday) {
        case 0:
        case 1:
          this.todayAccount = nowDay.getTime() + 24 * 60 * 60 * 1000
          this.toAccount = nowDay.getTime() + 24 * 60 * 60 * 1000 * 3
          break
        case 2:
          this.todayAccount = nowDay.getTime() + 24 * 60 * 60 * 1000
          this.toAccount = nowDay.getTime() + 24 * 60 * 60 * 1000 * 5
          break
        case 3:
          this.todayAccount = nowDay.getTime() + 24 * 60 * 60 * 1000
          this.toAccount = nowDay.getTime() + 24 * 60 * 60 * 1000 * 4
          break
        case 4:
          this.todayAccount = nowDay.getTime() + 24 * 60 * 60 * 1000 * 1
          this.toAccount = nowDay.getTime() + 24 * 60 * 60 * 1000 * 5
          break
        case 5:
          this.todayAccount = nowDay.getTime() + 24 * 60 * 60 * 1000 * 3
          this.toAccount = nowDay.getTime() + 24 * 60 * 60 * 1000 * 5
          break
        case 6:
          this.todayAccount = nowDay.getTime() + 24 * 60 * 60 * 1000
          this.toAccount = nowDay.getTime() + 24 * 60 * 60 * 1000 * 4
          break
      }
    }

在created中调用isFriday()函数，生命周期，vue实例被生成后调用函数

2.开户银行（20字以内显示全名，超出20字，显示前8后8中间使用省略号用“......”连接）

<span>{{hashName | ellipsis}}</span>

filters: {
		    ellipsis (value) {
		      
		      if (!value) return ''
		      if (value.length > 10) {
		      	let all=value.length;
		      	 alert(all)
		      	 let ceshi = all-8
				let hou = str.substring(ceshi,all);
				let fisrt = str.substring(0,8);
				if (all > 20) {
				$(".jianjie").text(fisrt+"…"+hou);
				}
		        //return value.slice(0,20) + '...'
		      }
		      return value
		    }
		  }

3.路由导航守卫（用于后台管理系统登录前的一个判断，跳转路由验证用户登录状态）

router,beforeEach((to,from,next) =>{}）

router.beforeEach((to, from, next) => {
  // console.log(to.path)
  if (to.path !== '/login' && to.path !== '/regist') {
    if (localStorage.getItem('sessionId')) {
      next()
    } else {
      next({path: '/login'})
    }
  } else {
    next()
  }
})

to为向后走的路由对象，包括路由的完整信息（router即将进入的路由对象）

from为从哪跳来的路由对象（当前导航即将离开的路由）

next()控制路由向下走，重新定义路由跳转的路由next(‘路由路径) （进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。）

4.点击复选框按钮勾选刷新对应数据，不勾选清除数据

 <input type="checkbox" class="filter_box_auto" value="2" @change="checkVal($event)"/> 生效
 <input type="checkbox" class="filter_box_add" value="1" @change="checkVal($event)"/> 待生效
 <input type="checkbox" class="filter_box_valid" value="3" @change="checkVal($event)"/> 过期
 <input type="checkbox" class="filter_box_valid" value="5" @change="checkVal($event)"/> 报停

 checkVal (event) {
      let tmp = []
      let self = this
      if (event.target.checked) {
        if (self.list.indexOf(event.target.value) == -1 || self.list && self.list.length == 0) {
          self.list.push(parseInt(event.target.value))
        }
      } else {
        self.list.forEach(function (d, index) {
          if (d == event.target.value) {
            self.list[index] = null
          }
        })
        self.list.forEach(function (data) {
          if (data) {
            tmp.push(data)
          }
        })
        self.list = tmp
      }
      getUserCardInformation({userCardStatus: JSON.stringify(this.list)}).then(res => {
        this.initCardList = res.data.result.list
      })
    }