0.1.6 • Published 5 years ago
@mu-ui/mu-dialog v0.1.6
mu-dialog
dialog component & plugin for vue 2.x
Installation
yarn add @mu-ui/mu-dialog
Usage
// plugin
import Dialog from '@mu-ui/mu-dialog'
Vue.use(Dialog)
this.$dialog({
title: 'Title',
message: 'Message...',
opacity: 0.5,
single: true,
highlight: '#fd0',
btns: ['No', 'Yes'],
confirm() {
console.log('click confirm btn')
},
cancel() {
console.log('click cancel btn')
}
})
or
// component
import Dialog from '@mu-ui/mu-dialog'
Vue.component('mu-dialog', Dialog.Dialog)
// use v-model to control whether or not visible
<mu-dialog v-model="show" @confirm="confirm" @cancel="cancel">
<div class="dialog-main">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</mu-dialog>
Options
title
Type: String Default: 'Tip'
dialog title
message
Type: String Default: 'Are you sure?'
dialog message
btns
Type: Array Default: []
custom button text. if you pass only one element, then a single button which emit confirm event will be displayed. And the priority is higher than the single option
single
Type: Boolean Default: false
if true, only single button which emit confirm event will be displayed.
opacity
Type: Number Default: 0.1
opacity of the mask's backgroundColor
highlight
Type: String Default: #272639
text color of the confirm btn
pre
Type: Boolean Default: false
if true, the confirm btn will be placed in the first place