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 移动时间插件