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 116 additions and 95 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 <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>
6 </div> 13 </div>
7 </div> 14 </div>
8 </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: '', // 文本长度
26 }, 35 state: 1,
27 // 定时器标识 36 firstAnimationTime: '', // 状态一动画效果
28 nowTime: null, 37 secondAnimationTime: '', // 状态二动画效果
29 // 每一个内容的宽度 38 data: this.options
30 disArr: [] 39 };
31 }
32 },
33 mounted () {
34 // var that = this
35 var item = this.$refs.list
36 var len = this.sendVal.length
37 var arr = []
38 // 因为设置的margin值一样，所以取第一个就行。
39 var margin = this.getMargin(item[0])
40 for (var i = 0; i < len; i++) {
41 arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
42 }
43 this.disArr = arr
44 this.moveLeft()
45 },
46 beforeDestroy () {
47 // 页面关闭清除定时器
48 clearInterval(this.nowTime)
49 // 清除定时器标识
50 this.nowTime = null
51 }, 40 },
52 methods: { 41 methods: {
53 // 获取margin属性 42 // 获取数据
54 getMargin (obj) { 43 getData () {
55 var marg = window.getComputedStyle(obj, null)['margin-right'] 44 let style = document.styleSheets[0];
56 marg = marg.replace('px', '') 45 let text = this.$refs.text;
57 return Number(marg) // 强制转化成数字 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);
58 }, 61 },
59 // 移动的方法 62 // 用速度计算时间（想要保持速度一样，2种状态时间不同需算出）
60 moveLeft () { 63 ComputationTime () {
61 var that = this 64 this.firstAnimationTime = this.wordLength / this.speed;
62 var outbox = this.$refs.box 65 this.secondAnimationTime =
63 // 初始位置 66 (this.wordLength + this.backWidth) / this.speed;
64 var startDis = 0 67 },
65 // console.log('that.disArr: ', that.disArr) 68 // 根据状态切换动画
66 this.nowTime = setInterval(function () { 69 changeState () {
67 startDis -= 0.5 70 let text = this.$refs.text;
68 // console.log('初始化移动：', startDis) 71 if (this.state == 1) {
69 if (Math.abs(startDis) > Math.abs(that.disArr[0])) { 72 text.style.animation = `firstAnimation ${this.firstAnimationTime}s linear`;
70 // 每次移动完一个元素的距离，就把这个元素的宽度 73 this.state = 2;
71 that.disArr.push(that.disArr.shift()) 74 } else {
72 // 每次移动完一个元素的距离，就把列表数据的第一项放到最后一项 75 text.style.animation = `secondAnimation ${this.secondAnimationTime}s linear infinite`;
73 // console.log('that.sendVal: ', that.sendVal) 76 }
74 // console.log('that.sendVal: ', that.sendVal.shift()) 77 },
75 that.sendVal.push(that.sendVal.shift()) 78 Listener () {
76 startDis = 0 79 let text = this.$refs.text;
77 // console.log('移动') 80 text.addEventListener(
78 } else { 81 'animationend',
79 // console.log('不来不来就不来...') 82 res => {
80 } 83 this.changeState();
81 // 每次都让盒子移动指定的距离，在我自己做的项目中，这种字符串拼接的方法并没有生效 84 },
82 // outbox.style = 'transform: translateX3d(' + startDis + 'px)' 85 false
83 // 后面换了es6的模板字符串就可以了 86 )
84 outbox.style = `transform: translateX(${startDis}px)` 87 },
85 // outbox.style = 'transform: translateX(\' + startDis + \' px)' 88 mouseOver () {
86 // outbox.style.marginLeft = 'startDis' 89 let text = this.$refs.text;
87 // console.log('这里:', startDis) 90 text.style.animationPlayState = 'paused'
88 }, 1000 / 60) 91 },
92 mouseLeave () {
93 let text = this.$refs.text;
94 text.style.animationPlayState = ''
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;
99 background: rgba(0, 0, 0, 0.1);
100 width: 100%; 109 width: 100%;
110 line-height: 32px;
111 height: 32px;
112 background: rgba(0, 0, 0, 0.1);
101 113
102 .my-inbox { 114 .icon {
115 img {
116 height: 100%;
117 width: 100%;
118 }
119 }
120
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: {
......