Comment implémenter une boîte contextuelle de type invite dans Vue ?

Comment implémenter une boîte contextuelle de type invite dans Vue ?

Dans le développement front-end, les boîtes contextuelles sont des composants très courants, en particulier les boîtes contextuelles similaires aux invites. Le framework Vue nous fournit de nombreux composants, mais aucun composant n'implémente directement la boîte de dialogue d'invite. Alors, comment implémenter une boîte contextuelle similaire à une invite dans Vue ? Cet article présentera brièvement plusieurs méthodes de mise en œuvre.

Méthode 1 : utilisez le $emit intégré de Vue

Dans Vue, chaque instance de Vue a une méthode $emit intégrée. Vous pouvez l'utiliser pour personnaliser les événements et écouter cet événement dans le composant. Nous pouvons utiliser cette fonctionnalité pour implémenter des boîtes contextuelles.

Tout d'abord, dans le composant qui doit faire apparaître la boîte pop-up, vous pouvez utiliser $emit pour personnaliser un événement. Dans cet événement, vous pouvez transmettre les paramètres requis par la boîte pop-up :

Vue.component('prompt', {
  template: `
    <div>
      <div v-if="visible" class="mask">
        <div class="prompt-box">
          <h3>{{title}}</h3>
          <input type="text" v-model="inputValue">
          <button @click="close('cancel')">取消</button>
          <button @click="close('ok')">确定</button>
        </div>
      </div>
    </div>
  `,
  props: {
    title: {
      type: String,
      default: '请输入'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    close(val) {
      if (val === 'ok') {
        this.$emit('ok', this.inputValue)
      } else {
        this.$emit('cancel')
      }
    }
  }
})

Puis dans. le composant parent, écoutez cet événement personnalisé et utilisez v-model pour lier dans les deux sens la valeur de la zone de saisie :

<template>
  <div>
    <button @click="showPrompt = true">弹出提示框</button>
    <prompt title="请输入内容" :visible="showPrompt" @cancel="showPrompt = false" @ok="handleOk"></prompt>
  </div>
</template>
 
<script>
import Prompt from './prompt.vue'
export default {
  components: {
    Prompt
  },
  data() {
    return {
      showPrompt: false,
      inputValue: ''
    }
  },
  methods: {
    handleOk(val) {
      this.showPrompt = false
      this.inputValue = val
    }
  }
}
</script>

Méthode 2 : Utiliser la gestion de l'état Vuex

Si la boîte contextuelle doit être utilisée dans plusieurs composants et doit transmettre de nombreux paramètres, vous pouvez utiliser la gestion de l'état Vuex pour y parvenir.

Tout d'abord, ajoutez un nouvel état dans Vuex pour stocker l'état et les paramètres de la boîte contextuelle :

state: {
  isPromptShow: false,
  promptData: {
    title: '',
    inputPlaceholder: '',
    inputValue: ''
  }
}

Ensuite, dans le composant qui doit faire apparaître la boîte contextuelle, utilisez la méthode $store.commit pour modifiez les états isPromptShow et promptData :

methods: {
  showPrompt() {
    this.$store.commit('setPromptData', {
      isPromptShow: true,
      promptData: {
        title: '请输入',
        inputPlaceholder: '请输入内容',
        inputValue: ''
      }
    })
  }
}

Dans le composant de la boîte contextuelle, vous pouvez utiliser mapState et mapMutations pour obtenir le statut dans Vuex et soumettre des mutations, réalisant ainsi la logique de réponse aux événements de la boîte contextuelle :

<template>
  <div v-if="isPromptShow" class="mask">
    <div class="prompt-box">
      <h3>{{promptData.title}}</h3>
      <input type="text" :placeholder="promptData.inputPlaceholder" v-model="promptData.inputValue">
      <button @click="closePrompt('cancel')">取消</button>
      <button @click="closePrompt('ok')">确定</button>
    </div>
  </div>
</template>
 
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['isPromptShow', 'promptData'])
  },
  methods: {
    ...mapMutations({
      setPromptData: 'SET_PROMPT_DATA'
    }),
    closePrompt(val) {
      if (val === 'ok') {
        this.$emit('ok', this.promptData.inputValue)
      } else {
        this.$emit('cancel')
      }
      this.setPromptData({ isPromptShow: false })
    }
  }
}
</script>

Changez le statut de isPromptShow dans vuex

mutations: {
  SET_PROMPT_DATA(state, data) {
    state.isPromptShow = data.isPromptShow
    state.promptData = data.promptData
  }
}

Dans le composant parent, non seulement vous devez utiliser mapState de Vuex pour obtenir isPromptShow et promptData, et vous devez également utiliser mapActions pour appeler la méthode de soumission des mutations dans Vuex :

<template>
  <div>
    <button @click="showPrompt">弹出提示框</button>
    <prompt v-if="isPromptShow" @ok="handleOk" @cancel="closePrompt"></prompt>
  </div>
</template>
 
<script>
import Prompt from './prompt.vue'
import { mapState, mapActions } from 'vuex'
export default {
  components: {
    Prompt
  },
  computed: {
    ...mapState(['isPromptShow', 'promptData'])
  },
  methods: {
    ...mapActions(['setPromptData']),
    showPrompt() {
      this.setPromptData({
        isPromptShow: true,
        promptData: {
          title: '请输入',
          inputPlaceholder: '请输入内容',
          inputValue: ''
        }
      })
    },
    closePrompt() {
      this.setPromptData({ isPromptShow: false })
    },
    handleOk(val) {
      console.log(val)
      this.setPromptData({ isPromptShow: false })
    }
  }
}
</script>

Méthode 3 : Utilisez une bibliothèque tierce

Si vous pensez que les deux méthodes ci-dessus sont trop gênantes, vous pouvez réellement l'envisager. Utilisez des bibliothèques tierces pour implémenter des boîtes contextuelles de type invite. Les bibliothèques tierces actuellement populaires incluent ElementUI, Vuetify, iView, etc. Ces bibliothèques fournissent des composants pop-up similaires à prompt, qui sont très pratiques.

Par exemple, il existe une boîte contextuelle MessageBox dans la bibliothèque de composants ElementUI :

this.$confirm('内容', 'title', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  // 点击确定回调
}).catch(() => {
  // 点击取消回调
})

Résumé

Cet article présente principalement trois méthodes pour implémenter des boîtes contextuelles de type invite dans Vue, à savoir en utilisant $emit, en utilisant Vuex gestion de l'état et utilisation de bibliothèques tierces. Chaque méthode a ses propres caractéristiques et scénarios applicables, et doit être sélectionnée en fonction de circonstances spécifiques.

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!