Vue全家桶实践（二）---iView

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

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中，通过$ 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

Vue全家桶实践（二）---iView

iView

猜你喜欢