Skip to content

Latest commit

 

History

History
147 lines (114 loc) · 3.63 KB

README.md

File metadata and controls

147 lines (114 loc) · 3.63 KB
Raw

Vue ZyDialog

A dialog component that provides customizable alert, confirm and prompt for your Vue.js apps.

Checkout the DEMO

Features

  • Promise based, friendly programming interface
  • Global and per call config
  • Sequential calls are queued automatically, while it's possible to override the priority manually
  • Zero styling dependency, theming (WIP) based on CSS
  • Mobile & desktop ready

Requirement

  • Vue.js 2.x

Browser Compatibility

  • Evergreen browsers
  • IE >= 10

Installation

With Yarn

yarn add vue-zydialog

Or with NPM

npm install vue-zydialog --save

Basic Example

Import ZyDialog in your main.js file

import ZyDialog from 'vue-zydialog'
Vue.use(ZyDialog)

Use it in your vue component

...
methods: {
  sayHello () {
    this.$alert('Hello world')
    .then(() => {
      this.$alert('World confirmed')
    })
  }
}
...

If you prefer the async/await flavour, you can do this

...
methods: {
  async sayHello () {
    await this.$alert('Hello world')
    this.$alert('World confirmed')
  }
}
...

...
methods: {
  async toConfirm () {
    if (await this.$confirm('Are you sure?')){
      // continue to process
    } else {
      // abort processing
    }
  }
}
...

Documentation

Options

You can pass an object of options when initializing ZyDialog or when calling alert, confirm and prompt. For example:

// Global options
import ZyDialog from 'vue-zydialog'
Vue.use(ZyDialog, {
  duration: 3000 // This will make all dialogs auto close after 3 seconds
})

// Per call options
// When calling with a string as the parameter, the string automatically goes to "title" field, or you can explicitly set the "title" and other options like this
...
methods: {
  async sayHello () {
    await this.$alert({
      title: 'Hello world',
      duration: 3000
    })
  }
}
...

Available options are as follows:

Field Type Default Notes
id String 'vue-zydialog-default' DOM id
className String '' additional DOM class name
maskColor String 'rgba(40, 40, 40, 0.6)' color of the mask area
override Boolean false current dialog overrides the queue and will be shown instantly, this will also clear the queue
parent String 'body' parent DOM node, needs a querySelector compatible string
transition String 'zy-dialog-transition' transition class name, refer to Vue.js Transitions Docs for defining your own transition
duration Number 0 milliseconds before auto close, set to 0 or any falsy value to disable auto close
wide Boolean false shows as a wide dialog
title String '' dialog title
message String '' dialog message
forceStay Boolean true set to true to prevent closing / canceling the dialog when mask area is clicked
lbHide Bolean false hide left button
rbHide Boolean false hide right button
lbLabel String '取消' left button label text
rbLabel String '确认' right button label text
actionAlt Function/null null callback function when left button and mask area is clicked
action Function/null null callback function when right button is clicked

Theme

Docs WIP for theming the visual part

License

MIT © mogita