<marquee>

<marquee> 是一个横向自动滚动文字的容器，主要用于文字多单地方小的地方，比如单行标题。

子组件

无

预览效果

说明：gif图片压缩，原效果非常流畅。

&lt;marquee&gt; - 图1

示例代码

  1. <template>
  2.     <div class="app">
  4.         <marquee
  5.                 ref="reflectName"
  6.                 class="marquee"
  7.                 style="width:750px;height:50px;font-size:24px"
  8.                 :text="scrollText"
  9.         ></marquee>
  11.         <marquee
  12.                 ref="reflectName2"
  13.                 class="marquee"
  14.                 style="width:375px;height:50px;font-size:24px;color:#ff0000;background-color:#00ffff"
  15.                 :text="scrollText"
  16.         ></marquee>
  18.         <marquee
  19.                 ref="reflectName3"
  20.                 class="marquee"
  21.                 style="width:200px;height:50px;font-size:24px;color:#6e0a92;background-color:#c8e7ff"
  22.                 :text="scrollText"
  23.         ></marquee>
  26.     </div>
  27. </template>
  29. <style scoped>
  30.     .app {
  31.         width: 750px;
  32.         flex: 1;
  33.     }
  34.     .marquee {
  35.         margin-top: 50px;
  36.         height: 60px;
  37.         background-color: #00B4FF;
  38.     }
  39. </style>
  41. <script>
  42.     export default {
  43.         data() {
  44.             return {
  45.                 scrollText: "地方不够放时才滚动！",
  46.             }
  47.         }
  48.     };
  49. </script>

配置参数

属性名 类型 描述 默认值
content String 显示的文字 -
text String 同content -
color String 滚动的文字颜色 #000000
fontSize Number 字体大小 24
textAlign String 对齐方式:left center right left
backgroundColor String 滚动的文字背景颜色 #00ffffff

例如：

  1. <marquee
  2.     ref="reflectName"
  3.     text="地方不够放时才滚动"
  4.     fontSize="24"
  5.     color="#6dff28"
  6.     backgroundColor="#c8e7ff"></marquee>

事件回调 callback

  1. /**
  2.  * 组件加载完成
  3.  */
  4. @ready = function() { ... }

调用方法 methods

  1. /**
  2.  * 设置显示的文字
  3.  * 参数一：滚动文字
  4.  */
  5. this.$refs.reflectName.setText('文字');
  7. /**
  8.  * 添加显示的文字
  9.  * 参数一：添加的显示文字
  10.  */
  11. this.$refs.reflectName.addText('文字');
  13. /**
  14.  * 设置字体大小
  15.  * 参数一：文字大小
  16.  */
  17. this.$refs.reflectName.setTextSize(24);
  19. /**
  20.  * 设置字体颜色
  21.  * 参数一：颜色代码
  22.  */
  23. this.$refs.reflectName.setTextColor('#ff0000');
  25. /**
  26.  * 设置字体背景颜色
  27.  * 参数一：颜色代码
  28.  */
  29. this.$refs.reflectName.setBackgroundColor('#0000ff');