bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-notice-bar/u-notice-bar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,101 @@
<template>
   <view
      class="u-notice-bar"
      v-if="show"
      :style="[{
         backgroundColor: bgColor
      }, $u.addStyle(customStyle)]"
   >
      <template v-if="direction === 'column' || (direction === 'row' && step)">
         <u-column-notice
            :color="color"
            :bgColor="bgColor"
            :text="text"
            :mode="mode"
            :step="step"
            :icon="icon"
            :disable-touch="disableTouch"
            :fontSize="fontSize"
            :duration="duration"
            @close="close"
            @click="click"
         ></u-column-notice>
      </template>
      <template v-else>
         <u-row-notice
            :color="color"
            :bgColor="bgColor"
            :text="text"
            :mode="mode"
            :fontSize="fontSize"
            :speed="speed"
            :url="url"
            :linkType="linkType"
            :icon="icon"
            @close="close"
            @click="click"
         ></u-row-notice>
      </template>
   </view>
</template>
<script>
   import props from './props.js';

   /**
    * noticeBar æ»šåŠ¨é€šçŸ¥
    * @description è¯¥ç»„件用于滚动通告场景，有多种模式可供选择
    * @tutorial https://www.uviewui.com/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 <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
    */
   export default {
      name: "u-notice-bar",
      mixins: [uni.$u.mpMixin, uni.$u.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')
         }
      }
   };
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";

   .u-notice-bar {
      overflow: hidden;
      padding: 9px 12px;
      flex: 1;
   }
</style>