Wie implementiert man ein Popup-Fenster im Stil einer Eingabeaufforderung in Vue?

Wie implementiert man ein Popup-Fenster im Stil einer Eingabeaufforderung in Vue?

In der Front-End-Entwicklung sind Popup-Boxen sehr häufige Komponenten, insbesondere Popup-Boxen, die der Eingabeaufforderung ähneln. Das Vue-Framework stellt uns viele Komponenten zur Verfügung, aber es gibt keine Komponente, die das Eingabeaufforderungs-Popup-Feld direkt implementiert. Wie implementiert man also ein Popup-Fenster ähnlich der Eingabeaufforderung in Vue? In diesem Artikel werden verschiedene Implementierungsmethoden kurz vorgestellt.

Methode 1: Verwenden Sie die integrierte $emit-Methode von Vue.

In Vue verfügt jede Vue-Instanz über eine integrierte $emit-Methode. Sie können damit Ereignisse anpassen und in der Komponente auf dieses Ereignis warten. Mit dieser Funktion können wir Popup-Boxen implementieren.

Zuerst können Sie in der Komponente, die das Popup-Feld öffnen muss, $emit verwenden, um ein Ereignis anzupassen. In diesem Ereignis können Sie die für das Popup-Feld erforderlichen Parameter übergeben:

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

Dann hinein Hören Sie sich in der übergeordneten Komponente dieses benutzerdefinierte Ereignis an und verwenden Sie das V-Modell, um den Wert des Eingabefelds in beide Richtungen zu binden:

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

Methode 2: Vuex-Statusverwaltung verwenden

Wenn das Popup-Feld mehrfach verwendet werden muss Komponenten und viele Parameter übergeben werden müssen, können Sie die Vuex-Statusverwaltung verwenden, um dies zu erreichen.

Fügen Sie zunächst einen neuen Status in Vuex hinzu, um den Status und die Parameter des Popup-Felds zu speichern:

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

Verwenden Sie dann in der Komponente, die das Popup-Feld öffnen muss, die Methode $store.commit, um Ändern Sie die Zustände isPromptShow und promptData:

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

In der Komponente des Popup-Felds können Sie mapState und mapMutations verwenden, um den Status in Vuex abzurufen und Mutationen zu übermitteln, wodurch die Ereignisreaktionslogik des Popup-Felds realisiert wird:

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

Ändern Sie den Status von isPromptShow in vuex

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

In der übergeordneten Komponente müssen Sie nicht nur den mapState von Vuex verwenden, um isPromptShow und promptData abzurufen, sondern Sie müssen auch mapActions verwenden, um die Methode zum Senden von Mutationen in Vuex aufzurufen:

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

Methode 3: Verwenden Sie eine Bibliothek eines Drittanbieters

Wenn Sie der Meinung sind, dass die beiden oben genannten Methoden zu mühsam sind, können Sie sie tatsächlich in Betracht ziehen. Verwenden Sie Bibliotheken von Drittanbietern, um aufforderungsähnliche Popup-Boxen zu implementieren. Zu den derzeit beliebten Bibliotheken von Drittanbietern gehören ElementUI, Vuetify, iView usw. Diese Bibliotheken bieten Popup-Komponenten ähnlich der Eingabeaufforderung, die sehr praktisch sind.

Zum Beispiel gibt es in der ElementUI-Komponentenbibliothek ein MessageBox-Popup-Feld:

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

Zusammenfassung

In diesem Artikel werden hauptsächlich drei Methoden zum Implementieren von aufforderungsähnlichen Popup-Feldern in Vue vorgestellt, nämlich die Verwendung von $emit und die Verwendung von Vuex Zustandsverwaltung und Verwendung von Bibliotheken von Drittanbietern. Jede Methode hat ihre eigenen Merkmale und anwendbaren Szenarien und muss entsprechend den spezifischen Umständen ausgewählt werden.

Das obige ist der detaillierte Inhalt vonWie implementiert man ein Popup-Fenster im Stil einer Eingabeaufforderung in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!