标签 VUE 下的文章

甲方项目中有一个比较奇葩的需求,步骤条是可以点击跳转的,但是看了下饿了么组件,人家根本就没有点击事件,搜了好多,也没有解决办法,只能自己去搞了……

记得以前在用饿了么input输入框组件,也需要自己加一些原生的事件,Vue是有自定义事件,于是就在el-step上加了一个v-on:click.native,居然可以触发,问题顺利解决,看来以后如果要在组件上面加一个自定义事件,还是得用Vue的自定义事件来做了。

在做甲方项目的时候,遇到了一个比较正常的需求,就是点击新建的时候需要弹出一个弹窗,默认的去激活第一个输入框的焦点。这个需求看起来再正常不过的了,以前在写的时候也没特别注意(用jqeruy用习惯了),但是这次缺卡壳了。

focus1.gif

- 阅读剩余部分 -

关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件还不熟悉的可以查看这里

官方推荐的状态管理方案是 Vuex。不过如果项目不是很大,状态管理也没有很复杂的话,使用 Vuex 有种杀鸡用牛刀的感觉,当然,这也是要根据自己的需求来的,只是建议。

官方也推荐了一种非父子组件的通信,在简单的场景下,可以使用一个空的 Vue 实例作为事件总线也就是下面要说的 Bus

我习惯把Bus定义在全局,这样使用起来的时候就不用再去单独引用。

- 阅读剩余部分 -

这算是一个比较变态的需求了,最近给甲方做一个项目,有两级导航,但是一级导航是空的,也就是说一级导航是没有页面,所以也没办法去配置路由,但是在点击一级导航下的二级导航,需要把对应的一级导航高亮出来!如果不用VueRouter来做,应该效果上可以实现,但是如果用户手动的在浏览器上输入地址,没有路由的配合,导航是不会高亮的!

- 阅读剩余部分 -

先听我闲扯一段:在做项目的时候,有一个需求需要做一个下拉树,用饿了么的组件是没有下拉树的功能,但是组件是有树的,于是只能自己手动的去做一个下拉树的处理,我这里并不是要讲怎么做下拉树,因为做一个下拉是很简单的,我这里要说的是Vue的自定义指令。

- 阅读剩余部分 -

方案1

使用官方的滚动行为,但是必须开启HTML5 history 模式,开启HTML5 history 模式需要后端进行一些配置;

对于所有路由导航,简单地让页面滚动到顶部:

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

像浏览器的原生表现那样:

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

方案2

没有使用HTML5 history 模式,需要使用官方的导航守卫中的router.beforeEach

router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0)  
  next()
});