Tips on iView 1.0

前段时间试着用 iView 独立完成了公司的一套新系统的前端，在 @Aresn 大大的指导下还算顺利的爬了许多坑，记录一下。
iView 传送门：iView UI

问题总结

1. 组件的 active-key 属性用来控制当前处于激活状态的 Menu-Item （当 active-key 等于 key 的时候激活），所以应当使用双向绑定，将一个变量上去，不能使用常量�。

    
        
   
        
            
            数据预览
        
        
            
            数据探索
        
        
            
            任务提交
        
        
            
            历史记录
        
    
   

2. 在使用了 vue-router 的 SPA 中，可以使用 this.$router.go() 替代 v-link ，这样做的好处是，在改变路由之前可以做一些事情，比如修改

   的 active-key 。

     go (pathKey) {
         if (pathKey === '1') {
             this.$router.go('/preview');
         } else if (pathKey === '2') {
             this.showLayout = false; // 因为要接入一个第三方的 iFrame 所以隐藏了原有的各种功能菜单。
             this.spanRight = 24;
             this.$router.go('/zeppelin');
         } else if (pathKey === '3') {
             this.$router.go('/submit');
         } else if (pathKey === '4') {
             this.$router.go('/history');
         } else {
             this.$router.go('/index');
         }
     }
   

3. 有时，基础布局包裹的组件需要触发路由更新，要更改当前

   的 active-key，可以让子组件使用 dispatch 传递自定义事件并由基础布局组件捕获，再进行相关操作。

   // child component:
   editTask () {
       this.showTaskInfo = false; // 关闭任务信息弹窗。
       this.$dispatch('edit-task'); // 进入修改页面。
   },
   
   // father component:
   events: {
      'edit-task': function() {
          this.activeKey = '3'; // 更改活动的 menu-item
          this.go ('3'); // 将路由更新为修改页面
      }
   }
   

4. iView 用 包裹 时，要将 的 :visible 使用的控制变量，用 v-if 绑定到 上。（Tip: iView 会在渲染 时计算该组件的宽度，所以 i-table 要在 data 完成加载后再被显示出来。）

   
       
   
           
           任务信息
       
       
   
           
       
       
   
           查看日志
           修改任务
           重新开始
           杀死任务      
       
   
   

5. 一个 view 只能同时显示一个 ，并且，一个 component/view 不能同时引入两个以上封装了 的 component（会导致只有第一个被引入的 component 有效），正确的做法是将该 component/view 要用到的 统一放在一个 component 中，再引入这个 component 。
   

   
   
   
   

6. 如何避免 组件在选中文件后自动开启上传：

   • 使用其提供的 before-upload 钩子函数并返回 false ，上传的文件将以参数的形式传递到 before-upload 绑定的钩子函数中，在钩子函数中对文件进行操作即可。

       
           上传文件
       
     
        beforeUploadHandler(file) {
           this.$Loading.start();
           util.uploadFile(file).then((res) => {
               if(res) {
                   this.$Loading.finish();
                   this.$Message.success('上传文件成功。');                        
               } else {
                   this.$Loading.error();
                   this.$Message.error('上传文件失败。');
               }
           });
           return false;
       },
     
     

---

打个广告：iView 前几天发布了基于 Vue 2 的 2.0.0 - rc5 版本，传送门：iView 2，值得一试。