dykj-football/uni_modules/uview-plus/components/u-notify/u-notify.vue
2024-04-17 15:27:43 +08:00

223 lines
6.1 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<u-transition
mode="slide-down"
:customStyle="containerStyle"
:show="open"
>
<view
class="u-notify"
:class="[`u-notify--${tmpConfig.type}`]"
:style="[backgroundColor, addStyle(customStyle)]"
>
<u-status-bar v-if="tmpConfig.safeAreaInsetTop"></u-status-bar>
<view class="u-notify__warpper">
<slot name="icon">
<u-icon
v-if="['success', 'warning', 'error'].includes(tmpConfig.type)"
:name="tmpConfig.icon"
:color="tmpConfig.color"
:size="1.3 * tmpConfig.fontSize"
:customStyle="{marginRight: '4px'}"
></u-icon>
</slot>
<text
class="u-notify__warpper__text"
:style="{
fontSize: addUnit(tmpConfig.fontSize),
color: tmpConfig.color
}"
>{{ tmpConfig.message }}</text>
</view>
</view>
</u-transition>
</template>
<script>
import props from './props';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import defProps from '../../libs/config/props.js';
import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
/**
* notify 顶部提示
* @description 该组件一般用于页面顶部向下滑出一个提示,尔后自动收起的场景
* @tutorial
* @property {String | Number} top 到顶部的距离 ( 默认 0 )
* @property {String} type 主题primarysuccesswarningerror ( 默认 'primary' )
* @property {String} color 字体颜色 ( 默认 '#ffffff' )
* @property {String} bgColor 背景颜色
* @property {String} message 展示的文字内容
* @property {String | Number} duration 展示时长为0时不消失单位ms ( 默认 3000 )
* @property {String | Number} fontSize 字体大小 ( 默认 15 )
* @property {Boolean} safeAreaInsetTop 是否留出顶部安全距离(状态栏高度) ( 默认 false )
* @property {Object} customStyle 组件的样式,对象形式
* @event {Function} open 开启组件时调用的函数
* @event {Function} close 关闭组件式调用的函数
* @example <u-notify message="Hi uView"></u-notify>
*/
export default {
name: 'u-notify',
mixins: [mpMixin, mixin,props],
data() {
return {
// 是否展示组件
open: false,
timer: null,
config: {
// 到顶部的距离
top: defProps.notify.top,
// type主题primarysuccesswarningerror
type: defProps.notify.type,
// 字体颜色
color: defProps.notify.color,
// 背景颜色
bgColor: defProps.notify.bgColor,
// 展示的文字内容
message: defProps.notify.message,
// 展示时长为0时不消失单位ms
duration: defProps.notify.duration,
// 字体大小
fontSize: defProps.notify.fontSize,
// 是否留出顶部安全距离(状态栏高度)
safeAreaInsetTop: defProps.notify.safeAreaInsetTop
},
// 合并后的配置,避免多次调用组件后,可能会复用之前使用的配置参数
tmpConfig: {}
}
},
computed: {
containerStyle() {
let top = 0
if (this.tmpConfig.top === 0) {
// #ifdef H5
// H5端导航栏为普通元素需要将组件移动到导航栏的下边沿
// H5的导航栏高度为44px
top = 44
// #endif
}
const style = {
top: addUnit(this.tmpConfig.top === 0 ? top : this.tmpConfig.top),
// 因为组件底层为u-transition组件必须将其设置为fixed定位
// 让其出现在导航栏底部
position: 'fixed',
left: 0,
right: 0,
zIndex: 10076
}
return style
},
// 组件背景颜色
backgroundColor() {
const style = {}
if (this.tmpConfig.bgColor) {
style.backgroundColor = this.tmpConfig.bgColor
}
return style
},
// 默认主题下的图标
icon() {
let icon
if (this.tmpConfig.type === 'success') {
icon = 'checkmark-circle'
} else if (this.tmpConfig.type === 'error') {
icon = 'close-circle'
} else if (this.tmpConfig.type === 'warning') {
icon = 'error-circle'
}
return icon
}
},
created() {
// 通过主题的形式调用toast批量生成方法函数
['primary', 'success', 'error', 'warning'].map(item => {
this[item] = message => this.show({
type: item,
message
})
})
},
methods: {
addStyle,
addUnit,
show(options) {
// 不将结果合并到this.config变量避免多次调用u-toast前后的配置造成混乱
this.tmpConfig = deepMerge(this.config, options)
// 任何定时器初始化之前,都要执行清除操作,否则可能会造成混乱
this.clearTimer()
this.open = true
if (this.tmpConfig.duration > 0) {
this.timer = setTimeout(() => {
this.open = false
// 倒计时结束清除定时器隐藏toast组件
this.clearTimer()
// 判断是否存在callback方法如果存在就执行
typeof(this.tmpConfig.complete) === 'function' && this.tmpConfig.complete()
}, this.tmpConfig.duration)
}
},
// 关闭notify
close() {
this.clearTimer()
},
clearTimer() {
this.open = false
// 清除定时器
clearTimeout(this.timer)
this.timer = null
}
},
// #ifdef VUE2
beforeDestroy() {
// #endif
// #ifdef VUE3
beforeUnmount() {
// #endif
this.clearTimer()
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
$u-notify-padding: 8px 10px !default;
$u-notify-text-font-size: 15px !default;
$u-notify-primary-bgColor: $u-primary !default;
$u-notify-success-bgColor: $u-success !default;
$u-notify-error-bgColor: $u-error !default;
$u-notify-warning-bgColor: $u-warning !default;
.u-notify {
padding: $u-notify-padding;
&__warpper {
@include flex;
align-items: center;
text-align: center;
justify-content: center;
&__text {
font-size: $u-notify-text-font-size;
text-align: center;
}
}
&--primary {
background-color: $u-notify-primary-bgColor;
}
&--success {
background-color: $u-notify-success-bgColor;
}
&--error {
background-color: $u-notify-error-bgColor;
}
&--warning {
background-color: $u-notify-warning-bgColor;
}
}
</style>