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.
101 lines
2.4 KiB
101 lines
2.4 KiB
<template>
|
|
<div class="marquee-box">
|
|
<div class="marquee-content" ref="out">
|
|
<p :class="run?speed:''">
|
|
<span class="text1" ref="in" >{{content}}</span>
|
|
<span class="text2" v-if="showtwo||run">{{content}}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'VueMarquee',
|
|
data (){
|
|
return{
|
|
run: false,
|
|
pWidth: '',
|
|
}
|
|
},
|
|
props: {
|
|
content: {
|
|
default: "暂无公告内容",
|
|
type: String
|
|
},
|
|
speed: {
|
|
default: 'slow',
|
|
type: String
|
|
},
|
|
showtwo: {
|
|
default: true
|
|
}
|
|
},
|
|
watch: {
|
|
content (){
|
|
var _this = this;
|
|
setTimeout(()=>{
|
|
_this.$nextTick(()=>{
|
|
let out = _this.$refs.out.clientWidth;
|
|
let _in = _this.$refs.in.clientWidth;
|
|
_this.pWidth = 2*_in;
|
|
_this.run=_in>out?true:false;
|
|
});
|
|
},0);
|
|
}
|
|
},
|
|
mounted (){
|
|
var _this = this;
|
|
this.$nextTick(()=>{
|
|
let out = _this.$refs.out.clientWidth;
|
|
let _in = _this.$refs.in.clientWidth;
|
|
_this.run=_in>out?true:false;
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.marquee-box {
|
|
height: 24px;
|
|
line-height: 24px;
|
|
color: #DD1D35;
|
|
font-size: 12px;
|
|
}
|
|
.marquee-content{
|
|
overflow: hidden;
|
|
width:100%
|
|
}
|
|
.marquee-content p{
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
margin: 0;
|
|
font-size: 0;
|
|
}
|
|
.marquee-content span{
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
padding-right: 300px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.quick{
|
|
-webkit-animation: marquee 5s linear infinite;
|
|
animation: marquee 5s linear infinite;
|
|
}
|
|
.middle{
|
|
-webkit-animation: marquee 8s linear infinite;
|
|
animation: marquee 8s linear infinite;
|
|
}
|
|
.slow{
|
|
-webkit-animation: marquee 25s linear infinite;
|
|
animation: marquee 25s linear infinite;
|
|
}
|
|
@-webkit-keyframes marquee {
|
|
0% { -webkit-transform: translate3d(0,0,0); }
|
|
100% { -webkit-transform: translate3d(-50%,0,0); }
|
|
}
|
|
@keyframes marquee {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%);}
|
|
}
|
|
</style>
|