Vue全家桶实践(二)---iView

最近公司要重写运营管理系统,不想再维护之前的backbone了,赶紧要求前端整个重写。重开新坑,用了两周多撸出了第一版,收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来,也算前端梳理一下思路。

相关博客:

  1. Vue全家桶实践(一)—vue-cli
  2. Vue全家桶实践(二)—iView
  3. Vue全家桶实践(三)—axios
  4. Vue全家桶实践(四)—vue-router
  5. Vue全家桶实践(五)—渲染函数&JSX
  6. Vue全家桶实践(六)—自定义指令(directive)

iView

参考资料:官方文档

快速开发的时候,有现成的UI组件是很好的,很多时候产品只是做个大概底稿,业务又要求快速上线,所以在开发的时候使用iView中的各种组件,不仅能省去很多常用逻辑,还能让界面风格统一美观。

总的来说,iView的官方文档是很友好的,各种示例都很清楚。这里就不赘述了,主要列几个在使用过程中遇到的坑,还有一些常用的配置。

常用配置

整个项目中会有一写常用的组件,比如Message,Notice,LoadingBar等,这些组件在不同的界面使用,但是我们希望他们的行为保持一致,并且能自定义。这部分可以一起写在main.js文件中:

// main.js
// iView 相关的全局配置
// message 配置
iView.Message.config({
  top: 50,
  duration: 1.5
})
// notice 配置
iView.Notice.config({
  top: 50,
  duration: 3
})
// LoadingBar 配置
iView.LoadingBar.config({
  // color: '#5cb85c',
  // failedColor: '#f0ad4e',
  height: 3
})

另外,loadingBar要配合vue-router的钩子使用,简单的示例:

// router/index.js
// 路由钩子,做一些跳转的配置
router.beforeEach((to, from, next) => {
  // LoadingBar
  // 除了登录页,其他都会有Loadingbar
  if (to.name !== 'Login') {
    iView.LoadingBar.start()
  }
  next()
})
// 可以根据跳转到的页面,显示不同颜色的loadingBar
router.afterEach(route => {
  // LoadingBar
  // 到登录页没有loadingbar,到404是红色loadingBar
  if (route.name === 'Login') {
    return
  }
  if (route.name === '404') {
    iView.LoadingBar.error()
    return
  }
  iView.LoadingBar.finish()
})

router编程式导航时改变Menu的active样式

使用iview的Menu组件做导航条,当鼠标点击导航条跳转的时候,会有当前active的样式。但是我们在业务中肯定会有使用编程式导航的跳转,这时候也要同时改变成相应的项目active。这时候就在Menu组件中监听router变化,取得当前url,然后在 nextTick n e x t T i c k 中 , 通 过 refs找到navbar,给currentActiveName 赋值即可。

watch: {
    // 监听路由,路由改变时更新navbar的active项
    '$route' (to, from) {
      let acvtie = to.fullPath
      this.$nextTick(() => {
        this.$refs.navbar.currentActiveName = acvtie
      })
    }
  },

iView部分组件的自定义事件无法正确触发

比如Input组件的on-enter事件就无效。这时候可以使用@keyup.native.enter来实现。

在Modal弹框组件中加入表单,提交关闭的问题

在Modal组件中加入表单,点击确定的时候要校验表单,如果校验通过,则Modal自动关闭;若校验失败,则Modal不关闭。感觉这里的设计有点问题,要用下边的方式来实现:

//使用v-modal替代value双向绑定,来控制Modal是否显示。
// 给Modal设置loading属性为true,这样点击确定按钮时,按钮会显示loading状态
// 开启loading时,Modal需要手动设置visible来关闭,而不是点击确定自动关闭。
<Modal v-model="modalShow" :loading="loading"></Modal>
//点击确定后若想保持显示,则如下写法。
// 因为loading为true,点击确定Modal就不会自动关闭了。但是要记得
//在nxetTick中把loading重新设置为true。不然确定按钮一直是loading状态
//无法再次点击。
this.loading= false
this.$nextTick(() => {
  this.loading= true
})
//当想要点击消失的时候,直接把modalShow置为false即可。
this.modalShow= false
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页