bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/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          é€šå‘Šæ¨¡å¼ï¼Œlink-显示右箭头，closable-显示右侧关闭图标
    * @property {String}         color          æ–‡å­—颜色，各图标也会使用文字颜色 ï¼ˆ é»˜è®¤ '#f9ae3d' ï¼‰
    * @property {String}         bgColor       èƒŒæ™¯é¢œè‰² ï¼ˆ é»˜è®¤ '#fdf6ec' ï¼‰
    * @property {String | Number}   fontSize      å­—体大小，单位px  ï¼ˆ é»˜è®¤ 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+、H5 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为column时，要求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>