vue2-simplert
DemoGithub
Search
⌃K
Links
Comment on page

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​
Previous
Methods And Props
Next
Articles
Last modified 5yr ago