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

Table of Contents

Information Alert

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'info'
5
}
6
this.$refs.simplert.openSimplert(obj)
Copied!

Success Alert

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'success'
5
}
6
this.$refs.simplert.openSimplert(obj)
Copied!

Error Alert

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'error'
5
}
6
this.$refs.simplert.openSimplert(obj)
Copied!

Warning Alert

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'warning'
5
}
6
this.$refs.simplert.openSimplert(obj)
Copied!

Alert Without Title

1
let obj = {
2
message: 'Alert Message',
3
type: 'info'
4
}
5
this.$refs.simplert.openSimplert(obj)
Copied!

Alert With HTML Content

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

Alert With Custom Close Text

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'info',
5
customCloseBtnText: 'I am Close Button'
6
}
7
this.$refs.simplert.openSimplert(obj)
Copied!

Alert With Custom Close Class

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'info',
5
customCloseBtnClass: 'btn-warning'
6
}
7
this.$refs.simplert.openSimplert(obj)
Copied!

Alert With Custom Close Function

1
let closeFn = function() {
2
alert("I am Closed")
3
}
4
let obj = {
5
title: 'Alert Title',
6
message: 'Alert Message',
7
type: 'info',
8
onClose: closeFn
9
}
10
this.$refs.simplert.openSimplert(obj)
Copied!

Alert With Custom Class

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'info',
5
customClass: 'popup-custom-class'
6
}
7
this.$refs.simplert.openSimplert(obj)
Copied!

Alert With Custom Icon

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

Alert With Confirm Button

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'info',
5
useConfirmBtn: true
6
}
7
this.$refs.simplert.openSimplert(obj)
Copied!

Alert With Confirm Button Custom Text

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'info',
5
useConfirmBtn: true,
6
customConfirmBtnText: 'OK'
7
}
8
this.$refs.simplert.openSimplert(obj)
Copied!

Alert With Confirm Button Custom Class

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'info',
5
useConfirmBtn: true,
6
customConfirmBtnClass: 'btn-warning'
7
}
8
this.$refs.simplert.openSimplert(obj)
Copied!

Alert With Confirm Button Function

1
let confirmFn = function() {
2
alert("I am Confirmed")
3
}
4
let obj = {
5
title: 'Alert Title',
6
message: 'Alert Message',
7
type: 'info',
8
useConfirmBtn: true,
9
onConfirm: confirmFn
10
}
11
this.$refs.simplert.openSimplert(obj)
Copied!

Alert With Disable Overlay Click

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'info',
5
disableOverlayClick: true
6
}
7
this.$refs.simplert.openSimplert(obj)
Copied!

Alert With No Button Show

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'info',
5
hideAllButton: true
6
}
7
this.$refs.simplert.openSimplert(obj)
Copied!

Alert With onOpen Function

1
let openFn = function() {
2
alert("I am Confirmed")
3
}
4
let obj = {
5
title: 'Alert Title',
6
message: 'Alert Message',
7
type: 'info',
8
onOpen: openFn
9
}
10
this.$refs.simplert.openSimplert(obj)
Copied!

Alert With Close X

1
let obj = {
2
title: 'Alert Title',
3
message: 'Alert Message',
4
type: 'info',
5
showXclose: true
6
}
7
this.$refs.simplert.openSimplert(obj)
Copied!
vue2-simplert
Copyright © 2017 by Irfan Maulana
Last modified 3yr ago