minnan/src/components/display/NoticeBar.vue

<template>
  <Touchable
    touchable 
    direction="row"
    :flexGrow="0" 
    :flexShrink="0"
    :innerStyle="{
      ...themeStyles.view.value,
      backgroundColor: themeContext.resolveThemeColor(backgroundColor),
    }"
    @click="emit('click')"
  >
    <slot name="leftIcon">
      <Icon 
        :innerStyle="themeStyles.icon.value"
        :color="textColor"
        :icon="icon"
        v-bind="iconProps" 
      />
    </slot>

    <view v-if="scroll" :style="themeStyles.contentView.value">
      <HorizontalScrollText :innerStyle="textStyleFinal" :scrollDuration="scrollDuration" :text="content" />
    </view>
    <Text v-else :lines="wrap ? undefined : 1" :innerStyle="textStyleFinal" :text="content" />
    
    <slot name="rightIcon" />
    <IconButton 
      v-if="closeable"
      icon="close"
      :innerStyle="themeStyles.icon.value"
      :color="textColor"
      @click="emit('close')"
    />
  </Touchable>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { propGetThemeVar, useTheme, type TextStyle, type ViewStyle } from '../theme/ThemeDefine';
import { DynamicSize, DynamicSize2 } from '../theme/ThemeTools';
import type { IconProps } from '../basic/Icon.vue';
import Icon from '../basic/Icon.vue';
import IconButton from '../basic/IconButton.vue';
import Text from '../basic/Text.vue';
import HorizontalScrollText from '../typography/HorizontalScrollText.vue';
import Touchable from '../feedback/Touchable.vue';

export interface NoticeBarProps {
  /**
   * 左边的图标, 可以传入图片
   */
  icon?: string|undefined;
  /**
   * 图标或者图片的自定义样式
   */
  iconStyle?: ViewStyle;
  /**
   * 图标额外属性
   */
  iconProps?: IconProps;
  /**
   * 内容
   */
  content?: string;
  /**
   * 文字的自定义样式
   */
  textStyle?: TextStyle;
  /**
   * 背景颜色
   * @default light.warning
   */
  backgroundColor?: string;
  /**
   * 文字颜色
   * @default text.warning
   */
  textColor?: string;
  /**
   * 是否滚动播放
   * @default true
   */
  scroll?: boolean;
  /**
   * 滚动动画时长（毫秒）
   * @default 100000
   */
  scrollDuration?: number;
  /**
   * 文字是否换行，仅在非滚动播放时生效
   * @default false
   */
  wrap?: boolean;
  /**
   * 是否显示关闭按钮。用户点击后会触发 `close` 事件，请自行处理 NoticeBar 的显示与否。
   * @default false
   */
  closeable?: boolean;
}

const themeContext = useTheme();

const emit = defineEmits([ 'close', 'click' ]);
const props = withDefaults(defineProps<NoticeBarProps>(), {
  icon: 'notification',
  backgroundColor: () => propGetThemeVar('NoticeBarBackgroundColor', 'background.warning'),
  textColor: () => propGetThemeVar('NoticeBarTextColor', 'text.warning'),
  scroll: true,
  scrollDuration: () => propGetThemeVar('NoticeBarScrollDuration', 100000),
  wrap: false,
  closeable: false,
});

const  textStyleFinal =  computed(() => ({
  width: 'auto',
  height: 'auto',
  flex: 1,
  color: themeContext.resolveThemeColor(props.textColor),
  ...props.textStyle,
} as TextStyle));

const themeStyles = themeContext.useThemeStyles({
  view: {
    display: 'flex',
    position: 'relative',
    padding: DynamicSize2('NoticeBarPaddingVertical', 'NoticeBarPaddingHorizontal', 12, 20),
    justifyContent: 'space-between',
    alignContent: 'center',
  },
  icon: {
    marginRight: DynamicSize('NoticeBarIconMarginRight', 10),
  },
  contentView: {
    flex: 1,
    overflow: 'hidden',
  },
});

</script>