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

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

不言
不言Original
2018-07-16 17:37:434787Durchsuche

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

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

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

4) Exit hinzufügen Bestätigen Sie

, um die Datei

zu öffnen und die Methode


src/components/layouts/TheEntry.vue

logout() {
  this.$swal({
    text: &#39;你确定要退出吗?&#39;,
    confirmButtonText: &#39;退出&#39;
  }).then((res) => {
    if (res.value) {
      this.$store.dispatch(&#39;logout&#39;)
    }
  })
}
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!

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