iView-admin使用经验

什么是iView-admin

iView-admin是iView生态中的成员之一，是一套采用前后端分离开发模式，基于Vue的后台管理系统前端解决方案。iView-admin2.0脱离1.x版本进行重构，换用Webpack4.0 + Vue-cli3.0作为基本开发环境。内置了开发后台管理系统常用的逻辑功能，和开箱即用的业务组件，旨在让开发者能够以最小的成本开发后台管理系统，降低开发量。

使用体验

我使用iview-admin已经有一年多了（现在用iView-admin2.0，iView3.3.0），用的时候虽然踩过一些坑，但总体来说使用过程中还是带来了很大收益，iView它有丰富的组件，文档也详细，而且开发团队更新功能，优化功能，修复bug的比较频繁。

写这篇文章的目的

分享使用过程中遇到的问题分享记录一些经验。（持续更新

一 Modal组件自定义脚部/头部

    <Modal
        v-model="modal1"
        title="Common Modal dialog box title">
        <p>Content of dialog</p>
    </Modal>
复制代码

• 这是一个最简单的对话框，代码和图片示例如上。
• 点击确认或者取消按钮对话框会消失，这是Modal组件的默认行为。但是会有这样的需求场景：对话框中有一个表单，点击确认要验证表单，并发送异步请求，如果异步请求返回表单提交成功才关闭对话框。这时候就要用到自定义脚部的功能，简单梳理下应该怎么做：

  步骤

  1. 自定义脚部按钮
  2. 为脚部按钮添加事件
  3. 根据处理异步请求返回状态做不同的操作，关闭or不关闭并提示
• 实现如下

    <Modal
        v-model="modal1"
        title="Common Modal dialog box title">
        <div slot="footer">
            <Button type="primary" size="large" @click="locationModalOk">确定</Button>
        </div>
    </Modal>
    <!-- 方法 -->
    mtehods: {
        locationModalOk () {
            ayncFunction().then(res => {
                if (res.code === 200) {
                    this.modal1 = true;
                } else {
                    this.modal1 = false;
                }
            })
        }
    }
复制代码

• 通过改变对话框绑定的modal1这个值控制它的显示/隐藏。

转载于:https://juejin.im/post/5cce5c86f265da035f6fe8f7