学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

100 lines
2.4 KiB

1 year ago
  1. <template>
  2. <div class="marquee-box">
  3. <div class="marquee-content" ref="out">
  4. <p :class="run?speed:''">
  5. <span class="text1" ref="in" >{{content}}</span>
  6. <span class="text2" v-if="showtwo||run">{{content}}</span>
  7. </p>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. name: 'VueMarquee',
  14. data (){
  15. return{
  16. run: false,
  17. pWidth: '',
  18. }
  19. },
  20. props: {
  21. content: {
  22. default: "暂无公告内容",
  23. type: String
  24. },
  25. speed: {
  26. default: 'slow',
  27. type: String
  28. },
  29. showtwo: {
  30. default: true
  31. }
  32. },
  33. watch: {
  34. content (){
  35. var _this = this;
  36. setTimeout(()=>{
  37. _this.$nextTick(()=>{
  38. let out = _this.$refs.out.clientWidth;
  39. let _in = _this.$refs.in.clientWidth;
  40. _this.pWidth = 2*_in;
  41. _this.run=_in>out?true:false;
  42. });
  43. },0);
  44. }
  45. },
  46. mounted (){
  47. var _this = this;
  48. this.$nextTick(()=>{
  49. let out = _this.$refs.out.clientWidth;
  50. let _in = _this.$refs.in.clientWidth;
  51. _this.run=_in>out?true:false;
  52. });
  53. }
  54. }
  55. </script>
  56. <style lang="scss" scoped>
  57. .marquee-box {
  58. height: 24px;
  59. line-height: 24px;
  60. color: #DD1D35;
  61. font-size: 12px;
  62. }
  63. .marquee-content{
  64. overflow: hidden;
  65. width:100%
  66. }
  67. .marquee-content p{
  68. display: inline-block;
  69. white-space: nowrap;
  70. margin: 0;
  71. font-size: 0;
  72. }
  73. .marquee-content span{
  74. display: inline-block;
  75. white-space: nowrap;
  76. padding-right: 300px;
  77. font-size: 12px;
  78. }
  79. .quick{
  80. -webkit-animation: marquee 5s linear infinite;
  81. animation: marquee 5s linear infinite;
  82. }
  83. .middle{
  84. -webkit-animation: marquee 8s linear infinite;
  85. animation: marquee 8s linear infinite;
  86. }
  87. .slow{
  88. -webkit-animation: marquee 25s linear infinite;
  89. animation: marquee 25s linear infinite;
  90. }
  91. @-webkit-keyframes marquee {
  92. 0% { -webkit-transform: translate3d(0,0,0); }
  93. 100% { -webkit-transform: translate3d(-50%,0,0); }
  94. }
  95. @keyframes marquee {
  96. 0% { transform: translateX(0); }
  97. 100% { transform: translateX(-50%);}
  98. }
  99. </style>