SoFunction
Updated on 2025-04-11

Teach you step by step to use Vue to achieve pop-up effects

Preface

Pop-up window effect is an interactive effect that is often used in web development. It can display a floating box when a user clicks a button or triggers an event, providing users with the opportunity to interact with the page. As a popular JavaScript framework, Vue provides a wealth of tools and methods to easily achieve pop-up effects. This article will introduce how to use Vue to achieve pop-up effects and provide specific code examples.

1. Create Vue component:

First, we need to create a Vue component to achieve pop-up effect. You can create a new file named as follows:

<template>
  <div v-if="visible" class="popup">
    <!-- Contents of pop-up windows -->
    <div class="popup-content">
      {{ content }}
    </div>
    <!-- Close button -->
    <button class="close-button" @click="closePopup">closure</button>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: ''
    }
  },
  methods: {
    closePopup() {
      this.$emit('close');
    }
  }
}
</script>

<style scoped>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
}

.close-button {
  margin-top: 10px;
}
</style>

In this component, we usev-ifCommands to control the display and hiding of pop-up windows.visibleAttributes are used to determine whether pop-up windows are displayed.contentProperties are used to set the content of pop-up windows. When the close button is clicked, it will be triggeredclosePopupMethod and pass$emitMethod to trigger aclosecustom events.

2. Use pop-up components in the parent component:

In the parent component, we can use pop-up components to achieve specific pop-up effects. Suppose we have a name calledThe parent component, the code is as follows:

<template>
  <div>
    <button @click="showPopup">Show pop-up window</button>
    <Popup :visible="popupVisible" :content="popupContent" @close="closePopup" />
  </div>
</template>

<script>
import Popup from './';

export default {
  components: {
    Popup
  },
  data() {
    return {
      popupVisible: false,
      popupContent: 'This is a pop-up window'
    }
  },
  methods: {
    showPopup() {
       = true;
    },
    closePopup() {
       = false;
    }
  }
}
</script>

In this parent component, we introduce the pop-up component we created earlier. Through the click event of the button, we can controlpopupVisibleProperties to show or hide pop-ups. When the pop-up window close button is clicked, it will triggerclosePopupMethod to close pop-up window.

3. Effect display and summary:

Run this Vue application in the browser. When clicking the "Show pop-up window" button, the pop-up window will appear, showing the content of "This is a pop-up window". When you click the close button of the pop-up window, the pop-up window will be hidden.

This article introduces how to use Vue to achieve pop-up effects and provides specific code examples. By writing pop-up components and using pop-up components in the parent component, we can easily achieve pop-up interaction effects in web pages. I hope this article can be helpful to you using Vue to achieve pop-up effects.

Attachment: Vue realizes the effect of drawer pop-ups

<template>
 <div>
 <div :class='{"itemCount":true,"leftT":!leftShow,"left":leftShow}'>//This writing method is dynamically obtaining style <div style="font-size:60px;">Tabular data</div>
 <div>//The following is the style inside the pop-up frame.  Put the style as you want (I'll use the table as an example here)  <el-table :data="tableData"
   style="width: 100%">
  <el-table-column prop="date"
    label="date"
    width="150">
  </el-table-column>
  <el-table-column label="Delivery Information">
  <el-table-column prop="name"
    label="Name"
    width="120">
  </el-table-column>
  <el-table-column label="address">
  <el-table-column prop="province"
     label="province"
     width="120">
  </el-table-column>
  <el-table-column prop="city"
     label="Downtown"
     width="120">
  </el-table-column>
  <el-table-column prop="address"
     label="address"
     width="300">
  </el-table-column>
  <el-table-column prop="zip"
     label="post code"
     width="120">
  </el-table-column>
  </el-table-column>
  </el-table-column>
  </el-table>
 </div>
 </div>
 </div>
</template>
export default {
 data(){
 leftShow:false
}
}
<script>
</script>

<style lang='less' scoped> //The following is the style set.  That's it. .itemCount { 
 position: absolute;
 top: 30%;
 background: yellowgreen;
 height:600px;
 padding: 10px;
 width:1000px;
 z-index: 2
 }
 .left { 
 left:0; 
 transition: left 0.5s;
 }
 .leftT {
 left:-1200px;
 transition: left 0.5s;

</style>

This is the end of this article about using Vue to achieve pop-up effect. For more related content on Vue pop-up effect implementation, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!