uview-ultra 4.5.46

package/components/up-notice-bar/up-notice-bar.vue

@@ -0,0 +1,110 @@
+<template>
+	<view
+		class="up-notice-bar"
+		v-if="show"
+		:style="[{
+			backgroundColor: bgColor
+		}, addStyle(customStyle)]"
+	>
+		<template v-if="direction === 'column' || (direction === 'row' && step)">
+			<up-column-notice
+				:color="color"
+				:bgColor="bgColor"
+				:text="text"
+				:mode="mode"
+				:step="step"
+				:icon="icon"
+				:disable-touch="disableTouch"
+				:fontSize="fontSize"
+				:duration="duration"
+				@close="close"
+				@click="click"
+			></up-column-notice>
+		</template>
+		<template v-else>
+			<up-row-notice
+				:color="color"
+				:bgColor="bgColor"
+				:text="text"
+				:mode="mode"
+				:fontSize="fontSize"
+				:speed="speed"
+				:url="url"
+				:linkType="linkType"
+				:icon="icon"
+				@close="close"
+				@click="click"
+			></up-row-notice>
+		</template>
+	</view>
+</template>
+<script setup>
+	import { ref } from 'vue'
+	import { props as noticeBarProps } from './props.js'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI.js'
+	import { addStyle } from '../../libs/function/index.js'
+	/**
+	 * noticeBar 滚动通知
+	 * @description 该组件用于滚动通告场景，有多种模式可供选择
+	 * @tutorial https://ijry.github.io/uview-plus/components/noticeBar.html
+	 * @property {Array | String}	text			显示的内容，数组
+	 * @property {String}			direction		通告滚动模式，row-横向滚动，column-竖向滚动 ( 默认 'row' )
+	 * @property {Boolean}			step			direction = row时，是否使用步进形式滚动  ( 默认 false )
+	 * @property {String}			icon			是否显示左侧的音量图标 ( 默认 'volume' )
+	 * @property {String}			mode			通告模式，link-显示右箭头，closable-显示右侧关闭图标
+	 * @property {String}			color			文字颜色，各图标也会使用文字颜色 ( 默认 '#f9ae3d' )
+	 * @property {String}			bgColor			背景颜色 ( 默认 '#fdf6ec' )
+	 * @property {String | Number}	speed			水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 ( 默认 80 )
+	 * @property {String | Number}	fontSize		字体大小 ( 默认 14 )
+	 * @property {String | Number}	duration		滚动一个周期的时间长，单位ms ( 默认 2000 )
+	 * @property {Boolean}			disableTouch	是否禁止用手滑动切换 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（默认34） ( 默认 true )
+	 * @property {String}			url				跳转的页面路径
+	 * @property {String}			linkType		页面跳转的类型 ( 默认 navigateTo )
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * 
+	 * @event {Function}			click			点击通告文字触发
+	 * @event {Function}			close			点击右侧关闭图标触发
+	 * @example <up-notice-bar :more-icon="true" :list="list"></up-notice-bar>
+	 */
+	defineOptions({
+		name: 'up-notice-bar',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...noticeBarProps.props
+	})
+	const emit = defineEmits(['click', 'close'])
+	const show = ref(true)
+	const { openPage } = useUltraUI(props)
+
+	// 点击通告栏
+	function click(index) {
+		emit('click', index)
+		if (props.url && props.linkType) {
+			openPage()
+		}
+	}
+
+	// 点击关闭按钮
+	function close() {
+		show.value = false
+		emit('close')
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	@import "./theme-vars.scss";
+
+	.up-notice-bar {
+		overflow: hidden;
+		padding: 9px 12px;
+		flex: 1;
+	}
+</style>

package/components/up-notify/notify.js

@@ -0,0 +1,22 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/notify.js
+ */
+export default {
+    // notify组件
+    notify: {
+        top: 0,
+        type: 'primary',
+        color: '#ffffff',
+        bgColor: '',
+        message: '',
+        duration: 3000,
+        fontSize: 15,
+        safeAreaInsetTop: false
+    }
+}

package/components/up-notify/notify.uts

@@ -0,0 +1,22 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-12-18 17:06:10
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-12-18 17:06:10
+ * @FilePath     : /uview-ultra/libs/config/props/notify.uts
+ */
+export default {
+    // notify组件
+    notify: {
+        top: 0,
+        type: 'primary',
+        color: '#ffffff',
+        bgColor: '',
+        message: '',
+        duration: 3000,
+        fontSize: 15,
+        safeAreaInsetTop: false
+    }
+} as UTSJSONObject

package/components/up-notify/props.js

@@ -0,0 +1,51 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 到顶部的距离
+        top: {
+            type: [String, Number],
+            default: () => defProps.notify.top
+        },
+        // 是否展示组件
+        // show: {
+        // 	type: Boolean,
+        // 	default: () => defProps.notify.show
+        // },
+        // type主题，primary，success，warning，error
+        type: {
+            type: String,
+            default: () => defProps.notify.type
+        },
+        // 字体颜色
+        color: {
+            type: String,
+            default: () => defProps.notify.color
+        },
+        // 背景颜色
+        bgColor: {
+            type: String,
+            default: () => defProps.notify.bgColor
+        },
+        // 展示的文字内容
+        message: {
+            type: String,
+            default: () => defProps.notify.message
+        },
+        // 展示时长，为0时不消失，单位ms
+        duration: {
+            type: [String, Number],
+            default: () => defProps.notify.duration
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: () => defProps.notify.fontSize
+        },
+        // 是否留出顶部安全距离（状态栏高度）
+        safeAreaInsetTop: {
+            type: Boolean,
+            default: () => defProps.notify.safeAreaInsetTop
+        }
+    }
+})

