弹层
# Alert
Alert基于Dialog扩展而来
# Demo
<template>
<div>
<group>
<switch title="Toggle" :value.sync="show"></switch>
</group>
<alert
:show.sync="show"
title="congratulations"
:mask-transition="maskTransition"
:dialog-transition="dialogTransition"
@on-show="onShow"
@on-hide="onHide"
>
Message is sent
</alert>
</div>
</template>
<script>
import { Alert, Group, Switch } from '../components';
export default {
components: {
Alert,
Group,
Switch,
},
data () {
return {
show: false,
maskTransition: 'uik-fade',
dialogTransition: 'uik-dialog',
};
},
methods: {
onHide() {
console.log('on hide');
},
onShow() {
console.log('on show');
},
},
};
</script>
<style>
.uik-fade-transition {
opacity: 1;
transition: opacity linear 0.2s
}
.uik-fade-enter, .uik-fade-leave {
opacity: 0;
}
.uik-dialog-transition {
opacity: 1;
transition-duration: .4s;
transform: translate(-50%, -50%) scale(1)!important;
transition-property: transform, opacity!important;
}
.uik-dialog-enter, .uik-dialog-leave {
opacity: 0;
}
.uik-dialog-enter {
transform: translate(-50%, -50%) scale(1.185)!important;
}
.uik-dialog-leave {
transform: translate(-50%, -50%) scale(1)!important;
}
</style>
# Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| button-text | 可选，按钮文字 | String | OK |
| dialog-transition | 可选，弹窗动画(CSS3 自定义动画, 通过类名指定) | String | 无 |
| mask-transition | 可选，遮罩动画(CSS3 自定义动画, 通过类名指定) | String | 无 |
| show | 必选，是否显示，双向绑定 | Boolean | false |
| title | 必选，提示标题 | String | 无 |
# Slots
| 名字 | 说明 |
|---|---|
| 默认slot | 可选，提示消息内容(DOM 元素, 可根据具体业务自行定制) |
# Events
| 自定义事件名 | 参数 | 描述 |
|---|---|---|
| on-show | 无 | 显示时触发 |
| on-hide | 无 | 关闭时触发 |
# Confirm
Confirm基于Dialog扩展而来, 用于需要用户确认操作的情况
# Demo
<template>
<div>
<group>
<switch title="Toggle" :value.sync="show"></switch>
</group>
<confirm
:show.sync="show"
title="confirm deleting the item"
:mask-transition="maskTransition"
:dialog-transition="dialogTransition"
@on-cancel="onCancel"
@on-confirm="onConfirm"
>
<p style="text-align:center;">Are you sure?</p>
</confirm>
</div>
</template>
<script>
import { Confirm, Group, Switch } from '../components';
export default {
components: {
Confirm,
Group,
Switch,
},
data () {
return {
show: false,
maskTransition: 'uik-fade',
dialogTransition: 'uik-dialog',
};
},
methods: {
onCancel() {
console.log('on cancel');
},
onConfirm() {
console.log('on confirm');
},
},
};
</script>
<style>
.uik-fade-transition {
opacity: 1;
transition: opacity linear 0.2s
}
.uik-fade-enter, .uik-fade-leave {
opacity: 0;
}
.uik-dialog-transition {
opacity: 1;
transition-duration: .4s;
transform: translate(-50%, -50%) scale(1)!important;
transition-property: transform, opacity!important;
}
.uik-dialog-enter, .uik-dialog-leave {
opacity: 0;
}
.uik-dialog-enter {
transform: translate(-50%, -50%) scale(1.185)!important;
}
.uik-dialog-leave {
transform: translate(-50%, -50%) scale(1)!important;
}
</style>
# Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| cancel-text | 可选，取消按钮文字 | String | cancel |
| confirm-text | 可选，确认按钮文字 | String | confirm |
| dialog-transition | 可选，弹窗动画(CSS3 自定义动画, 通过类名指定) | String | 无 |
| mask-transition | 可选，遮罩动画(CSS3 自定义动画, 通过类名指定) | String | 无 |
| show | 必选，是否显示，双向绑定 | Boolean | false |
| title | 必选，提示标题 | String | 无 |
# Slots
| 名字 | 说明 |
|---|---|
| 默认slot | 可选，提示消息内容(DOM 元素, 可根据具体业务自行定制) |
# Events
| 自定义事件名 | 参数 | 描述 |
|---|---|---|
| on-confirm | 无 | 确认时触发 |
| on-cancel | 无 | 取消时触发 |
# Dialog
# Demo
<template>
<div>
<group>
<switch :value.sync="show" title="Toggle"></switch>
</group>
<dialog
:show.sync="show"
:mask-transition="maskTransition"
:dialog-transition="dialogTransition"
@on-show="onShow"
@on-hide="onHide"
class="dialog-demo"
>
<p class="dialog-title">I'm a Dialog.</p>
<div class="img-box">
<img src="https://open.fxiaoke.com/fscdn/img?imgId=group1/M00/02/04/rBEiBVfZFl6AOJ6eAABPHGYzNOo452.png" style="max-width:100%">
</div>
<span class="uik-close" @click="show=false"></span>
</dialog>
</div>
</template>
<script>
import { Dialog, Group, Switch } from '../components';
export default {
components: {
Dialog,
Group,
Switch,
},
data() {
return {
show: false,
maskTransition: 'uik-fade',
dialogTransition: 'uik-dialog',
};
},
methods: {
onHide() {
console.log('on hide');
},
onShow() {
console.log('on show');
},
},
ready () {
setTimeout(() => {
this.show = true;
}, 10);
},
};
</script>
<style lang="less">
.dialog-demo {
.weui_dialog{
border-radius: 8px;
padding-bottom: 8px;
}
.dialog-title {
line-height: 30px;
color: #666;
}
.img-box {
height: 350px;
overflow: hidden;
}
.uik-close {
margin-top: 8px;
margin-bottom: 8px;
}
}
.uik-fade-transition {
opacity: 1;
transition: opacity linear 0.2s
}
.uik-fade-enter, .uik-fade-leave {
opacity: 0;
}
.uik-dialog-transition {
opacity: 1;
transition-duration: .4s;
transform: translate(-50%, -50%) scale(1)!important;
transition-property: transform, opacity!important;
}
.uik-dialog-enter, .uik-dialog-leave {
opacity: 0;
}
.uik-dialog-enter {
transform: translate(-50%, -50%) scale(1.185)!important;
}
.uik-dialog-leave {
transform: translate(-50%, -50%) scale(1)!important;
}
</style>
# Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dialog-transition | 可选，弹窗动画(CSS3 自定义动画, 通过类名指定) | String | uik-dialog |
| mask-transition | 可选，遮罩动画(CSS3 自定义动画, 通过类名指定) | String | uik-fade |
| show | 是否显示，双向绑定 | Boolean | false |
# Slots
| 名字 | 说明 |
|---|---|
| 默认slot | 弹窗主体内容 |
# Events
| 自定义事件名 | 参数 | 描述 |
|---|---|---|
| on-show | 无 | 显示时触发 |
| on-hide | 无 | 关闭时触发 |
# Loading
# Demo
<template>
<div>
<group>
<switch title="Toggle" :value.sync="show" @on-change="delayHide"></switch>
</group>
<loading :show="show" :text="textContent"></loading>
</div>
</template>
<script>
import { Loading, Group, Switch } from '../components';
export default {
components: {
Loading,
Group,
Switch,
},
methods: {
delayHide () {
setTimeout(() => {
this.show = false;
}, 5000);
},
},
data () {
return {
show: false,
textContent: 'Hello world',
}
},
};
</script>
# Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| show | 是否显示，双向绑定 | Boolean | false |
| text | 提示文字，与默认slot作用一致 | String | Loading |
# Slots
| 名字 | 说明 |
|---|---|
| 默认slot | 提示文字，和text属性功能一致，若提示文字带有HTML标签，则选择slot方式 |
# Toast
# Demo
<template>
<div>
<group>
<switch title="默认提示" :value.sync="show1"></switch>
<switch title="文字提示" :value.sync="show2"></switch>
<switch title="提示取消" :value.sync="show3"></switch>
<switch title="提示禁止" :value.sync="show4"></switch>
<switch title="设置出现时间1s" :value.sync="show5"></switch>
<switch title="long text" :value.sync="show6"></switch>
</group>
<toast :show.sync="show1" >默认提示</toast>
<toast :show.sync="show2" type="text">处理成功</toast>
<toast :show.sync="show3" type="cancel">取消操作</toast>
<toast :show.sync="show4" type="warn">禁止操作</toast>
<toast :show.sync="show5" :time="1000">1s关闭</toast>
<toast :show.sync="show6" type="text" width="20em">Talk is cheap, show me the code.</toast>
</div>
</template>
<script>
import { Toast, Group, Switch } from '../components';
export default {
components: {
Toast,
Group,
Switch,
},
data () {
return {
show1: false,
show2: false,
show3: false,
show4: false,
show5: false,
show6: false,
};
},
};
</script>
# Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| show | 是否显示，双向绑定 | Boolean | false |
| time | 显示时间 | Number | 2000(ms) |
| transition | 过渡动画 | String | success |
| type | 图标类型，可选为success,text,cancel,warn | String | 无 |
| width | Toast宽度 | String | 7.6em |
尽管Toast组件提供了
cancel和warn类型，但不推荐使用，如果需要用户关注的通知推荐使用Alert或者Confirm组件
# Slots
| 名字 | 说明 |
|---|---|
| 默认slot | 提示文字 |