From d8b41fff43a2cee6a8f714ffa807623b15803786 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 20 Oct 2023 15:21:35 +0800
Subject: [PATCH] fix:立行立改Uniapp小程序新建项目

---
 uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue |  330 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 330 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue b/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue
new file mode 100644
index 0000000..20f43c3
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue
@@ -0,0 +1,330 @@
+<template>
+	<view
+		class="u-notice"
+		@tap="clickHandler"
+	>
+		<slot name="icon">
+			<view
+				class="u-notice__left-icon"
+				v-if="icon"
+			>
+				<u-icon
+					:name="icon"
+					:color="color"
+					size="19"
+				></u-icon>
+			</view>
+		</slot>
+		<view
+			class="u-notice__content"
+			ref="u-notice__content"
+		>
+			<view
+				ref="u-notice__content__text"
+				class="u-notice__content__text"
+				:style="[animationStyle]"
+			>
+				<text
+					v-for="(item, index) in innerText"
+					:key="index"
+					:style="[textStyle]"
+				>{{item}}</text>
+			</view>
+		</view>
+		<view
+			class="u-notice__right-icon"
+			v-if="['link', 'closable'].includes(mode)"
+		>
+			<u-icon
+				v-if="mode === 'link'"
+				name="arrow-right"
+				:size="17"
+				:color="color"
+			></u-icon>
+			<u-icon
+				v-if="mode === 'closable'"
+				@click="close"
+				name="close"
+				:size="16"
+				:color="color"
+			></u-icon>
+		</view>
+	</view>
+</template>
+<script>
+	import props from './props.js';
+	// #ifdef APP-NVUE
+	const animation = uni.requireNativePlugin('animation')
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * RowNotice ������������������������������������
+	 * @description ������������
+	 * @tutorial https://www.uviewui.com/components/noticeBar.html
+	 * @property {String | Number}	text			���������������������������
+	 * @property {String}			icon			��������������������������������� (������ 'volume' )
+	 * @property {String}			mode			���������������link-������������������closable-������������������������
+	 * @property {String}			color			������������������������������������������������ (������ '#f9ae3d' )
+	 * @property {String}			bgColor			������������ (������ ''#fdf6ec' )
+	 * @property {String | Number}	fontSize		���������������������px (������ 14 )
+	 * @property {String | Number}	speed			������������������������������������������������������px(rpx)���������������������������������������������������������������������������  (������ 80 )
+	 * 
+	 * @event {Function} click ������������������������
+	 * @event {Function} close ������������������������������
+	 * @example 
+	 */
+	export default {
+		name: 'u-row-notice',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		data() {
+			return {
+				animationDuration: '0', // ������������������
+				animationPlayState: 'paused', // ������������������������������
+				// nvue������������������������������������������������������������������������������������������������������
+				// ���������������������������������������������������nvue���animation���������������������������������������������������������
+				nvueInit: true,
+				show: true
+			};
+		},
+		watch: {
+			text: {
+				immediate: true,
+				handler(newValue, oldValue) {
+					// #ifdef APP-NVUE
+					this.nvueInit = true
+					// #endif
+					// #ifndef APP-NVUE
+					this.vue()
+					// #endif
+					
+					if(!uni.$u.test.string(newValue)) {
+						uni.$u.error('noticebar������direction���row������������text������������������������')
+					}
+				}
+			},
+			fontSize() {
+				// #ifdef APP-NVUE
+				this.nvueInit = true
+				// #endif
+				// #ifndef APP-NVUE
+				this.vue()
+				// #endif
+			},
+			speed() {
+				// #ifdef APP-NVUE
+				this.nvueInit = true
+				// #endif
+				// #ifndef APP-NVUE
+				this.vue()
+				// #endif
+			}
+		},
+		computed: {
+			// ���������������������
+			textStyle() {
+				let style = {}
+				style.color = this.color
+				style.fontSize = uni.$u.addUnit(this.fontSize)
+				return style
+			},
+			animationStyle() {
+				let style = {}
+				style.animationDuration = this.animationDuration
+				style.animationPlayState = this.animationPlayState
+				return style
+			},
+			// ������������������������������������������������������������text������������������������������������������������������������100������������������
+			// ������������text���������������������������������������������������������������������������������������������������������text���������������������
+			innerText() {
+				let result = [],
+					// ������text���������������������
+					len = 20
+				const textArr = this.text.split('')
+				for (let i = 0; i < textArr.length; i += len) {
+					// ������������������text������slice������������������������������������join������������������
+					result.push(textArr.slice(i, i + len).join(''))
+				}
+				return result
+			}
+		},
+		mounted() {
+			// #ifdef APP-PLUS
+			// ���APP���(���nvue)���������������webview������������������������(������������������������hide������)
+			// ������webivew������������������������������������������������������������������������������������������������������������������������������������������������
+			var pages = getCurrentPages()
+			var page = pages[pages.length - 1]
+			var currentWebview = page.$getAppWebview()
+			currentWebview.addEventListener('hide', () => {
+				this.webviewHide = true
+			})
+			currentWebview.addEventListener('show', () => {
+				this.webviewHide = false
+			})
+			// #endif
+
+			this.init()
+		},
+		methods: {
+			init() {
+				// #ifdef APP-NVUE
+				this.nvue()
+				// #endif
+
+				// #ifndef APP-NVUE
+				this.vue()
+				// #endif
+				
+				if(!uni.$u.test.string(this.text)) {
+					uni.$u.error('noticebar������direction���row������������text������������������������')
+				}
+			},
+			// vue���������
+			async vue() {
+				// #ifndef APP-NVUE
+				let boxWidth = 0,
+					textWidth = 0
+				// ���������������������
+				await uni.$u.sleep()
+				// ������������������������������
+				textWidth = (await this.$uGetRect('.u-notice__content__text')).width
+				boxWidth = (await this.$uGetRect('.u-notice__content')).width
+				// ������t=s/v(������=������/������)������������������������������#u-notice-box������������������������������.u-notice-content������������������padding-left: 100%
+				// ���������������������������������������������#u-notice-box���������
+				this.animationDuration = `${textWidth / uni.$u.getPx(this.speed)}s`
+				// ������������������������������������������APP���������������������������
+				this.animationPlayState = 'paused'
+				setTimeout(() => {
+					this.animationPlayState = 'running'
+				}, 10)
+				// #endif
+			},
+			// nvue���������
+			async nvue() {
+				// #ifdef APP-NVUE
+				this.nvueInit = false
+				let boxWidth = 0,
+					textWidth = 0
+				// ���������������������
+				await uni.$u.sleep()
+				// ������������������������������
+				textWidth = (await this.getNvueRect('u-notice__content__text')).width
+				boxWidth = (await this.getNvueRect('u-notice__content')).width
+				// ���������������������������������������������������������������������������nvue���������100%���������������������������css������
+				animation.transition(this.$refs['u-notice__content__text'], {
+					styles: {
+						transform: `translateX(${boxWidth}px)`
+					},
+				}, () => {
+					// ���������������������������������������
+					!this.stopAnimation && this.loopAnimation(textWidth, boxWidth)
+				});
+				// #endif
+			},
+			loopAnimation(textWidth, boxWidth) {
+				// #ifdef APP-NVUE
+				animation.transition(this.$refs['u-notice__content__text'], {
+					styles: {
+						// ���������������������-textWidth���������������������������������������������������������������
+						transform: `translateX(-${textWidth}px)`
+					},
+					// ��������������������������������� = ������(boxWidth + textWidth) / ���������������������������
+					duration: (boxWidth + textWidth) / uni.$u.getPx(this.speed) * 1000,
+					delay: 10
+				}, () => {
+					animation.transition(this.$refs['u-notice__content__text'], {
+						styles: {
+							// ������������������������������������������
+							transform: `translateX(${this.stopAnimation ? 0 : boxWidth}px)`
+						},
+					}, () => {
+						// ������������������������������������������������
+						if (!this.stopAnimation) {
+							// ���������������������������������������
+							if (this.nvueInit) {
+								this.nvue()
+							} else {
+								this.loopAnimation(textWidth, boxWidth)
+							}
+						}
+					});
+				})
+				// #endif
+			},
+			getNvueRect(el) {
+				// #ifdef APP-NVUE
+				// ������������promise
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs[el], (res) => {
+						resolve(res.size)
+					})
+				})
+				// #endif
+			},
+			// ���������������
+			clickHandler(index) {
+				this.$emit('click')
+			},
+			// ���������������������������������������������������������������������������
+			close() {
+				this.$emit('close')
+			}
+		},
+		// #ifdef APP-NVUE
+		beforeDestroy() {
+			this.stopAnimation = true
+		},
+		// #endif
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.u-notice {
+		@include flex;
+		align-items: center;
+		justify-content: space-between;
+
+		&__left-icon {
+			align-items: center;
+			margin-right: 5px;
+		}
+
+		&__right-icon {
+			margin-left: 5px;
+			align-items: center;
+		}
+
+		&__content {
+			text-align: right;
+			flex: 1;
+			@include flex;
+			flex-wrap: nowrap;
+			overflow: hidden;
+
+			&__text {
+				font-size: 14px;
+				color: $u-warning;
+				/* #ifndef APP-NVUE */
+				// ���������������������������������������������������������
+				padding-left: 100%;
+				word-break: keep-all;
+				white-space: nowrap;
+				animation: u-loop-animation 10s linear infinite both;
+				/* #endif */
+				@include flex(row);
+			}
+		}
+
+	}
+
+	@keyframes u-loop-animation {
+		0% {
+			transform: translate3d(0, 0, 0);
+		}
+
+		100% {
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
+</style>

--
Gitblit v1.8.0