Skip to content

Latest commit

 

History

History
100 lines (76 loc) · 1.65 KB

README.md

File metadata and controls

100 lines (76 loc) · 1.65 KB

vue-alert-go

More Details in api docs :)

Some examples are following:

Basic

only title and msg.

import vueAlert from '../src'

vueAlert({
  title: 'OverWatch',
  msg: 'The World Needs Heros',
})

basic

Align

you can specify the align property to align text.

vueAlert({
  title: 'OverWatch',
  msg: 'The World Needs Heros',
  align: 'center', // add this!
})

align

Type && Icon

There are 2 types, each type has its icon. sccuess(ok icon) and error(error icon).

Besides, you can overrride the default icon, by specifying icon property.

// success
vueAlert({
  type: 'success', // or 'error'
  msg: 'The World Needs Heros',
  align: 'center',
})

icon

Handler

If you like, you can add some listeners for some events. e.g. onClickYesBtn.

vueAlert({
  msg: 'The World Needs Heros',
  align: 'center',
  needNoBtn: true,
  onClickYesBtn() {
    console.log('Hello World')
  }, // add this!
  
  // onClickNoBtn() {}
  // cbWhenClickMask() {}
})

click yes btn handler result

Style

Customize some default styles by style prop.

vueAlert({
  title: 'OverWatch',
  msg: 'The World Needs Heros',
  style: {
    box: {
      padding: '5px',
      borderRadius: '10px',
      bgColor: '#313131',
    },
    textColor: '#fff',
  },
})

Animate

There some 3 types of animation.

vueAlert({
  title: 'OverWatch',
  msg: 'The World Needs Heros',
  animate: 'bound', // fade, bound, slide
})