hospital-accompaniment-wechat/uni_modules/uview-ui/components/u-column-notice/u-column-notice.vue

<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>