Tips on iView 1.0

2017-03-16 本文已影响2220人云之外

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

问题总结

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

 <Menu :active-key.sync="activeKey" theme="dark" width="auto" @on-select="selectEvent">
     <div :class="{'layout-logo-left-small' : spanLeft < 5, 'layout-logo-left-big': !spanLeft < 5}"></div>
     <Menu-item key="1" :class="{'icon-center': spanLeft < 5}">
         <Icon type="ios-navigate-outline" :size="iconSize"></Icon>
         <span class="layout-text">数据预览</span>
     </Menu-item>
     <Menu-item key="2" :class="{'icon-center': spanLeft < 5}">
         <Icon type="ios-flask-outline" :size="iconSize"></Icon>
         <span class="layout-text">数据探索</span>
     </Menu-item>
     <Menu-item key="3" :class="{'icon-center': spanLeft < 5}">
         <Icon type="ios-cloud-upload-outline" :size="iconSize"></Icon>
         <span class="layout-text">任务提交</span>
     </Menu-item>
     <Menu-item key="4" :class="{'icon-center': spanLeft < 5}">
         <Icon type="ios-paw-outline" :size="iconSize"></Icon>
         <span class="layout-text">历史记录</span>
     </Menu-item>
 </Menu>

在使用了 vue-router 的 SPA 中，可以使用 this.$router.go() 替代 v-link ，这样做的好处是，在改变路由之前可以做一些事情，比如修改 <Menu> 的 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');
      }
  }

有时，基础布局包裹的组件需要触发路由更新，要更改当前 <Menu> 的 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'); // 将路由更新为修改页面
   }
}

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

<Modal
    :visible.sync="showTaskInfo"
    @on-cancel="diselectTask"
    >
    <p slot="header">
        <Icon :style="{fontSize: 16 + 'px', marginRight: 3 + 'px'}" type="information-circled"></Icon>
        <span style="font-size: 16px">任务信息</span>
    </p>
    <div v-if="showTaskInfo">
        <i-table :columns="taskColumn" :data="taskInfo" stripe border></i-table>
    </div>
    <div slot="footer" style="text-align: center">
        <i-button :style="{width: 22 + '%'}" type="primary" size="large" @click="openLog">查看日志</i-button>
        <i-button :style="{width: 22 + '%'}" type="primary" size="large" @click="editTask">修改任务</i-button>
        <i-button :style="{width: 22 + '%'}" type="primary" size="large" @click="resubmit" :loading="resub_loading">重新开始</i-button>
        <i-button :style="{width: 22 + '%'}" type="primary" size="large" @click="killTask" :disabled="!canBeKilled" :loading="loading && canBeKilled">杀死任务</i-button>      
    </div>
</Modal>

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

如何避免 <Upload> 组件在选中文件后自动开启上传：

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

  <Upload 
      action="//jsonplaceholder.typicode.com/posts/"
      :before-upload="beforeUploadHandler">
      <i-button type="ghost"><Icon type="upload"></Icon><span>上传文件</span></i-button>
  </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，值得一试。

Tips on iView 1.0

问题总结

猜你喜欢

热点阅读