宿州科技网站建设,一站式网站管家,昆山建设网站公司,深圳做网站500元一、代码组件 注意#xff1a;当公告字数很少时会固定不动#xff0c;当字数达到最大宽度时#xff0c;则会循环播报
templatediv classTopCard!-- 小喇叭 --div stylewidth: 70pxnotify stylewidth: 2…一、代码组件 注意当公告字数很少时会固定不动当字数达到最大宽度时则会循环播报
templatediv classTopCard!-- 小喇叭 --div stylewidth: 70pxnotify stylewidth: 20px;height: 20px;margin-top: 5px//div!-- 滚动文字外层div文字能展示的区域--div classnoticeBox :stylewidth:noticeWidthpx;height:20px;position:relative;overflow:hidden;display:inline-block;vertical-align:middle;!-- 滚动divmarginLeft变化--div :stylemargin-left:marginLeftpx;white-space:nowrapspan classshowNotice{{showNotice}}/span!-- 不会展示用来测量第二条与第一条重合时的长度 --span classnotice{{notice}}/span/div/div/div
/templatescriptimport notify from ../assets/icon/notify.svgexport default {name: Home,components:{notify},props:{noticeData:{type:Array,default:[]}},data () {return {// 适应屏幕分辨率noticeWidth: window.screen.width - 150,// 公告展示过长时会重复两遍showNotice: ,// 用于公告过长时获取重复两遍中第一遍的长度notice: ,// 公告初始位置marginLeft: 150}},mounted () {this.noticeData.forEach((val, index) {if (index 0) {this.showNotice 【 (index 1) 】 val} else {this.showNotice \xa0\xa0\xa0\xa0\xa0\xa0【 (index 1) 】 val}})// 公告上面先赋值再获取宽度setTimeout(() {// 公告div长度var oneNoticeWidth document.getElementsByClassName(showNotice)[0].offsetWidth// 公告外层div长度var noticeBoxWidth document.getElementsByClassName(noticeBox)[0].offsetWidth// 一条公告长度太大时才滚动if (oneNoticeWidth noticeBoxWidth) {// 滚动公告需要将公告重复两遍进行滚动两遍中间需要加空格this.notice this.showNotice \xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0// 上面先赋值再获取宽度setTimeout(() {// 获取一遍加中间空格的长度即左移时第二遍与第一遍完全重合时的长度var oneNoticeAddEmptyWidth document.getElementsByClassName(notice)[0].offsetWidth// 公告内容重复两遍this.showNotice this.notice this.showNoticethis.timer setInterval(() {this.marginLeft - 1// 第二遍与第一遍起始位置重合时第一条已完全移到左侧隐藏marginLeft置0即回到第一条if (this.marginLeft (-1) * oneNoticeAddEmptyWidth) {this.marginLeft 0}}, 20)}, 10)} else { //公告并没有很长时不滚动this.marginLeft 0}}, 10)},}
/scriptstyle scoped /* 公告card */.TopCard .el-card__body{padding:0 10px}/* 公告title */.tips{color:#606266;font-weight:bold}.TopCard{display: flex;flex-direction: row;align-items: center;}
/style二、使用
templatediv div classheaders-middle Notice v-ifthis.noticeData.length0 :noticeDatanoticeData//div/div
/templatescriptimport Notice from ../Notice;export default {data() {return {noticeData: [],}},components: {Notice,},methods: {broadcastContent(){//获取后端的公告数据service.get(/users/config/notice).then(res{console.log(res)if (res.code20000){if (res.message!null){this.setNoticeData(res.message)}}})},setNoticeData(notice){if (this.noticeData!null this.noticeData.length!0){this.noticeData[0] notice}else {this.noticeData [];this.noticeData.push(notice)}}},mounted() {this.broadcastContent();}}
/scriptstyle scoped.headers-middle{position: absolute;left: 300px;top: 10px;width: 45%;}
/style三、效果图循环播报
图一 图二
