u-notice-bar.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <view
  3. class="u-notice-bar"
  4. v-if="show"
  5. :style="[{
  6. backgroundColor: bgColor
  7. }, $u.addStyle(customStyle)]"
  8. >
  9. <template v-if="direction === 'column' || (direction === 'row' && step)">
  10. <u-column-notice
  11. :color="color"
  12. :bgColor="bgColor"
  13. :text="text"
  14. :mode="mode"
  15. :step="step"
  16. :icon="icon"
  17. :disable-touch="disableTouch"
  18. :fontSize="fontSize"
  19. :duration="duration"
  20. @close="close"
  21. @click="click"
  22. ></u-column-notice>
  23. </template>
  24. <template v-else>
  25. <u-row-notice
  26. :color="color"
  27. :bgColor="bgColor"
  28. :text="text"
  29. :mode="mode"
  30. :fontSize="fontSize"
  31. :speed="speed"
  32. :url="url"
  33. :linkType="linkType"
  34. :icon="icon"
  35. @close="close"
  36. @click="click"
  37. ></u-row-notice>
  38. </template>
  39. </view>
  40. </template>
  41. <script>
  42. import props from './props.js';
  43. /**
  44. * noticeBar 滚动通知
  45. * @description 该组件用于滚动通告场景,有多种模式可供选择
  46. * @tutorial https://www.uviewui.com/components/noticeBar.html
  47. * @property {Array | String} text 显示的内容,数组
  48. * @property {String} direction 通告滚动模式,row-横向滚动,column-竖向滚动 ( 默认 'row' )
  49. * @property {Boolean} step direction = row时,是否使用步进形式滚动 ( 默认 false )
  50. * @property {String} icon 是否显示左侧的音量图标 ( 默认 'volume' )
  51. * @property {String} mode 通告模式,link-显示右箭头,closable-显示右侧关闭图标
  52. * @property {String} color 文字颜色,各图标也会使用文字颜色 ( 默认 '#f9ae3d' )
  53. * @property {String} bgColor 背景颜色 ( 默认 '#fdf6ec' )
  54. * @property {String | Number} speed 水平滚动时的滚动速度,即每秒滚动多少px(px),这有利于控制文字无论多少时,都能有一个恒定的速度 ( 默认 80 )
  55. * @property {String | Number} fontSize 字体大小 ( 默认 14 )
  56. * @property {String | Number} duration 滚动一个周期的时间长,单位ms ( 默认 2000 )
  57. * @property {Boolean} disableTouch 是否禁止用手滑动切换 目前HX2.6.11,只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序(默认34) ( 默认 true )
  58. * @property {String} url 跳转的页面路径
  59. * @property {String} linkType 页面跳转的类型 ( 默认 navigateTo )
  60. * @property {Object} customStyle 定义需要用到的外部样式
  61. *
  62. * @event {Function} click 点击通告文字触发
  63. * @event {Function} close 点击右侧关闭图标触发
  64. * @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
  65. */
  66. export default {
  67. name: "u-notice-bar",
  68. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  69. data() {
  70. return {
  71. show: true
  72. }
  73. },
  74. methods: {
  75. // 点击通告栏
  76. click(index) {
  77. this.$emit('click', index)
  78. if (this.url && this.linkType) {
  79. // 此方法写在mixin中,另外跳转的url和linkType参数也在mixin的props中
  80. this.openPage()
  81. }
  82. },
  83. // 点击关闭按钮
  84. close() {
  85. this.show = false
  86. this.$emit('close')
  87. }
  88. }
  89. };
  90. </script>
  91. <style lang="scss" scoped>
  92. @import "../../libs/css/components.scss";
  93. .u-notice-bar {
  94. overflow: hidden;
  95. padding: 9px 12px;
  96. flex: 1;
  97. }
  98. </style>