Implementation method of pop-up window component in Vue document

Vue is one of the most popular JavaScript frameworks through which dynamic web applications can be implemented. In Vue, pop-up windows are one of the commonly used components and can be used to display warnings, success prompts, error messages, etc. Vue provides us with several methods to implement pop-up components. This article will introduce several of them.

Method 1: Use the built-in component of Vue.js

Vue.js comes with a component, the modal box (Modal), which is used to achieve the pop-up effect. The implementation of the modal box requires the use of some instructions of Vue.js and CSS styles.

We first need to introduce the component into the Vue component:

<template>
  <div>
    <!-- ... -->
    <modal v-if="showModal" @close="showModal = false">
      <!-- 弹窗内容 -->
    </modal>
    <!-- ... -->
  </div>
</template>

<script>
import Modal from 'vue-js-modal'

export default {
  components: {
    Modal
  },
  data() {
    return {
      showModal: false
    }
  }
}
</script>

In the template, we surround the component to be popped up in a <modal> tag,@closeListen to the modal component closing event and set the showModal variable to false. At this time, click on the blank area or press the esc key to close the modal component.

Next, we need to add some configuration information of the modal box in <script>:

Modal.config.defaultDialogConfirmText = '确定'
Modal.config.defaultDialogCancelText = '取消'
Modal.config.defaultDialogPromptTitle = '提示'
Modal.config.defaultDialogPromptPlaceholder = ''
Modal.config.defaultSnackbarDuration = 2000
Modal.config.defaultSpinnerType = 'circle'

The above configuration can be customized as needed, for Control the display and hiding of modal boxes.

Method 2: Use VueX to manage pop-up components

VueX is a state manager in Vue.js, which can manage data status globally. With VueX, we can also manage pop-up components.

We define a global state in Vuex to control the display and hiding of pop-up windows:

const state = {
  dialog: {
    visible: false,
    message: '',
    confirmLabel: '确定',
    cancelLabel: '取消',
    resolve: null,
    reject: null
  }
}

dialog contains some information about the pop-up window component, Including whether the pop-up window is visible, pop-up window message, OK and cancel labels, etc. When we need to display a pop-up window, we can change the data status in the state through mutation:

const mutations = {
  showDialog(state, payload) {
    state.dialog = {
      visible: true,
      message: payload.message,
      confirmLabel: payload.confirmLabel || '确定',
      cancelLabel: payload.cancelLabel || '取消',
      resolve: payload.resolve,
      reject: payload.reject
    }
  },
  hideDialog(state, payload) {
    state.dialog.visible = false
    if (payload.resolve) {
      payload.resolve()
    }
  }
}

In the above code, when executing showDialog, we control the pop-up window through the passed parameters display and style. When executing hideDialog, we close the pop-up window and execute the callback function based on the parameters passed in.

Method 3: Implement the pop-up window component separately

In addition to the above two methods, we can also implement a pop-up window component separately. First, we need to define a pop-up component template in the Vue component:

<template>
  <div class="popup" v-show="visible"> 
    <div class="mask"></div> 
    <div class="dialog"> 
      <slot name="header"></slot>
      <div class="content"> 
        <slot></slot>
      </div> 
      <div class="footer" v-show="showFooter"> 
        <button class="btn btn-primary" @click="ok" v-text="okText || '确定'"></button>
        <button class="btn btn-default" @click="cancel" v-text="cancelText || '取消'"></button>
      </div> 
    </div> 
  </div>
</template>

In the above code, we use <slot></slot> and < slot name="header"></slot> to pass the pop-up window content and title, and you can also add pop-up window buttons as needed.

Next, we need to define some properties and methods of the pop-up component in <script>:

<template>
  <div class="popup" v-show="visible"> 
    <div class="mask"></div> 
    <div class="dialog"> 
      <slot name="header"></slot> 
      <div class="content"> 
        <slot></slot> 
      </div> 
      <div class="footer" v-show="showFooter"> 
        <button class="btn btn-primary" @click="ok" v-text="okText || '确定'"></button>
        <button class="btn btn-default" @click="cancel" v-text="cancelText || '取消'"></button>
      </div> 
    </div> 
  </div>
</template>

<script>
export default {
  name: 'Popup',
  props: {
    visible: Boolean, //控制弹窗是否可见
    okText: String, //确定按钮文本
    cancelText: String, //取消按钮文本
    showFooter: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    ok() {
      this.$emit('ok')
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

We can use v-bind and v-on to set the properties and methods of the component, introduce the component into the component that needs to use the pop-up window, and then call the pop-up window component by passing different parameters.

Summary:

In Vue.js, there are many ways to implement pop-up components. You can quickly implement pop-up windows using the modal box component that comes with Vue.js. You can use VueX to globally control the status of the pop-up window component. By implementing the pop-up window component separately, you can customize the style and function of the pop-up window component as needed. It is necessary to choose an appropriate method for development based on actual needs.

The above is the detailed content of Implementation method of pop-up window component in Vue document. For more information, please follow other related articles on the PHP Chinese website!