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