u-column-notice.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <view
  3. class="u-notice"
  4. @tap="clickHandler"
  5. >
  6. <slot name="icon">
  7. <view
  8. class="u-notice__left-icon"
  9. v-if="icon"
  10. >
  11. <u-icon
  12. :name="icon"
  13. :color="color"
  14. size="19"
  15. ></u-icon>
  16. </view>
  17. </slot>
  18. <swiper
  19. :disable-touch="disableTouch"
  20. :vertical="step ? false : true"
  21. circular
  22. :interval="duration"
  23. :autoplay="true"
  24. class="u-notice__swiper"
  25. @change="noticeChange"
  26. >
  27. <swiper-item
  28. v-for="(item, index) in text"
  29. :key="index"
  30. class="u-notice__swiper__item"
  31. >
  32. <text
  33. class="u-notice__swiper__item__text u-line-1"
  34. :style="[textStyle]"
  35. >{{ item }}
  36. </text>
  37. </swiper-item>
  38. </swiper>
  39. <view
  40. class="u-notice__right-icon"
  41. v-if="['link', 'closable'].includes(mode)"
  42. >
  43. <u-icon
  44. v-if="mode === 'link'"
  45. name="arrow-right"
  46. :size="17"
  47. :color="color"
  48. ></u-icon>
  49. <u-icon
  50. v-if="mode === 'closable'"
  51. name="close"
  52. :size="16"
  53. :color="color"
  54. @click="close"
  55. ></u-icon>
  56. </view>
  57. </view>
  58. </template>
  59. <script>
  60. import props from './props.js';
  61. /**
  62. * ColumnNotice 滚动通知中的垂直滚动 内部组件
  63. * @description 该组件用于滚动通告场景,是其中的垂直滚动方式
  64. * @tutorial https://www.uviewui.com/components/noticeBar.html
  65. * @property {Array} text 显示的内容,字符串
  66. * @property {String} icon 是否显示左侧的音量图标 ( 默认 'volume' )
  67. * @property {String} mode 通告模式,link-显示右箭头,closable-显示右侧关闭图标
  68. * @property {String} color 文字颜色,各图标也会使用文字颜色 ( 默认 '#f9ae3d' )
  69. * @property {String} bgColor 背景颜色 ( 默认 '#fdf6ec' )
  70. * @property {String | Number} fontSize 字体大小,单位px ( 默认 14 )
  71. * @property {String | Number} speed 水平滚动时的滚动速度,即每秒滚动多少px(rpx),这有利于控制文字无论多少时,都能有一个恒定的速度 ( 默认 80 )
  72. * @property {Boolean} step direction = row时,是否使用步进形式滚动 ( 默认 false )
  73. * @property {String | Number} duration 滚动一个周期的时间长,单位ms ( 默认 1500 )
  74. * @property {Boolean} disableTouch 是否禁止用手滑动切换 目前HX2.6.11,只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序 ( 默认 true )
  75. * @example
  76. */
  77. export default {
  78. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  79. watch: {
  80. text: {
  81. immediate: true,
  82. handler(newValue, oldValue) {
  83. if (!uni.$u.test.array(newValue)) {
  84. uni.$u.error('noticebar组件direction为column时,要求text参数为数组形式')
  85. }
  86. }
  87. }
  88. },
  89. computed: {
  90. // 文字内容的样式
  91. textStyle() {
  92. let style = {}
  93. style.color = this.color
  94. style.fontSize = uni.$u.addUnit(this.fontSize)
  95. return style
  96. },
  97. // 垂直或者水平滚动
  98. vertical() {
  99. if (this.mode == 'horizontal') return false
  100. else return true
  101. },
  102. },
  103. data() {
  104. return {
  105. index: 0
  106. }
  107. },
  108. methods: {
  109. noticeChange(e) {
  110. this.index = e.detail.current
  111. },
  112. // 点击通告栏
  113. clickHandler() {
  114. this.$emit('click', this.index)
  115. },
  116. // 点击关闭按钮
  117. close() {
  118. this.$emit('close')
  119. }
  120. }
  121. };
  122. </script>
  123. <style lang="scss" scoped>
  124. @import "../../libs/css/components.scss";
  125. .u-notice {
  126. @include flex;
  127. align-items: center;
  128. justify-content: space-between;
  129. &__left-icon {
  130. align-items: center;
  131. margin-right: 5px;
  132. }
  133. &__right-icon {
  134. margin-left: 5px;
  135. align-items: center;
  136. }
  137. &__swiper {
  138. height: 16px;
  139. @include flex;
  140. align-items: center;
  141. flex: 1;
  142. &__item {
  143. @include flex;
  144. align-items: center;
  145. overflow: hidden;
  146. &__text {
  147. font-size: 14px;
  148. color: $u-warning;
  149. }
  150. }
  151. }
  152. }
  153. </style>