vue 移动时间插件_VueDialog的移动Vue插件

vue 移动时间插件

vue2-对话框 (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

您可以使用它来制作多种对话框组件，例如Alert，Confirm，ActionSheet，Toast。还可以使用诸如AddressPicker，Loading和Scroller之类的组件。

如何使用 (How to use)

• NPM install the vue2-dialog plugin

  NPM安装vue2-dialog插件

npm install vue2-dialog --save

1.vue水疗 (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.脚本HTML (2.script html)

• directly write the script,in deed you have to insert the vue.js script firstly

  直接编写脚本，实际上必须先insert the vue.js脚本

<script src="dist/vue2-dialog.js"></script>

• use the components directly in your vue spa file or the Vue instance ,like

  直接在vue spa文件或Vue实例中使用组件，例如

<Alert />
<Confirm />
<Toast />
<Scroller />
...

选件 (Options)

1.警报 (1. Alert)

道具 (props)

alert [Object]

警报 [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

键	值	描述
标题	[String]或[HTML Tag]	警报标题
内容	[String]或[HTML Tag]	警报内容
AlertBtn	[String]	AlertBtn的警报
isShow	[Boolean]	是否显示警报

closeOnClickModal [Boolean]

closeOnClickModal [Boolean]

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

道具名称	描述	需要	默认
closeOnClickModal	[Boolean]是否通过单击遮罩模态来关闭警报	没有	假

发出事件 (emit events)

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

  ok当您单击alertBtn时，该组件将关闭。

演示代码 (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.确认 (2. Confirm)

道具 (props)

confirm [Object]

确认 [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

键	值	描述
标题	[String]或[HTML Tag]	确认标题
内容	[String]或[HTML Tag]	确认内容
cancelBtn	[String]	确认的cancelBtn
确认	[String]	确认的confirmBtn
isShow	[Boolean]	是否显示确认

closeOnClickModal [Boolean]

closeOnClickModal [Boolean]

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

道具名称	描述	需要	默认
closeOnClickModal	[Boolean]是否关闭通过单击蒙版模态确认	没有	假

发出事件 (emit events)

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

  单击ok ，单击确定，该组件将关闭。

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

  单击cancelBtn时cancel ，该组件将关闭。

演示代码 (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.吐司 (3. Toast)

道具 (props)

toast [Object]

吐司 [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	/

键	值	描述	需要	默认
时间	[Number]	控制吐司的时间	没有	500
类型	[String]	如何显示吐司，有12种	没有	默认
内容	[String]或[HTML Tag]	吐司的内容	是	/
isShow	[Boolean]	是否展示吐司	是	/

type

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

类型名称	描述
最佳	从顶部滑动
底部	从底部滑动
默认	在30％的窗口上显示
中间	在50％的窗口上显示
成功	显示带有成功图标
失败	显示失败图标
警告	显示带有警告图标
文本	显示很多话
加载圆	显示为圆形加载
装球	装球表演
加载波	显示波浪载荷
小型装载	迷你负载显示

演示代码 (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 (4. ActionSheet)

道具 (props)

actionSheet [Object]

actionSheet [Object]

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

键	值	描述
菜单	[Array - Object]	项目和ActionSheet的内容
isShow	[Boolean]	是否显示ActionSheet

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

菜单必须具有类似[label:'del',content:'delete the data']

cancelMode [Boolean]

cancelMode [Boolean]

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

道具名称	描述	需要	默认
cancelMode	[Boolean]是否显示取消项目	没有	假

closeOnClickModal [Boolean]

closeOnClickModal [Boolean]

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

道具名称	描述	需要	默认
closeOnClickModal	[Boolean]是否通过单击蒙版模态来关闭ActionSheet	没有	假

发出事件 (emit events)

• cancel when you click the cancel item (make sure you turn on the cancelMode).

  cancel当您单击取消项目(请确保您打开cancelMode)。

• Other emit events depends on the label of menu(actionSheet).Such as :

  其他的发射事件取决于menu(actionSheet)的标签。例如：

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.加载 (5. Loading)

道具 (props)

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

道具名称	描述	需要	默认
loading	[Boolean]是否显示正在加载	是	/

演示代码 (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 (6. AddressPicker)

道具 (props)

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

道具名称	描述	需要	默认
addressShow	[Boolean]是否显示AddressPicker	是	/

closeOnClickModal [Boolean]

closeOnClickModal [Boolean]

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

道具名称	描述	需要	默认
closeOnClickModal	[Boolean]是否通过单击遮罩模态来关闭AddressPicker	没有	假

发出事件 (emit events)

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

  ok当您单击确定按钮时，AddressPicker将关闭，作为事件参数返回的地址数据。

• cancel when you click the cancel button,the AddressPicker will close.

  单击“取消”按钮cancel时，AddressPicker将关闭。

演示代码 (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.

请转到AddressPicker查看详细信息。

7.滚动条 (7. Scroller)

Please go the v-scroller to see the details.

请前往v-scroller以查看详细信息。

翻译自: https://vuejsexamples.com/a-mobile-vue-plugin-for-vuedialog/

vue 移动时间插件