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

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]

closeOnClickModal [Boolean]

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]

closeOnClickModal [Boolean]

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

props

toast [Object]

type

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]

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

cancelMode [Boolean]

closeOnClickModal [Boolean]

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

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

closeOnClickModal [Boolean]

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