جلسه ۱۱ – نوتفیکیشن ساده در ویو جی اس با SweetAlert2

تابع alert() در شی Window جاوا اسکریپت برای پیغام در دسرس است ولی برای بیشتر موقعییت ها زیاد مناسب نیست عمد دلیلش م اینهه که خییلییی زشت و راهی ام برای تغییرش وجود نداره. خوشبختانه یک کتابخونه محبوب به نامSweetAlert 2 وجو داره که هم ریسپانسیو و هم قابلیت تغییر و دسرسپذیری خوبی داره .
خب بریم نحوه نصب و راه اندازی به همراه چند مثال رو داشته باشیم

مسیر نصب

https://unpkg.com/sweetalert2@7.22.0/dist/sweetalert2.all.js

بعد از قرار دادن SweetAlert2 درون برنامه خودتون نیاز که اونو import کنید ، ما در اینحا در main.js قرار می دیم

import Vue from 'vue'
import VueSweetalert2 from 'vue-sweetalert2';
import App from './App.vue';
Vue.use(VueSweetalert2);
new Vue({
el: '#app',
render: h => h(App)
});

حالا در main app شما می تونیید به متد های Sweetalert2 با استفاده از تابع $swal دسرسی داشته باشید :
<template>
<!-- button used to trigger event -->
<button v-on:click="alertDisplay">Click me</button>
</template>
<script>
export default {
data() {
return {
text: ''
}
},
methods: {
alertDisplay() {
// $swal function calls SweetAlert into the application with the specified configuration.
this.$swal('Heading', 'this is a Heading', 'OK');
}
}
}
<script>

ک مانند شکل زیر میشه

موفق باشید

باماهمراه باشید

local_offerevent_note خرداد ۱۹, ۱۳۹۷

account_box ali kaviani


local_offer

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *