fix:地图

quanyawei

2024-01-10 e13367edf304cb78f978e321f1679299a66b3a23

 uni_modules/uview-ui/components/u-column-notice/u-column-notice.vue

New file
@@ -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>