Biu - 网页提示组件

Basic Usage

import biu from 'biu.js'
biu('text you want to show')
biu('text with a type', {type: 'success'})
biu('do not auto hide me', {autoHide: false})

Advanced

// default options
biu('', {
  type: 'default',
  // auto-hide in specific timeout
  autoHide: true,
  timeout: 3000,
  // use font-awesome if you like!
  // closeButton: '',
  closeButton: 'x',
  // where to append element
  el: document.body,
  // how to align text
  align: 'center',
  // whether to pop up the element in vertial center
  pop: false,
  // trigger after element is hidden
  onHidden() {}
})

Biu in elements other than body

Trigger hide

const tip = biu('hello', {autoHide: false})

// when it's time to hide it, just call:
tip.hide()

Pop mode

biu('hello', {pop: true})

Call function after element is hidden but before destoried

biu('how is it?', {
  onHidden() {
    alert('bye!')
  }  
})

Prompt user

const template = `Enter you name: 
  OK!`

const tip = biu(template, {
  autoHide: false,
  onHidden() {
    const name = document.querySelector('#prompt').value
    biu(`hello ${name}`, {pop: true})
  }  
})

document.getElementById('ok').addEventListener('click', () => {
  tip.hide()
}, false)

Made with by EGOIST