# Basic

basic example with `title`, `msg`

  import vueAlert from '../src'

  document.querySelector('.basic')
    .addEventListener('click', e => {
      vueAlert({
        title: 'OverWatch',
        msg: 'The World Needs Heros',
      })
    })
    

# Align

We can align the text align direction

  document.querySelector('.align')
    .addEventListener('click', () => {
      vueAlert({
        title: 'OverWatch',
        msg: 'The World Needs Heros',
        align: 'center',
      })
    })
    

# Icon

Specify status icon via `icon` property

  import correctIcon from './correct.svg'

  document.querySelector('.icon')
    .addEventListener('click', () => {
      vueAlert({
        msg: 'The World Needs Heros',
        align: 'center',
        icon: correctIcon,
      })
    })
    

# Handler

Call a function after clicking the *yes btn*.

  document.querySelector('.handler')
    .addEventListener('click', () => {
      vueAlert({
        msg: 'The World Needs Heros',
        align: 'center',
        needNoBtn: true,
        onClickYesBtn() {
          console.log('Hello World')
        },
      })
    })
    

# Style

change some default styles

  document.querySelector('.style')
    .addEventListener('click', () => {
      vueAlert({
        title: 'OverWatch',
        msg: 'The World Needs Heros',
        style: {
          padding: '5px',
          yesBtnColor: '#4993e5',
        },
      })
    })