Heim > Web-Frontend > js-Tutorial > So verwenden Sie das Sweetalert2-Popup-Plug-In im Vue-Projekt

So verwenden Sie das Sweetalert2-Popup-Plug-In im Vue-Projekt

不言
Freigeben: 2018-07-16 17:37:43
Original
4843 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Verwendung des Sweetalert2-Popup-Plugins im Vue-Projekt vor. Jetzt kann ich ihn mit Ihnen teilen

1 ). Installieren Sie sweetalert2

npm install sweetalert2@7.15.1 --save
Nach dem Login kopieren

2). :

srcsrc/plugins/vue-sweetalert2.jspluginsvue-sweetalert2.js

import swal from 'sweetalert2'
export default {
  install: (Vue) => {
    // sweetalert2 的设置默认配置的方法
    swal.setDefaults({
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: 'rgb(140,212,245)',
      cancelButtonColor: 'rgb(193,193,193)'
    })
    // 添加全局方法
    Vue.swal = swal
    // 添加实例方法
    Vue.prototype.$swal = swal
  }
}
Nach dem Login kopieren

Hier kapseln wir sweetalert2 in ein Plug-in. Das Vue.js-Plug-in verfügt über eine öffentliche Methode

Der erste Parameter dieser Methode ist der Vue-Konstruktor. Nachdem wir als globale Methode und Instanzmethode hinzugefügt haben, können wir über und

installswal3) darauf zugreifen und das Plug-in Vue.swalthis.$swal vorstellen Um die
-Datei zu öffnen, führen Sie

ein und verwenden Sie sie (der einzeilige Kommentarteil stellt die Änderung dar):

src/main.jssrc/main.js./plugins/vue-sweetalert2

import Vue from 'vue'
import App from './App'
import router from './router'
import './directives'
import './components'
import store from './store'
// 引入插件
import VueSweetalert2 from './plugins/vue-sweetalert2'
// 使用插件
Vue.use(VueSweetalert2)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: &#39;<App/>&#39;
})
Nach dem Login kopieren

4) Exit hinzufügen Bestätigen Sie

, um die Datei

zu öffnen und die Methode


src/components/layouts/TheEntry.vue<🎜 zu ändern >

logout() {
  this.$swal({
    text: &#39;你确定要退出吗?&#39;,
    confirmButtonText: &#39;退出&#39;
  }).then((res) => {
    if (res.value) {
      this.$store.dispatch(&#39;logout&#39;)
    }
  })
}
Nach dem Login kopieren
src/components/layouts/TheEntry.vue Verwandte Empfehlungen: logout

So verwenden Sie die Elementformvalidierung in Vue

Tutorial zur Verwendung des Ebenen-Pop- up-Plug-in

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Sweetalert2-Popup-Plug-In im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage