VUE learning book el-dialog usage example

Preface

el-dialog is an important component in the Element UI library for creating popup boxes in Vue applications. It provides a practical set of properties and events, allowing us to easily implement various pop-up functions. This article will introduce in detail how to use the el-dialog component and examples to help you better understand how to use it in a real project.

Introduction to el-dialog

el-dialog is a very flexible pop-up box component, which can implement pop-up boxes of various styles through simple configuration. The el-dialog component is based on the Element UI library, so you need to make sure that the Element UI library has been introduced correctly before using it.

el-dialog attribute

el-dialog provides a number of properties for controlling the appearance and behavior of pop-up boxes. Here are some commonly used properties:

• 📒visible: Controls whether the pop-up box is visible.
• 📒title: The title of the pop-up box.
• 📒width: The width of the pop-up box.
• 📒fullscreen: Whether to display full screen.
• 📒append-to-body: Attach the pop-up window to the body.
• 📒close-on-click-modal: Click the mask to close the pop-up window.
• 📒close-on-press-escape: Press the Esc key to close the pop-up window.
• 📒show-close: Whether to display the close button.
• 📒draggable: Whether it can be dragged.
• 📒resizable: Whether it can be resized.
  In addition to the above attributes, el-dialog also supports some custom events, such as: @open, @close, etc. These events can be triggered in component instances using the $emit method.

el-dialog example

Here is a simple el-dialog example showing how properties and events can be used to control the behavior and style of pop-up boxes:

Add the el-dialog component to the template:
html

<template>  
  <div>  
    <el-button @click="dialogVisible = true">Open the pop-up box</el-button>  
    <el-dialog :="dialogVisible" title="hint" width="30%" @close="dialogVisible = false">  
      <p>This is a piece of information</p>  
      <div slot="footer" class="dialog-footer">  
        <el-button @click="dialogVisible = false">Pick remove</el-button>  
        <el-button type="primary" @click="dialogVisible = false">Confirm Certainly</el-button>  
      </div>  
    </el-dialog>  
  </div>  
</template>

Define data and methods in scripts:

export default {  
  data() {  
    return {  
      dialogVisible: false,  
    };  
  },  
};

In this example, we control the value of dialogVisible by clicking the button, thereby opening or closing the pop-up box. Properties are used for the visibility of two-way binding popup boxes. The title attribute is used to set the title of the pop-up box. The width property is used to set the width of the pop-up box. The @close event is used to listen for pop-up box close event and set dialogVisible to false when closed. In the content section of the pop-up box, we add text through the p tag. In the bottom toolbar, we define the position of the bottom button through slot="footer" and add the Cancel and OK button through el-button. Note that in order to correctly display the bottom toolbar, we need to add a div element after the pop-up content as the container for the bottom toolbar and use slot="footer" to specify the slot name. At the same time, we can also add other properties and events as needed to control the behavior and style of the pop-up box. For example, we can set the fullscreen attribute to true to display the popup box in full screen, or set the draggable attribute to true to make the popup box draggable. At the same time, we can also implement some specific functions by triggering custom events, such as triggering the @open event when the pop-up box is opened to perform some operations. In short, the el-dialog component provides rich properties and events, allowing us to flexibly implement various styles of pop-up box functions. In actual projects, we can configure and use them according to specific needs.

Parent-child component value transfer example

When the el-dialog component is declared in a child component, the parent component and the child component can pass parameters to each other through props and events. Here is a code example:

• Parent component():

html

<template>  
  <div>  
    <child-component ref="childDialog" :initial-message="parentMessage" @child-event="handleChildEvent"></child-component>  
    <el-button @click="openChildDialog">Open the pop-up box of the subcomponent</el-button>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from parent'  
    };  
  },  
  methods: {  
    openChildDialog() {  
      // Access the child component instance through $refs and call the openDialog method to open the pop-up box      this.$();  
    },  
    handleChildEvent(childMessage) {  
      // Handle events and parameters passed by subcomponents      ('Received message from child:', childMessage);  
      // Other logic can be executed here or the data of the parent component is updated    }  
  }  
};  
</script>

• Subcomponent():

html

<template>  
  <div>  
    <el-dialog :="dialogVisible" title="Pop-up box for subcomponents">  
      <p>{{ message }}</p>  
    </el-dialog>  
  </div>  
</template>  
  
<script>  
export default {  
  props: {  
    initialMessage: {  
      type: String,  
      default: ''  
    }  
  },  
  data() {  
    return {  
      dialogVisible: false, // Control the display and hide of pop-up boxes      message:  // Receive parameters passed by the parent component during initialization    };  
  },  
  methods: {  
    openDialog() {  
      // Open the pop-up box and trigger the parent component's event passing parameters       = true;  
      this.$emit('child-event', 'Hello from child');  
    },  
    closeDialog() {  
      // Close the pop-up box       = false;  
    }  
  },  
  watch: {  
    initialMessage(newValue) {  
      // Listen to the parameters passed by the parent component and update the data of the child component       = newValue;  
    }  
  }  
};  
</script>

In the parent component, we use the ref attribute to assign a reference name childDialog to the child component, and pass the parent component's data parentMessage to the child component through: initial-message="parentMessage". At the same time, a button is added to the template of the parent component. When clicking the button, the openChildDialog method will be triggered, the child component instance will be accessed through $refs, and the child component's openDialog method will be called to open the pop-up box. In the parent component's method handleChildEvent, we handle events and parameters passed by the child component, and can execute other logic here or update the parent component's data. In the child component, we define a props property initialMessage to receive the parameters passed by the parent component and assign the parameters to the child component's message data attributes at initialization. In the openDialog method of the child component, we open the pop-up box and trigger a custom event child-event through $emit, passing the parameter 'Hello from child' to the parent component. At the same time, we use :="dialogVisible" to bind the display status of the pop-up box. In this way, when the value of dialogVisible changes, the display status of the pop-up box will also change accordingly.

Summarize

This is the article about the use of el-dialog in VUE learning book. For more related content on using VUE el-dialog, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!