From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 15 七月 2025 11:46:57 +0800 Subject: [PATCH] 项目初始化 --- uni_modules/uview-ui/components/u-column-notice/u-column-notice.vue | 160 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 160 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-column-notice/u-column-notice.vue b/uni_modules/uview-ui/components/u-column-notice/u-column-notice.vue new file mode 100644 index 0000000..fc39532 --- /dev/null +++ b/uni_modules/uview-ui/components/u-column-notice/u-column-notice.vue @@ -0,0 +1,160 @@ +<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> + <swiper + :disable-touch="disableTouch" + :vertical="step ? false : true" + circular + :interval="duration" + :autoplay="true" + class="u-notice__swiper" + @change="noticeChange" + > + <swiper-item + v-for="(item, index) in text" + :key="index" + class="u-notice__swiper__item" + > + <text + class="u-notice__swiper__item__text u-line-1" + :style="[textStyle]" + >{{ item }}</text> + </swiper-item> + </swiper> + <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'" + name="close" + :size="16" + :color="color" + @click="close" + ></u-icon> + </view> + </view> +</template> + +<script> + import props from './props.js'; + /** + * ColumnNotice 婊氬姩閫氱煡涓殑鍨傜洿婊氬姩 鍐呴儴缁勪欢 + * @description 璇ョ粍浠剁敤浜庢粴鍔ㄩ�氬憡鍦烘櫙锛屾槸鍏朵腑鐨勫瀭鐩存粴鍔ㄦ柟寮� + * @tutorial https://www.uviewui.com/components/noticeBar.html + * @property {Array} text 鏄剧ず鐨勫唴瀹癸紝瀛楃涓� + * @property {String} icon 鏄惁鏄剧ず宸︿晶鐨勯煶閲忓浘鏍� 锛� 榛樿 'volume' 锛� + * @property {String} mode 閫氬憡妯″紡锛宭ink-鏄剧ず鍙崇澶达紝closable-鏄剧ず鍙充晶鍏抽棴鍥炬爣 + * @property {String} color 鏂囧瓧棰滆壊锛屽悇鍥炬爣涔熶細浣跨敤鏂囧瓧棰滆壊 锛� 榛樿 '#f9ae3d' 锛� + * @property {String} bgColor 鑳屾櫙棰滆壊 锛� 榛樿 '#fdf6ec' 锛� + * @property {String | Number} fontSize 瀛椾綋澶у皬锛屽崟浣峱x 锛� 榛樿 14 锛� + * @property {String | Number} speed 姘村钩婊氬姩鏃剁殑婊氬姩閫熷害锛屽嵆姣忕婊氬姩澶氬皯px(rpx)锛岃繖鏈夊埄浜庢帶鍒舵枃瀛楁棤璁哄灏戞椂锛岄兘鑳芥湁涓�涓亽瀹氱殑閫熷害 锛� 榛樿 80 锛� + * @property {Boolean} step direction = row鏃讹紝鏄惁浣跨敤姝ヨ繘褰㈠紡婊氬姩 锛� 榛樿 false 锛� + * @property {String | Number} duration 婊氬姩涓�涓懆鏈熺殑鏃堕棿闀匡紝鍗曚綅ms 锛� 榛樿 1500 锛� + * @property {Boolean} disableTouch 鏄惁绂佹鐢ㄦ墜婊戝姩鍒囨崲 鐩墠HX2.6.11锛屽彧鏀寔App 2.5.5+銆丠5 2.5.5+銆佹敮浠樺疂灏忕▼搴忋�佸瓧鑺傝烦鍔ㄥ皬绋嬪簭 锛� 榛樿 true 锛� + * @example + */ + export default { + mixins: [uni.$u.mpMixin, uni.$u.mixin,props], + watch: { + text: { + immediate: true, + handler(newValue, oldValue) { + if(!uni.$u.test.array(newValue)) { + uni.$u.error('noticebar缁勪欢direction涓篶olumn鏃讹紝瑕佹眰text鍙傛暟涓烘暟缁勫舰寮�') + } + } + } + }, + computed: { + // 鏂囧瓧鍐呭鐨勬牱寮� + textStyle() { + let style = {} + style.color = this.color + style.fontSize = uni.$u.addUnit(this.fontSize) + return style + }, + // 鍨傜洿鎴栬�呮按骞虫粴鍔� + vertical() { + if (this.mode == 'horizontal') return false + else return true + }, + }, + data() { + return { + index:0 + } + }, + methods: { + noticeChange(e){ + this.index = e.detail.current + }, + // 鐐瑰嚮閫氬憡鏍� + clickHandler() { + this.$emit('click', this.index) + }, + // 鐐瑰嚮鍏抽棴鎸夐挳 + close() { + this.$emit('close') + } + } + }; +</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; + } + + &__swiper { + height: 16px; + @include flex; + align-items: center; + flex: 1; + + &__item { + @include flex; + align-items: center; + overflow: hidden; + + &__text { + font-size: 14px; + color: $u-warning; + } + } + } + } +</style> -- Gitblit v1.9.3