Méthode d'implémentation du composant de fenêtre contextuelle dans le document Vue

王林

Libérer： 2023-06-20 18:39:36

original

6716 Les gens l'ont consulté

Vue est l'un des frameworks JavaScript les plus populaires grâce auquel des applications Web dynamiques peuvent être implémentées. Dans Vue, les fenêtres contextuelles sont l'un des composants couramment utilisés et peuvent être utilisées pour afficher des avertissements, des invites de réussite, des messages d'erreur, etc. Vue nous propose plusieurs méthodes pour implémenter des composants pop-up. Cet article en présentera plusieurs.

Méthode 1 : Utilisez le composant intégré de Vue.js

Vue.js est livré avec un composant, la boîte modale (Modal), qui est utilisée pour obtenir l'effet pop-up. L'implémentation de la boîte modale nécessite l'utilisation de certaines instructions des styles Vue.js et CSS.

Nous devons d'abord introduire le composant dans le composant Vue :

<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>

Copier après la connexion

Dans le modèle, nous entourons le composant à faire apparaître dans une balise <modal>, @close< /code >Écoutez l'événement de clôture du composant <code>modal et définissez la variable showModal sur false. A ce moment, vous pouvez fermer le composant modal en cliquant sur une zone vide ou en appuyant sur la touche Esc. <modal>标签中，@close监听modal组件关闭事件，将showModal变量设为false。此时，点击空白区域或者按下esc键都可以关闭modal组件。

接下来，我们需要在<script>中添加模态框的一些配置信息：

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

Copier après la connexion

以上配置可以根据需要进行自定义，用于控制模态框的显示和隐藏。

方法二：使用VueX管理弹窗组件

VueX是Vue.js中的一个状态管理器，它可以在全局管理数据状态。借助VueX，我们也可以实现弹窗组件的管理。

我们在Vuex中定义一个全局的state，用于控制弹窗的显示和隐藏：

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

Copier après la connexion

其中dialog包含了弹窗组件的一些信息，包括弹窗是否可见、弹窗消息、确定和取消标签等。当需要显示弹窗时，我们可以通过mutation来改变state中的数据状态：

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()
    }
  }
}

Copier après la connexion

在以上代码中，执行showDialog时，我们通过传递的参数来控制弹窗的显示和样式。执行hideDialog时，我们将弹窗关闭，并根据传入的参数执行回调函数。

方法三：单独实现弹窗组件

除了上述两种方法，我们还可以单独实现一个弹窗组件。首先，我们需要在Vue组件中定义一个弹窗组件模板：

<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>

Copier après la connexion

在以上代码中，我们利用<slot></slot>和<slot name="header"></slot>来传递弹窗内容和标题，同时还可以根据需要添加弹窗按钮。

接着，我们需要在<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>

Copier après la connexion

我们可以使用v-bind和v-on

Ensuite, nous devons ajouter quelques informations de configuration de la boîte modale dans <script> :

rrreee

La configuration ci-dessus peut être personnalisée selon les besoins pour contrôler l'affichage et l'affichage de la boîte modale. cacher.

Méthode 2 : Utilisez VueX pour gérer les composants contextuels🎜🎜VueX est un gestionnaire d'état dans Vue.js, qui peut gérer l'état des données de manière globale. Avec VueX, nous pouvons également gérer des composants pop-up. 🎜🎜Nous définissons un état global dans Vuex pour contrôler l'affichage et le masquage des fenêtres pop-up : 🎜rrreee🎜où dialog contient des informations sur le composant de la fenêtre pop-up, notamment si la fenêtre pop-up la fenêtre est visible, les messages de la fenêtre, les étiquettes OK et Annuler, etc. Lorsque nous devons afficher une fenêtre pop-up, nous pouvons modifier l'état des données dans l'état par mutation : 🎜rrreee🎜Dans le code ci-dessus, lors de l'exécution de showDialog, nous contrôlons l'affichage et l'affichage du fenêtre contextuelle via le style des paramètres transmis. Lors de l'exécution de hideDialog, nous fermons la fenêtre pop-up et exécutons la fonction de rappel en fonction des paramètres passés. 🎜🎜Méthode 3 : implémenter le composant de fenêtre contextuelle séparément🎜🎜En plus des deux méthodes ci-dessus, nous pouvons également implémenter un composant de fenêtre contextuelle séparément. Tout d'abord, nous devons définir un modèle de composant pop-up dans le composant Vue : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons <slot></slot> et <slot name= "header"></slot> pour transmettre le contenu et le titre de la fenêtre contextuelle, et vous pouvez également ajouter des boutons de fenêtre contextuelle si nécessaire. 🎜🎜Ensuite, nous devons définir certaines propriétés et méthodes du composant pop-up dans <script> : 🎜rrreee🎜Nous pouvons utiliser v-bind et v -on pour définir les propriétés et les méthodes du composant, introduire le composant dans le composant qui doit utiliser la fenêtre contextuelle, puis appeler le composant de fenêtre contextuelle en passant différents paramètres. 🎜🎜Résumé : 🎜🎜Dans Vue.js, il existe de nombreuses façons d'implémenter des composants contextuels. Vous pouvez rapidement implémenter des fenêtres contextuelles à l'aide du composant de boîte modale fourni avec Vue.js. Vous pouvez utiliser VueX pour contrôler globalement l'état du composant de fenêtre contextuelle. En implémentant le composant de fenêtre contextuelle séparément, vous pouvez personnaliser. le style et la fonction du composant de fenêtre contextuelle selon les besoins. Il est nécessaire de choisir une méthode de développement appropriée en fonction des besoins réels. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!