You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

122 lines
3.5 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="u-tips" :class="['u-' + type, isShow ? 'u-tip-show' : '']" :style="{
top: navbarHeight + 'px',
zIndex: uZIndex
}">{{ title }}</view>
</template>
<script>
/**
* topTips 顶部提示
* @description 该组件一般用于页面顶部向下滑出一个提示,尔后自动收起的场景。
* @tutorial https://www.uviewui.com/components/topTips.html
* @property {String Number} navbar-height 导航栏高度(包含状态栏高度在内)单位PX
* @property {String Number} z-index z-index值默认975
* @example <u-top-tips ref="uTips"></u-top-tips>
*/
export default {
name: "u-top-tips",
props: {
// 导航栏高度,用于提示的初始化
navbarHeight: {
type: [Number, String],
// #ifndef H5
default: 0,
// #endif
// #ifdef H5
default: 44,
// #endif
},
// z-index值
zIndex: {
type: [Number, String],
default: ''
}
},
data() {
return {
timer: null, // 定时器
isShow: false, // 是否显示消息组件
title: '', // 组件中显示的消息内容
type: 'primary', // 消息的类型颜色不同primarysuccesserrorwarninginfo
duration: 2000, // 组件显示的时间,单位为毫秒
};
},
computed: {
uZIndex() {
return this.zIndex ? this.zIndex : this.$u.zIndex.topTips;
}
},
methods: {
show(config = {}) {
// 先清除定时器(可能是上一次定义的,需要清除了再开始新的)
clearTimeout(this.timer);
// 时间,内容,类型主题(type)等参数
if (config.duration) this.duration = config.duration;
if (config.type) this.type = config.type;
this.title = config.title;
this.isShow = true;
// 倒计时
this.timer = setTimeout(() => {
this.isShow = false;
clearTimeout(this.timer);
this.timer = null;
}, this.duration);
}
}
};
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
view {
box-sizing: border-box;
}
// 顶部弹出类型样式
.u-tips {
width: 100%;
position: fixed;
z-index: 1;
padding: 20rpx 30rpx;
color: #FFFFFF;
font-size: 28rpx;
left: 0;
right: 0;
@include vue-flex;
align-items: center;
justify-content: center;
opacity: 0;
// 此处为最核心点translateY(-100%)意味着将其从Y轴隐藏隐藏到顶部(h5)或者说导航栏(app)下面)
transform: translateY(-100%);
transition: all 0.35s linear;
}
.u-tip-show {
transform: translateY(0);
opacity: 1;
z-index: 99;
}
.u-primary {
background: $u-type-primary;
}
.u-success {
background: $u-type-success;
}
.u-warning {
background: $u-type-warning;
}
.u-error {
background: $u-type-error;
}
.u-info {
background: $u-type-info;
}
</style>