Example Code
All code example using same HTML template :
<simplert :useRadius="true"
:useIcon="true"
ref="simplert">
</simplert>
See demo page for check interface result.

Table of Contents

Information Alert

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info'
}
this.$refs.simplert.openSimplert(obj)

Success Alert

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'success'
}
this.$refs.simplert.openSimplert(obj)

Error Alert

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'error'
}
this.$refs.simplert.openSimplert(obj)

Warning Alert

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'warning'
}
this.$refs.simplert.openSimplert(obj)

Alert Without Title

let obj = {
message: 'Alert Message',
type: 'info'
}
this.$refs.simplert.openSimplert(obj)

Alert With HTML Content

let obj = {
title: 'Alert Title',
message: '<span style="color:red;">I am HTML</span>',
type: 'info'
}
this.$refs.simplert.openSimplert(obj)

Alert With Custom Close Text

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
customCloseBtnText: 'I am Close Button'
}
this.$refs.simplert.openSimplert(obj)

Alert With Custom Close Class

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
customCloseBtnClass: 'btn-warning'
}
this.$refs.simplert.openSimplert(obj)

Alert With Custom Close Function

let closeFn = function() {
alert("I am Closed")
}
let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
onClose: closeFn
}
this.$refs.simplert.openSimplert(obj)

Alert With Custom Class

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
customClass: 'popup-custom-class'
}
this.$refs.simplert.openSimplert(obj)

Alert With Custom Icon

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
customIconUrl: 'https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-1/128/face-sad-512.png'
}
this.$refs.simplert.openSimplert(obj)

Alert With Confirm Button

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
useConfirmBtn: true
}
this.$refs.simplert.openSimplert(obj)

Alert With Confirm Button Custom Text

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
useConfirmBtn: true,
customConfirmBtnText: 'OK'
}
this.$refs.simplert.openSimplert(obj)

Alert With Confirm Button Custom Class

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
useConfirmBtn: true,
customConfirmBtnClass: 'btn-warning'
}
this.$refs.simplert.openSimplert(obj)

Alert With Confirm Button Function

let confirmFn = function() {
alert("I am Confirmed")
}
let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
useConfirmBtn: true,
onConfirm: confirmFn
}
this.$refs.simplert.openSimplert(obj)

Alert With Disable Overlay Click

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
disableOverlayClick: true
}
this.$refs.simplert.openSimplert(obj)

Alert With No Button Show

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
hideAllButton: true
}
this.$refs.simplert.openSimplert(obj)

Alert With onOpen Function

let openFn = function() {
alert("I am Confirmed")
}
let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
onOpen: openFn
}
this.$refs.simplert.openSimplert(obj)

Alert With Close X

let obj = {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
showXclose: true
}
this.$refs.simplert.openSimplert(obj)
vue2-simplert
Copyright © 2017 by Irfan Maulana
Copy link
On this page
Table of Contents
Information Alert
Success Alert
Error Alert
Warning Alert
Alert Without Title
Alert With HTML Content
Alert With Custom Close Text
Alert With Custom Close Class
Alert With Custom Close Function
Alert With Custom Class
Alert With Custom Icon
Alert With Confirm Button
Alert With Confirm Button Custom Text
Alert With Confirm Button Custom Class
Alert With Confirm Button Function
Alert With Disable Overlay Click
Alert With No Button Show
Alert With onOpen Function
Alert With Close X