So verwenden Sie Vue und Element-UI, um die Popup-Eingabeaufforderungsfunktion zu implementieren

So verwenden Sie Vue und Element-UI zum Implementieren der Popup-Eingabeaufforderungsfunktion

Vue ist ein progressives JavaScript-Framework zum Erstellen von Benutzeroberflächen, und Element-UI ist eine auf Vue basierende UI-Bibliothek, die eine Fülle von Komponenten und Funktionen bereitstellt . In der Entwicklung werden Popup-Fenster häufig verwendet, um Benutzer mit Informationen aufzufordern. In diesem Artikel wird erläutert, wie Vue und Element-UI zur Implementierung der Popup-Eingabeaufforderungsfunktion verwendet werden.

Zuerst müssen wir Vue und Element-UI installieren. Sie können über den folgenden Befehl installiert werden:

npm install vue
npm install element-ui

Nach Abschluss der Installation importieren Sie die relevanten Module und Stile von Vue und Element-UI in das Projekt:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Als nächstes müssen wir das Element-UI-Popup verwenden Komponente in der Vue-Komponente. Der Beispielcode lautet wie folgt:

<template>
  <div>
    <el-button type="primary" @click="showDialog">显示弹窗</el-button>
    <el-dialog :visible.sync="dialogVisible" title="提示" @closed="dialogClosed">
      <p>这是一个弹窗提示</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    dialogClosed() {
      console.log('弹窗关闭了');
    }
  }
}
</script>

Im obigen Code verwenden wir eine Schaltfläche in der Vorlage, um die Aktion zum Anzeigen des Popup-Fensters auszulösen. Das Popup-Fenster verwendet die Komponente <el-dialog> und bindet den Anzeigestatus des Popup-Fensters über den Befehl :visible.sync, dialogVisible Wird verwendet, um das Anzeigen und Ausblenden von Popup-Fenstern zu steuern. Durch Abhören des Ereignisses @closed können Sie einige Vorgänge ausführen, nachdem das Popup-Fenster geschlossen wurde. <el-dialog>组件，通过:visible.sync指令来绑定弹窗的显示状态，dialogVisible用来控制弹窗的显示与隐藏。通过监听@closed事件可以在弹窗关闭后执行一些操作。

在完成上述代码后，我们就可以在应用中正确地显示和关闭弹窗。通过调用this.dialogVisible = true来显示弹窗，调用this.dialogVisible = false

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue und Element-UI, um die Popup-Eingabeaufforderungsfunktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!