Vue-Cli中如何正确使用自定义的外部纯js方法@小四

在实际开发中，我们会遇到这样的一种场景，比如说，在我们的项目中，有一个简单的不掺杂任何业务逻辑的交互效果，而且是多个组件会用到，那这个时候我们就很容易想到创建一个utils目录，然后把这个交互效果js文件放进去，这个时候问题来了，该如何使用呢？

1. 以下效果是我要实现的

nav.gif

在点击banner右侧的“菜单”图标，会出现一个下拉式的导航，而且是多个视图会使用到，并且不掺杂任何业务逻辑

• 第一步，我在vue-cli根目录下创建一个目录名称为utils，然后再创建一个js文件nav.js，接下来就是再这个文件里编写咱们的交互效果，巴拉...巴拉...，编写完成导出

export function nav() {
  alert(1)
  // 层
  ......
  ...
  假装有代码...O(∩_∩)O哈哈~
  ......
  }
}

• 第二步，在Vue-cli的入口文件main.js中导入

import { nav } from './utils/nav' // 导入
Vue.prototype.$nav = nav // 挂载到Vue实例原型上

• 第三步，在哪个视图中使用，那么就在哪个组件对应的生命周期中调用就可以了

  mounted () { // 我需要挂在完成，因为我要获取DOM节点
    this.$nav()
  }

代码封装精简且能够实现咱们的需求，永远不要忘记，优雅。如果你还有什么更好的解决方案，不妨留言@我...

同学们听我说.jpg