package/components/up-notify/props.uts

@@ -0,0 +1,56 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-12-18 17:06:10
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-12-18 17:06:10
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './notify.uts'
+let notifyProp = defProps['notify'] as UTSJSONObject
+
+export const propsNotify = defineMixin({
+    props: {
+        // 到顶部的距离
+        top: {
+            type: [String, Number],
+            default: notifyProp['top']
+        },
+        // type主题，primary，success，warning，error
+        type: {
+            type: String,
+            default: notifyProp['type']
+        },
+        // 字体颜色
+        color: {
+            type: String,
+            default: notifyProp['color']
+        },
+        // 背景颜色
+        bgColor: {
+            type: String,
+            default: notifyProp['bgColor']
+        },
+        // 展示的文字内容
+        message: {
+            type: String,
+            default: notifyProp['message']
+        },
+        // 展示时长，为0时不消失，单位ms
+        duration: {
+            type: [String, Number],
+            default: notifyProp['duration']
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: notifyProp['fontSize']
+        },
+        // 是否留出顶部安全距离（状态栏高度）
+        safeAreaInsetTop: {
+            type: Boolean,
+            default: notifyProp['safeAreaInsetTop']
+        }
+    }
+})

package/components/up-notify/up-notify.uvue

@@ -0,0 +1,327 @@
+<template>
+	<up-transition
+		mode="slide-down"
+		:customStyle="containerStyle"
+		:show="open"
+	>
+		<view
+			class="up-notify"
+			:class="[notifyTypeClass]"
+			:style="notifyStyle"
+		>
+			<up-status-bar v-if="tmpConfig['safeAreaInsetTop']"></up-status-bar>
+			<view class="up-notify__warpper">
+				<slot name="icon">
+					<up-icon
+						v-if="showNotifyIcon"
+						:name="tmpConfig['icon']"
+						:color="tmpConfig['color']"
+						:size="iconSize"
+						:customStyle="iconStyle"
+					></up-icon>
+				</slot>
+				<text
+					class="up-notify__warpper__text"
+					:style="textStyle"
+				>{{ tmpConfig['message'] }}</text>
+			</view>
+		</view>
+	</up-transition>
+</template>
+
+<script setup lang="uts">
+	import { computed, onBeforeUnmount, ref } from 'vue'
+	import defProps from './notify.uts'
+	let notifyPropCrt = defProps['notify'] as UTSJSONObject
+	import { addUnit, addStyle, deepMerge, getPx } from '../../libs/function/index.uts';
+	/**
+	 * notify 顶部提示
+	 * @description 该组件一般用于页面顶部向下滑出一个提示，尔后自动收起的场景
+	 * @tutorial
+	 * @property {String | Number}	top					到顶部的距离 ( 默认 0 )
+	 * @property {String}			type				主题，primary，success，warning，error ( 默认 '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 <up-notify message="Hi uView"></up-notify>
+	 */
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-notify'
+	})
+
+	const props = defineProps({
+		// 到顶部的距离
+		top: {
+			type: [String, Number],
+			default: defProps.getNumber('notify.top')
+		},
+		// type主题，primary，success，warning，error
+		type: {
+			type: String,
+			default: defProps.getString('notify.type')
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: defProps.getString('notify.color')
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: defProps.getString('notify.bgColor')
+		},
+		// 展示的文字内容
+		message: {
+			type: String,
+			default: defProps.getString('notify.message')
+		},
+		// 展示时长，为0时不消失，单位ms
+		duration: {
+			type: [String, Number],
+			default: defProps.getNumber('notify.duration')
+		},
+		// 字体大小
+		fontSize: {
+			type: [String, Number],
+			default: defProps.getNumber('notify.fontSize')
+		},
+		// 是否留出顶部安全距离（状态栏高度）
+		safeAreaInsetTop: {
+			type: Boolean,
+			default: defProps.getBoolean('notify.safeAreaInsetTop')
+		},
+		customStyle: {
+			type: [Object, String],
+			default: () => ({})
+		},
+	})
+
+	// 是否展示组件
+	const open = ref(false)
+	const timer = ref<number | null>(null)
+	const config = {
+		// 到顶部的距离
+		top: notifyPropCrt['top'],
+		// type主题，primary，success，warning，error
+		type: notifyPropCrt['type'],
+		// 字体颜色
+		color: notifyPropCrt['color'],
+		// 背景颜色
+		bgColor: notifyPropCrt['bgColor'],
+		// 展示的文字内容
+		message: notifyPropCrt['message'],
+		// 展示时长，为0时不消失，单位ms
+		duration: notifyPropCrt['duration'],
+		// 字体大小
+		fontSize: notifyPropCrt['fontSize'],
+		// 是否留出顶部安全距离（状态栏高度）
+		safeAreaInsetTop: notifyPropCrt['safeAreaInsetTop']
+	} as UTSJSONObject
+	// 合并后的配置，避免多次调用组件后，可能会复用之前使用的配置参数
+	const tmpConfig = ref({} as UTSJSONObject)
+
+	function getConfigString(key: string, fallback: string = ''): string {
+		const value = tmpConfig.value[key]
+		return value == null ? fallback : value.toString()
+	}
+
+	function getConfigNumber(key: string, fallback: number = 0): number {
+		const value = tmpConfig.value[key]
+		if (value == null) return fallback
+		const parsed = parseInt(value.toString())
+		return isNaN(parsed) ? fallback : parsed
+	}
+
+	const containerStyle = computed((): UTSJSONObject => {
+		let top = 0
+		const topValue = tmpConfig.value['top']
+		const isTopZero = topValue != null && parseFloat(topValue.toString()) == 0
+		if (isTopZero) {
+			// #ifdef H5
+			// H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+			// H5的导航栏高度为44px
+			top = 44
+			// #endif
+		}
+		return {
+			top: addUnit(isTopZero ? top : topValue),
+			// 因为组件底层为up-transition组件，必须将其设置为fixed定位
+			// 让其出现在导航栏底部
+			position: 'fixed',
+			left: 0,
+			right: 0,
+			zIndex: 10076
+		} as UTSJSONObject
+	})
+
+	// 组件背景颜色
+	const backgroundColor = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		if (tmpConfig.value['bgColor'] != '') {
+			style['backgroundColor'] = tmpConfig.value['bgColor']
+		}
+		return style
+	})
+
+	const notifyType = computed((): string => {
+		return getConfigString('type')
+	})
+
+	const notifyTypeClass = computed((): string => {
+		return 'up-notify--' + notifyType.value
+	})
+
+	const showNotifyIcon = computed((): boolean => {
+		const type = notifyType.value
+		return type == 'success' || type == 'warning' || type == 'error'
+	})
+
+	const iconSize = computed((): number => {
+		const size = parseFloat(getPx(getConfigString('fontSize', '0')).toString())
+		return 1.3 * (isNaN(size) ? 0 : size)
+	})
+
+	const iconStyle = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		style['marginRight'] = '4px'
+		return style
+	})
+
+	const textStyle = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		style['fontSize'] = addUnit(getConfigString('fontSize', '0'))
+		style['color'] = getConfigString('color')
+		return style
+	})
+
+	const notifyStyle = computed((): UTSJSONObject => {
+		const style = UTSJSONObject.assign({} as UTSJSONObject, backgroundColor.value)
+		return UTSJSONObject.assign(style, addStyle(props.customStyle) as UTSJSONObject)
+	})
+
+	const clearTimer = (): void => {
+		open.value = false
+		// 清除定时器
+		clearTimeout(timer.value ?? 0)
+		timer.value = null
+	}
+
+	const show = (options: UTSJSONObject): void => {
+		// 不将结果合并到config变量，避免多次调用up-toast，前后的配置造成混乱
+		tmpConfig.value = deepMerge(config, options)
+		// 任何定时器初始化之前，都要执行清除操作，否则可能会造成混乱
+		clearTimer()
+		open.value = true
+		const duration = getConfigNumber('duration', 3000)
+		if (duration > 0) {
+			timer.value = setTimeout(() => {
+				open.value = false
+				// 倒计时结束，清除定时器，隐藏toast组件
+				clearTimer()
+				// 判断是否存在callback方法，如果存在就执行
+				const complete = tmpConfig.value['complete']
+				if (typeof complete === 'function') {
+					;(complete as () => void)()
+				}
+			}, duration)
+		}
+	}
+
+	const primary = (message: string): void => {
+		show({
+			type: 'primary',
+			message
+		})
+	}
+
+	const success = (message: string): void => {
+		show({
+			type: 'success',
+			message
+		})
+	}
+
+	const error = (message: string): void => {
+		show({
+			type: 'error',
+			message
+		})
+	}
+
+	const warning = (message: string): void => {
+		show({
+			type: 'warning',
+			message
+		})
+	}
+
+	// 关闭notify
+	const close = (): void => {
+		clearTimer()
+	}
+
+	onBeforeUnmount(() => {
+		clearTimer()
+	})
+
+	defineExpose({
+		primary,
+		success,
+		error,
+		warning,
+		show,
+		close,
+		clearTimer
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	$up-notify-padding: 8px 10px !default;
+	$up-notify-text-font-size: 15px !default;
+	$up-notify-primary-bgColor: $up-primary !default;
+	$up-notify-success-bgColor: $up-success !default;
+	$up-notify-error-bgColor: $up-error !default;
+	$up-notify-warning-bgColor: $up-warning !default;
+
+
+	.up-notify {
+		padding: $up-notify-padding;
+
+		&__warpper {
+			@include flex;
+			align-items: center;
+			text-align: center;
+			justify-content: center;
+
+			&__text {
+				font-size: $up-notify-text-font-size;
+				text-align: center;
+			}
+		}
+
+		&--primary {
+			background-color: $up-notify-primary-bgColor;
+		}
+
+		&--success {
+			background-color: $up-notify-success-bgColor;
+		}
+
+		&--error {
+			background-color: $up-notify-error-bgColor;
+		}
+
+		&--warning {
+			background-color: $up-notify-warning-bgColor;
+		}
+	}
+</style>