/ Dialog

A mobile Vue plugin for VueDialog

A mobile Vue plugin for VueDialog

vue2-dialog

This plugin is just only adapted for mobile.

You can use it to make several kinds of dialog components such as Alert,Confirm,ActionSheet,Toast.And you can also use the components like AddressPicker,Loading and Scroller

vue2-dialog

How to use

  • NPM install the vue2-dialog plugin
npm install vue2-dialog --save

1.vue spa

  • import the plugin and use (global use)
import {VueDialog} from 'vue2-dialog'
Vue.use(VueDialog)
  • import some components that you need and use (local use)
import {Scroller,Alert,Confirm} from 'vue2-dialog'
Vue.component(Scroller.name,Scroller)
Vue.component(Alert.name,Alert)
Vue.component(Confirm.name,Confirm)

2.script html

  • directly write the script,in deed you have to insert the vue.js script firstly
<script src="dist/vue2-dialog.js"></script>
  • use the components directly in your vue spa file or the Vue instance ,like
<Alert />
<Confirm />
<Toast />
<Scroller />
...

Options

1. Alert

props

alert [Object]

key value description
title [String] or [HTML Tag] title of the alert
content [String] or [HTML Tag] content of the alert
alertBtn [String] alertBtn of the alert
isShow [Boolean] whether show the alert

closeOnClickModal [Boolean]

prop name description required default
closeOnClickModal [Boolean]whether close alert by clicking the mask modal No false

emit events

  • ok when you click the alertBtn,the component will close.

DEMO Codes

//template
<Alert :alert="alert" :closeOnClickModal="true" @ok="ok" />

//script
export default {
	data(){
		return{
			alert:{
				title:'tip',
				content:'Hello World!'
				alertBtn:'Happy',
				isShow:false
			}
		}
	},
	methods:{
		ok(){
			console.log('I click the alertBtn~')
		}
	}
}

2. Confirm

props

confirm [Object]

key value description
title [String] or [HTML Tag] title of the Confirm
content [String] or [HTML Tag] content of the Confirm
cancelBtn [String] cancelBtn of the Confirm
confirmBtn [String] confirmBtn of the Confirm
isShow [Boolean] whether show the Confirm

closeOnClickModal [Boolean]

prop name description required default
closeOnClickModal [Boolean]whether close Confirm by clicking the mask modal No false

emit events

  • ok when you click the confirmBtn,the component will close.
  • cancel when you click the cancelBtn,the component will close.

DEMO Codes

//template
<Confirm :confirm="confirm" :closeOnClickModal="true" @ok="ok" @cancel="cancel" />

//script
export default {
	data(){
		return{
			confirm:{
				title:'tip',
				content:'Are you sure to close the window?'
				confirmBtn:'Yes,please',
				cancelBtn:"No,thanks"
				isShow:false
			}
		}
	},
	methods:{
		ok(){
			console.log('I click the confirmBtn~')
		},
		cancel(){
			console.log('I click the cancelBtn~')
		}
	}
}

3. Toast

toast

props

toast [Object]

key value description required default
time [Number] control the time of the Toast No 500
type [String] how to show Toast,has 12 types No default
content [String] or [HTML Tag] content of the Toast Yes /
isShow [Boolean] whether show the Toast Yes /

type

type name description
top slide from the top
bottom slide from the bottom
default show on the window of 30%
middle show on the window of 50%
succes show with success icon
fail show with fail icon
warn show with warn icon
text show with lots of words
loading-circle show with a circle loading
loading-ball show with a ball loading
loading-wave show with a wave loading
mini-loading show with a mini loading

DEMO Codes

//template
<Toast :toast="toast" />

//script
export default {
	data(){
		return{
			toast:{
				isShow:false,
				time:2000,
				content:'waiting to delete...',
				type:'mini-loading'
			}
		}
	}
}

4. ActionSheet

props

actionSheet [Object]

key value description
menu [Array - Object] items and the content of the ActionSheet
isShow [Boolean] whether show the ActionSheet

menu must has structure like [label:'del',content:'delete the data']

cancelMode [Boolean]

prop name description required default
cancelMode [Boolean]whether show the cancel item No false

closeOnClickModal [Boolean]

prop name description required default
closeOnClickModal [Boolean]whether close ActionSheet by clicking the mask modal No false

emit events

  • cancel when you click the cancel item (make sure you turn on the cancelMode).
  • Other emit events depends on the label of menu(actionSheet).Such as :
 actionSheet:{
	isShow:false,
	menu:[
		{label:'title',content:`<span style=color:blue>Sure?</span><br /><span style=color:#bbb;font-size:12px>You will delete the data...</span>`},
		{label:'remain',content:'No,i wanna remain'},
		{label:'del',content:`<p style=color:red>Yes,delete it!`}
	]
	/*
	 * ActionSheet has 2 emit evnets like 'remain' and 'del'.Attention! The label 'title' won't return emit event!
	 */
}

DEMO Codes

//template
	<ActionSheet 
		:actionSheet="actionSheet" 
		:cancelMode="cancelMode" 
		@del="del"
		@remain="remain"
		@cancel="cancel"
	/>

//script
export default {
	data(){
		return{
			actionSheet:{
				isShow:false,
				menu:[
					{label:'title',content:`<span style=color:blue>Sure?</span><br /><span style=color:#bbb;font-size:12px>You will delete the data...</span>`},
					{label:'remain',content:'No,i wanna remain'},
					{label:'del',content:`<p style=color:red>Yes,delete it!`}
				]
			}	
		}
	},
	methods:{
		del(){
			console.log('I delete the data~')
		},
		remain(){
			console.log('I remain the data~')
		},
		cancel(){
			console.log('I click the cancel item~')
		}
	}
}

5. Loading

props

prop name description required default
loading [Boolean]whether show the Loading Yes /

DEMO Codes

//template
	<Loading :loading="loading" />

//script
export default {
	data(){
		return{
			loading:false
		}
	},
	created(){
		this.loading = true;
		//request for data
		this.$http.post('test/productDetail',{}).then(
			res => {
				//if the data has been loaded. make the loading false
				...
				this.loading = false
			}
		).catch(
			err =>console.log(err)
		)
	}
}

6. AddressPicker

props

prop name description required default
addressShow [Boolean]whether show the AddressPicker Yes /

closeOnClickModal [Boolean]

prop name description required default
closeOnClickModal [Boolean]whether close AddressPicker by clicking the mask modal No false

emit events

  • ok when you click the sure button,the AddressPicker will close and return the address data as the event param.
  • cancel when you click the cancel button,the AddressPicker will close.

DEMO Codes

//template
	<AddressPicker 
		:addressShow="addressShow" 
		@ok="ok" 
		@cancel="addressShow=false" 
	/>

//script
export default {
	data(){
		return{
			addressShow:false
		}
	},
	methods:{
		ok(cont){
			this.addressShow = false
			alert(`You choose ${cont.province}-${cont.city}-${cont.town || ''})
		},
	}
}

Attention: if there is not town ,the return param doesn't inclucde 'town' key!

Please go the AddressPicker to see the details.

7. Scroller

Please go the v-scroller to see the details.

GitHub