前段时间试着用 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，值得一试。
