iView-admin experience

iView-admin experience

What is iView-admin

iView-admin is one of the members of the iView ecology. It is a set of front-end solutions for the back-end management system based on Vue with a front-end and back-end separation development model. iView-admin2.0 was refactored from the 1.x version and replaced with Webpack4.0 + Vue-cli3.0 as the basic development environment. Built-in logic functions commonly used in the development of back-end management systems, and out-of-the-box business components, are designed to allow developers to develop back-end management systems with minimal cost and reduce the amount of development.

Experience

I have been using iview-admin for more than a year (now iView-admin2.0, iView3.3.0). Although I have stepped on some pits when I use it, it still brings a lot of benefits in the process of using iView. There are abundant components and detailed documentation, and the development team updates functions, optimizes functions, and fixes bugs frequently.

The purpose of writing this article

Share the problems encountered in the process of use, share and record some experience. (Continually updated

A Modal component to customize the foot/head

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

  • This is one of the simplest dialogs, the code and picture examples are as above.
  • Click the OK or Cancel button and the dialog box will disappear. This is the default behavior of the Modal component. But there will be such a demand scenario: there is a form in the dialog box, click Confirm to verify the form, and send an asynchronous request, if the asynchronous request returns the form to submit successfully, then close the dialog box. At this time, you need to use the function of customizing the feet. Simply sort out what should be done:

    step

    1. Custom foot buttons
    2. Add events for the foot buttons
    3. Do different operations according to the return status of the asynchronous request, close or not close and prompt
  • The implementation is as follows
    <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;
                }
            })
        }
    }
 

  • By changing the value of modal1 that the dialog is bound to control its display/hide.