u-column-notice.vue 3.8 KB

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