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
<template>
<div class="my-outbox">
<div class="my-inbox" ref='box'>
<div class="my-list" :style="note" v-for="(item,index) in sendVal" :key='index' ref='list'>
<span class="my-uname">{{ item }}</span>
</div>
<transition name="fade">
<!--主要内容-->
<div class="noticebar">
<div style="margin-left:5px"></div>
<svg-icon icon-class='notice' />
<div style="margin-right:5px"></div>
<div ref="back" class="back">
<span ref="text" @mouseover="mouseOver" @mouseleave="mouseLeave" :style="{ fontSize: '14px', color: '#fff' }"
class="text">{{ data.text ? data.text :
'通知内容'
}}</span>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'my-marquee-left',
props: {
sendVal: {
type: Array,
default: []
options: {
type: Object,
default () {
return {
text: '默认'
}
}
}
},
data () {
return {
note: {
backgroundSize: "20px 20px",
backgroundRepeat: "no-repeat",
backgroundPosition: "1% 50%"
speed: 50, // 速度（单位px/s）
backWidth: '', // 父级宽度
backHeight: '', // 父级高度
wordLength: '', // 文本长度
state: 1,
firstAnimationTime: '', // 状态一动画效果
secondAnimationTime: '', // 状态二动画效果
data: this.options
};
},
// 定时器标识
nowTime: null,
// 每一个内容的宽度
disArr: []
}
methods: {
// 获取数据
getData () {
let style = document.styleSheets[0];
let text = this.$refs.text;
let back = this.$refs.back;
this.backWidth = back.offsetWidth;
this.backHeight = back.offsetHeight;
text.style.lineHeight = this.backHeight + 'px';
this.wordLength = text.offsetWidth;
this.ComputationTime(); // 计算时间
style.insertRule(
`@keyframes firstAnimation {0% {left:0px;}100% {left:-${this.wordLength}px;}}`
);
style.insertRule(
`@keyframes secondAnimation {0% {left:${this.backWidth}px;}100% {left:-${this.wordLength}px;}}`
);
setTimeout(res => {
this.changeState();
}, this.data.delay);
},
mounted () {
// var that = this
var item = this.$refs.list
var len = this.sendVal.length
var arr = []
// 因为设置的margin值一样，所以取第一个就行。
var margin = this.getMargin(item[0])
for (var i = 0; i < len; i++) {
arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
// 用速度计算时间（想要保持速度一样，2种状态时间不同需算出）
ComputationTime () {
this.firstAnimationTime = this.wordLength / this.speed;
this.secondAnimationTime =
(this.wordLength + this.backWidth) / this.speed;
},
// 根据状态切换动画
changeState () {
let text = this.$refs.text;
if (this.state == 1) {
text.style.animation = `firstAnimation ${this.firstAnimationTime}s linear`;
this.state = 2;
} else {
text.style.animation = `secondAnimation ${this.secondAnimationTime}s linear infinite`;
}
this.disArr = arr
this.moveLeft()
},
beforeDestroy () {
// 页面关闭清除定时器
clearInterval(this.nowTime)
// 清除定时器标识
this.nowTime = null
Listener () {
let text = this.$refs.text;
text.addEventListener(
'animationend',
res => {
this.changeState();
},
methods: {
// 获取margin属性
getMargin (obj) {
var marg = window.getComputedStyle(obj, null)['margin-right']
marg = marg.replace('px', '')
return Number(marg) // 强制转化成数字
false
)
},
// 移动的方法
moveLeft () {
var that = this
var outbox = this.$refs.box
// 初始位置
var startDis = 0
// console.log('that.disArr: ', that.disArr)
this.nowTime = setInterval(function () {
startDis -= 0.5
// console.log('初始化移动：', startDis)
if (Math.abs(startDis) > Math.abs(that.disArr[0])) {
// 每次移动完一个元素的距离，就把这个元素的宽度
that.disArr.push(that.disArr.shift())
// 每次移动完一个元素的距离，就把列表数据的第一项放到最后一项
// console.log('that.sendVal: ', that.sendVal)
// console.log('that.sendVal: ', that.sendVal.shift())
that.sendVal.push(that.sendVal.shift())
startDis = 0
// console.log('移动')
} else {
// console.log('不来不来就不来...')
}
// 每次都让盒子移动指定的距离，在我自己做的项目中，这种字符串拼接的方法并没有生效
// outbox.style = 'transform: translateX3d(' + startDis + 'px)'
// 后面换了es6的模板字符串就可以了
outbox.style = `transform: translateX(${startDis}px)`
// outbox.style = 'transform: translateX(\' + startDis + \' px)'
// outbox.style.marginLeft = 'startDis'
// console.log('这里:', startDis)
}, 1000 / 60)
mouseOver () {
let text = this.$refs.text;
text.style.animationPlayState = 'paused'
},
mouseLeave () {
let text = this.$refs.text;
text.style.animationPlayState = ''
}
},
mounted () {
this.Listener();
setTimeout(res => {
this.getData();
}, 100);
}
}
};
</script>
<style lang="scss" scoped>
.my-outbox {
color: #fff;
overflow: hidden;
line-height: 28px;
.noticebar {
display: flex;
align-items: center;
width: 100%;
line-height: 32px;
height: 32px;
background: rgba(0, 0, 0, 0.1);
.icon {
img {
height: 100%;
width: 100%;
}
}
.my-inbox {
.back {
overflow: hidden;
white-space: nowrap;
margin: 0 auto;
height: 100%;
width: 100%;
cursor: pointer;
position: relative;
.my-list {
margin-right: 15px;
.text {
position: absolute;
display: inline-block;
font-size: 14px;
text-indent: 30px;
.my-uname {
color: red;
}
padding: 2px 0;
}
}
}
......
<?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
......@@ -20,7 +20,7 @@
</el-dropdown>
</div>
</div>
<NoticeBar class="NoticeBar" :sendVal="sendVal" />
<NoticeBar class="NoticeBar" :options="options" />
</div>
</template>
<script>
......@@ -36,10 +36,10 @@ export default {
data () {
return {
logo: require('../../image/logo.png'),
sendVal: [
'222222222222222222222222222222222',
'222222233333333333333333333333'
]
options: {
text: '关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解',
delay: '1000', // 动画延迟时间(默认一秒后开始滚动，单位毫秒)
},
}
},
methods: {
......