quanyawei
2024-07-04 1e71dd86f6d0c4fc7e5143600d4bc4b50992a2a7
uni_modules/uview-ui/components/u-notice-bar/u-notice-bar.vue
New file
@@ -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>