Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
13320ef3 by 任超
Options

style:通知

1 parent f58f7e9e
Inline Side-by-side
Showing 3 changed files with 112 additions and 91 deletions
1 <template> 1 <template>
2 <div class="my-outbox"> 2 <transition name="fade">
3 <div class="my-inbox" ref='box'> 3 <!--主要内容-->
4 <div class="my-list" :style="note" v-for="(item,index) in sendVal" :key='index' ref='list'> 4 <div class="noticebar">
5 <span class="my-uname">{{ item }}</span> 5 <div style="margin-left:5px"></div>
6 </div> 6 <svg-icon icon-class='notice' />
7 <div style="margin-right:5px"></div>
8 <div ref="back" class="back">
9 <span ref="text" @mouseover="mouseOver" @mouseleave="mouseLeave" :style="{ fontSize: '14px', color: '#fff' }"
10 class="text">{{ data.text ? data.text :
11 '通知内容'
12 }}</span>
7 </div> 13 </div>
8 </div> 14 </div>
15 </transition>
9 </template> 16 </template>
10
11 <script> 17 <script>
12 export default { 18 export default {
13 name: 'my-marquee-left',
14 props: { 19 props: {
15 sendVal: { 20 options: {
16 type: Array, 21 type: Object,
17 default: [] 22 default () {
23 return {
24 text: '默认'
25 }
26 }
18 } 27 }
19 }, 28 },
20 data () { 29 data () {
21 return { 30 return {
22 note: { 31 speed: 50, // 速度（单位px/s）
23 backgroundSize: "20px 20px", 32 backWidth: '', // 父级宽度
24 backgroundRepeat: "no-repeat", 33 backHeight: '', // 父级高度
25 backgroundPosition: "1% 50%" 34 wordLength: '', // 文本长度
35 state: 1,
36 firstAnimationTime: '', // 状态一动画效果
37 secondAnimationTime: '', // 状态二动画效果
38 data: this.options
39 };
26 }, 40 },
27 // 定时器标识 41 methods: {
28 nowTime: null, 42 // 获取数据
29 // 每一个内容的宽度 43 getData () {
30 disArr: [] 44 let style = document.styleSheets[0];
31 } 45 let text = this.$refs.text;
46 let back = this.$refs.back;
47 this.backWidth = back.offsetWidth;
48 this.backHeight = back.offsetHeight;
49 text.style.lineHeight = this.backHeight + 'px';
50 this.wordLength = text.offsetWidth;
51 this.ComputationTime(); // 计算时间
52 style.insertRule(
53 `@keyframes firstAnimation {0% {left:0px;}100% {left:-${this.wordLength}px;}}`
54 );
55 style.insertRule(
56 `@keyframes secondAnimation {0% {left:${this.backWidth}px;}100% {left:-${this.wordLength}px;}}`
57 );
58 setTimeout(res => {
59 this.changeState();
60 }, this.data.delay);
32 }, 61 },
33 mounted () { 62 // 用速度计算时间（想要保持速度一样，2种状态时间不同需算出）
34 // var that = this 63 ComputationTime () {
35 var item = this.$refs.list 64 this.firstAnimationTime = this.wordLength / this.speed;
36 var len = this.sendVal.length 65 this.secondAnimationTime =
37 var arr = [] 66 (this.wordLength + this.backWidth) / this.speed;
38 // 因为设置的margin值一样，所以取第一个就行。 67 },
39 var margin = this.getMargin(item[0]) 68 // 根据状态切换动画
40 for (var i = 0; i < len; i++) { 69 changeState () {
41 arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离 70 let text = this.$refs.text;
71 if (this.state == 1) {
72 text.style.animation = `firstAnimation ${this.firstAnimationTime}s linear`;
73 this.state = 2;
74 } else {
75 text.style.animation = `secondAnimation ${this.secondAnimationTime}s linear infinite`;
42 } 76 }
43 this.disArr = arr
44 this.moveLeft()
45 }, 77 },
46 beforeDestroy () { 78 Listener () {
47 // 页面关闭清除定时器 79 let text = this.$refs.text;
48 clearInterval(this.nowTime) 80 text.addEventListener(
49 // 清除定时器标识 81 'animationend',
50 this.nowTime = null 82 res => {
83 this.changeState();
51 }, 84 },
52 methods: { 85 false
53 // 获取margin属性 86 )
54 getMargin (obj) {
55 var marg = window.getComputedStyle(obj, null)['margin-right']
56 marg = marg.replace('px', '')
57 return Number(marg) // 强制转化成数字
58 }, 87 },
59 // 移动的方法 88 mouseOver () {
60 moveLeft () { 89 let text = this.$refs.text;
61 var that = this 90 text.style.animationPlayState = 'paused'
62 var outbox = this.$refs.box 91 },
63 // 初始位置 92 mouseLeave () {
64 var startDis = 0 93 let text = this.$refs.text;
65 // console.log('that.disArr: ', that.disArr) 94 text.style.animationPlayState = ''
66 this.nowTime = setInterval(function () {
67 startDis -= 0.5
68 // console.log('初始化移动：', startDis)
69 if (Math.abs(startDis) > Math.abs(that.disArr[0])) {
70 // 每次移动完一个元素的距离，就把这个元素的宽度
71 that.disArr.push(that.disArr.shift())
72 // 每次移动完一个元素的距离，就把列表数据的第一项放到最后一项
73 // console.log('that.sendVal: ', that.sendVal)
74 // console.log('that.sendVal: ', that.sendVal.shift())
75 that.sendVal.push(that.sendVal.shift())
76 startDis = 0
77 // console.log('移动')
78 } else {
79 // console.log('不来不来就不来...')
80 }
81 // 每次都让盒子移动指定的距离，在我自己做的项目中，这种字符串拼接的方法并没有生效
82 // outbox.style = 'transform: translateX3d(' + startDis + 'px)'
83 // 后面换了es6的模板字符串就可以了
84 outbox.style = `transform: translateX(${startDis}px)`
85 // outbox.style = 'transform: translateX(\' + startDis + \' px)'
86 // outbox.style.marginLeft = 'startDis'
87 // console.log('这里:', startDis)
88 }, 1000 / 60)
89 } 95 }
96 },
97 mounted () {
98 this.Listener();
99 setTimeout(res => {
100 this.getData();
101 }, 100);
90 } 102 }
91 } 103 };
92 </script> 104 </script>
93
94 <style lang="scss" scoped> 105 <style lang="scss" scoped>
95 .my-outbox { 106 .noticebar {
96 color: #fff; 107 display: flex;
97 overflow: hidden; 108 align-items: center;
98 line-height: 28px; 109 width: 100%;
110 line-height: 32px;
111 height: 32px;
99 background: rgba(0, 0, 0, 0.1); 112 background: rgba(0, 0, 0, 0.1);
113
114 .icon {
115 img {
116 height: 100%;
100 width: 100%; 117 width: 100%;
118 }
119 }
101 120
102 .my-inbox { 121 .back {
122 overflow: hidden;
103 white-space: nowrap; 123 white-space: nowrap;
124 margin: 0 auto;
125 height: 100%;
126 width: 100%;
127 cursor: pointer;
128 position: relative;
104 129
105 .my-list { 130 .text {
106 margin-right: 15px; 131 position: absolute;
107 display: inline-block; 132 display: inline-block;
108 font-size: 14px; 133 padding: 2px 0;
109 text-indent: 30px;
110
111 .my-uname {
112 color: red;
113 }
114 } 134 }
115 } 135 }
116 } 136 }
......
1 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1668560086395" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2762" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M448 282.4v459.2L301.6 594.4 282.4 576H192V448h90.4l18.4-18.4L448 282.4M512 128L256 384H128v256h128l256 256V128z m64 5.6v64.8c145.6 29.6 256 159.2 256 313.6s-110.4 284-256 313.6v64.8c181.6-30.4 320-188 320-378.4S757.6 164 576 133.6z m0 188.8v65.6c55.2 14.4 96 64 96 124s-40.8 109.6-96 124v65.6C666.4 686.4 736 607.2 736 512s-69.6-174.4-160-189.6z" fill="#ffffff" p-id="2763"></path></svg>
...\ No newline at end of file ...\ No newline at end of file
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 </el-dropdown> 20 </el-dropdown>
21 </div> 21 </div>
22 </div> 22 </div>
23 <NoticeBar class="NoticeBar" :sendVal="sendVal" /> 23 <NoticeBar class="NoticeBar" :options="options" />
24 </div> 24 </div>
25 </template> 25 </template>
26 <script> 26 <script>
...@@ -36,10 +36,10 @@ export default { ...@@ -36,10 +36,10 @@ export default {
36 data () { 36 data () {
37 return { 37 return {
38 logo: require('../../image/logo.png'), 38 logo: require('../../image/logo.png'),
39 sendVal: [ 39 options: {
40 '222222222222222222222222222222222', 40 text: '关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解',
41 '222222233333333333333333333333' 41 delay: '1000', // 动画延迟时间(默认一秒后开始滚动，单位毫秒)
42 ] 42 },
43 } 43 }
44 }, 44 },
45 methods: { 45 methods: {
......