What is the iView – admin

Iview-admin is one of the members of the iView ecosystem. It is a front-end solution of the back-end management system based on Vue, which adopts the development mode of front and back end separation. Iview-admin2.0 was reconstructed from the 1.x version and replaced with Webpack4.0 + vue-cli3.0 as the basic development environment. Built in the development of background management system commonly used logic functions, and out-of-the-box business components, designed to enable developers to develop background management system at the minimum cost, reduce the amount of development.

Experience with

I’ve been using iView-Admin for over a year now (iView-Admin2.0, iView3.3.0), and although I’ve had a few hicks with it, overall it’s been a great benefit. Iview has a rich set of components, is well documented, and the development team has updated and optimized its features. Bug fixes are frequent.

The purpose of writing this article

Share the problems encountered in the process of using share some experience. (Continuously updated

A Modal component custom foot/head

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

  • This is one of the simplest dialogs with code and picture examples above.
  • Click ok or cancel and the dialog disappears, which is the default behavior of the Modal component. But there is a requirement scenario where a dialog box has a form, click OK to validate the form, send an asynchronous request, and close the dialog box if the asynchronous request returns a successful form submission. This is the time to use the custom foot function, a brief overview of how to do:

    steps

    1. Custom foot buttons
    2. Add events for foot buttons
    3. Do different operations depending on the status returned from processing asynchronous requests, close or not close and prompt
  • To achieve the following
<Modal v-model="modal1" title="Common Modal dialog box title"> <div slot="footer"> <Button type="primary" size="large" @click="locationModalOk"> Confirm </Button> </div> </Modal> <! Mtehods: {locationModalOk () {ayncFunction(). Then (res => {if (res.code === 200) {this.modal1 = true; } else { this.modal1 = false; }}}})Copy the code

  • Control the display/hide of the dialog box by changing its binding modal1 value.