@gmcb/uv-ui 0.2.26

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

@@ -0,0 +1,110 @@
+<template>
+	<view
+		class="uv-notice-bar"
+		v-if="show"
+		:style="[{
+			backgroundColor: bgColor
+		}, $uv.addStyle(customStyle)]"
+	>
+		<template v-if="direction === 'column' || (direction === 'row' && step)">
+			<uv-column-notice
+				:color="color"
+				:bgColor="bgColor"
+				:text="text"
+				:mode="mode"
+				:step="step"
+				:icon="icon"
+				:disable-touch="disableTouch"
+				:disable-scroll="disableScroll"
+				:fontSize="fontSize"
+				:duration="duration"
+				@close="close"
+				@click="click"
+				@change="change"
+			></uv-column-notice>
+		</template>
+		<template v-else>
+			<uv-row-notice
+				:color="color"
+				:bgColor="bgColor"
+				:text="text"
+				:mode="mode"
+				:fontSize="fontSize"
+				:speed="speed"
+				:url="url"
+				:linkType="linkType"
+				:icon="icon"
+				@close="close"
+				@click="click"
+			></uv-row-notice>
+		</template>
+	</view>
+</template>
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+
+	/**
+	 * noticeBar 滚动通知
+	 * @description 该组件用于滚动通告场景，有多种模式可供选择
+	 * @tutorial https://www.uvui.cn/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 <uv-notice-bar :more-icon="true" :list="list"></uv-notice-bar>
+	 */
+	export default {
+		name: "uv-notice-bar",
+		emits: ['click','close','change'],
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				show: true
+			}
+		},
+		methods: {
+			// 点击通告栏
+			click(index) {
+				this.$emit('click', index)
+				if (this.url && this.linkType) {
+					// 此方法写在mixin中，另外跳转的url和linkType参数也在mixin的props中
+					this.openPage()
+				}
+			},
+			// 点击关闭按钮
+			close() {
+				this.show = false
+				this.$emit('close')
+			},
+			// 竖向滚动时触发
+			change(index){
+				this.$emit('change',index)
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+
+	.uv-notice-bar {
+		overflow: hidden;
+		padding: 9px 12px;
+		flex: 1;
+	}
+</style>

package/components/uv-notify/props.js

@@ -0,0 +1,45 @@
+export default {
+	props: {
+		// 到顶部的距离
+		top: {
+			type: [String, Number],
+			default: 0
+		},
+		// type主题，primary，success，warning，error
+		type: {
+			type: String,
+			default: 'primary'
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: '#ffffff'
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: ''
+		},
+		// 展示的文字内容
+		message: {
+			type: String,
+			default: ''
+		},
+		// 展示时长，为0时不消失，单位ms
+		duration: {
+			type: [String, Number],
+			default: 3000
+		},
+		// 字体大小
+		fontSize: {
+			type: [String, Number],
+			default: 15
+		},
+		// 是否留出顶部安全距离（状态栏高度）
+		safeAreaInsetTop: {
+			type: Boolean,
+			default: false
+		},
+		...uni.$uv?.props?.notify
+	}
+}

package/components/uv-notify/uv-notify.vue

@@ -0,0 +1,220 @@
+<template>
+	<uv-transition
+		mode="slide-top"
+		:customStyle="containerStyle"
+		:show="open"
+	>
+		<view
+			class="uv-notify"
+			:class="[`uv-notify--${tmpConfig.type}`]"
+			:style="[backgroundColor, $uv.addStyle(customStyle)]"
+		>
+			<uv-status-bar v-if="tmpConfig.safeAreaInsetTop"></uv-status-bar>
+			<view class="uv-notify__warpper">
+				<slot name="icon">
+					<uv-icon
+						v-if="['success', 'warning', 'error'].includes(tmpConfig.type)"
+						:name="tmpConfig.icon"
+						:color="tmpConfig.color"
+						:size="1.3 * tmpConfig.fontSize"
+						:customStyle="{marginRight: '4px'}"
+					></uv-icon>
+				</slot>
+				<text
+					class="uv-notify__warpper__text"
+					:style="{
+						fontSize: $uv.addUnit(tmpConfig.fontSize),
+						color: tmpConfig.color
+					}"
+				>{{ tmpConfig.message }}</text>
+			</view>
+		</view>
+	</uv-transition>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import mixin from '../../libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * 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 <uv-notify message="Hi uvui"></uv-notify>
+	 */
+	export default {
+		name: 'uv-notify',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				// 是否展示组件
+				open: false,
+				timer: null,
+				config: {
+					// 到顶部的距离
+					top: this.top,
+					// type主题，primary，success，warning，error
+					type: this.type,
+					// 字体颜色
+					color: this.color,
+					// 背景颜色
+					bgColor: this.bgColor,
+					// 展示的文字内容
+					message: this.message,
+					// 展示时长，为0时不消失，单位ms
+					duration: this.duration,
+					// 字体大小
+					fontSize: this.fontSize,
+					// 是否留出顶部安全距离（状态栏高度）
+					safeAreaInsetTop: this.safeAreaInsetTop
+				},
+				// 合并后的配置，避免多次调用组件后，可能会复用之前使用的配置参数
+				tmpConfig: {}
+			}
+		},
+		computed: {
+			containerStyle() {
+				let top = 0
+				if (this.tmpConfig.top === 0) {
+					// #ifdef H5
+					// H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+					// H5的导航栏高度为44px
+					top = 44
+					// #endif
+				}
+				const style = {
+					top: this.$uv.addUnit(this.tmpConfig.top === 0 ? top : this.tmpConfig.top),
+					// 因为组件底层为uv-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: {
+			show(options) {
+				// 不将结果合并到this.config变量，避免多次调用uv-toast，前后的配置造成混乱
+				this.tmpConfig = this.$uv.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() {
+			this.clearTimer()
+		},
+		// #endif
+		// #ifdef VUE3
+		unmounted() {
+			this.clearTimer()
+		}
+		// #endif
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	@import '../../libs/css/color.scss';
+	$uv-notify-padding: 8px 10px !default;
+	$uv-notify-text-font-size: 15px !default;
+	$uv-notify-primary-bgColor: $uv-primary !default;
+	$uv-notify-success-bgColor: $uv-success !default;
+	$uv-notify-error-bgColor: $uv-error !default;
+	$uv-notify-warning-bgColor: $uv-warning !default;
+
+
+	.uv-notify {
+		padding: $uv-notify-padding;
+
+		&__warpper {
+			@include flex;
+			align-items: center;
+			text-align: center;
+			justify-content: center;
+
+			&__text {
+				font-size: $uv-notify-text-font-size;
+				text-align: center;
+			}
+		}
+
+		&--primary {
+			background-color: $uv-notify-primary-bgColor;
+		}
+
+		&--success {
+			background-color: $uv-notify-success-bgColor;
+		}
+
+		&--error {
+			background-color: $uv-notify-error-bgColor;
+		}
+
+		&--warning {
+			background-color: $uv-notify-warning-bgColor;
+		}
+	}
+</style>

package/components/uv-number-box/props.js

@@ -0,0 +1,118 @@
+export default {
+	props: {
+		value: {
+			type: [String, Number],
+			default: 0
+		},
+		modelValue: {
+			type: [String, Number],
+			default: 0
+		},
+		// 步进器标识符，在change回调返回
+		name: {
+			type: [String, Number],
+			default: ''
+		},
+		// 最小值
+		min: {
+			type: [String, Number],
+			default: 1
+		},
+		// 最大值
+		max: {
+			type: [String, Number],
+			default: Number.MAX_SAFE_INTEGER
+		},
+		// 加减的步长，可为小数
+		step: {
+			type: [String, Number],
+			default: 1
+		},
+		// 是否只允许输入整数
+		integer: {
+			type: Boolean,
+			default: false
+		},
+		// 是否禁用，包括输入框，加减按钮
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 是否禁用输入框
+		disabledInput: {
+			type: Boolean,
+			default: false
+		},
+		// 是否开启异步变更，开启后需要手动控制输入值
+		asyncChange: {
+			type: Boolean,
+			default: false
+		},
+		// 输入框宽度，单位为px
+		inputWidth: {
+			type: [String, Number],
+			default: 35
+		},
+		// 是否显示减少按钮
+		showMinus: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示增加按钮
+		showPlus: {
+			type: Boolean,
+			default: true
+		},
+		// 显示的小数位数
+		decimalLength: {
+			type: [String, Number, null],
+			default: null
+		},
+		// 是否开启长按加减手势
+		longPress: {
+			type: Boolean,
+			default: true
+		},
+		// 输入框文字和加减按钮图标的颜色
+		color: {
+			type: String,
+			default: '#323233'
+		},
+		// 按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致
+		buttonSize: {
+			type: [String, Number],
+			default: 30
+		},
+		// 输入框和按钮的背景颜色
+		bgColor: {
+			type: String,
+			default: '#EBECEE'
+		},
+		// 指定光标于键盘的距离，避免键盘遮挡输入框，单位px
+		cursorSpacing: {
+			type: [String, Number],
+			default: 100
+		},
+		// 是否禁用增加按钮
+		disablePlus: {
+			type: Boolean,
+			default: false
+		},
+		// 是否禁用减少按钮
+		disableMinus: {
+			type: Boolean,
+			default: false
+		},
+		// 键盘弹起时，是否自动上推页面
+    adjustPosition: {
+      type: Boolean,
+      default: true
+    },
+		// 加减按钮图标的样式
+		iconStyle: {
+			type: [Object, String],
+			default: ''
+		},
+		...uni.$uv?.props?.numberBox
+	}
+}