<template>
<div class="box" style="width:100%;">
<p :class="{'scroll':(options.isRoll || getContentLength(options.text) > options.MaxTength)}">{{options.text}}</p>
</div>
</template>
<script>
export default {
name: 'DfcvDtmsAppTaskschedule',
components: { },
directives: { },
data() {
return {
text:"",
}
},
mounted() {
},
props:{
options:{
type:Object,
default:() => {
return {
text:"无内容无",//文本内容
isRoll:false,//长度多少都滚动
MaxTength:10//长度大于某个值滚动
}
}
}
},
computed:{
},
methods: {
//获取字的长度
getContentLength(text){
let str = ""
str = text
if(str){
return str.length
}else {
return 0
}
}
}
};
</script>
<style scoped>
.box .scroll {
animation: 8s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
0% {
transform: translateX(140px);
-webkit-transform: translateX(140px);
}
100% {
transform: translateX(-150%);
-webkit-transform: translateX(-150%);
}
}
@-webkit-keyframes wordsLoop {
0% {
transform: translateX(140px);
-webkit-transform: translateX(140px);
}
100% {
transform: translateX(-150%);
-webkit-transform: translateX(-150%);
}
}
.box {
width:100%;
height:100%;
display: flex;
overflow: hidden;
color:#FFF;
}
p{
text-align:center;
white-space: nowrap;
margin:0;
}
</style>
当文本超宽时 左右滚动 通知消息
最新推荐文章于 2023-12-27 11:25:01 发布
关键词由CSDN通过智能技术生成