标签 VUE 下的文章

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

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

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

- 阅读剩余部分 -

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

- 阅读剩余部分 -

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

官方推荐的状态管理方案是 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()
});
  1. 1
  2. 2