NoticeBar 通知栏组件，封装好的可直接使用

1.项目中遇到NoticeBar效果怎么写
建一个NoticeBar.vue组件
组件代码如下

<template><transition name="fade"><!--主要内容--><div class="noticebar" :style="{backgroundColor:data.backround}"><div style="margin-left:5px"></div><img v-if="data.icon" :style="{height:data.iconSize?data.iconSize:'16px',width:data.iconSize?data.iconSize:'16px'}" :src=data.icon alt=""><div style="margin-right:5px"></div><div ref="back" class="back"><span ref="text" :style="{fontSize:data.size?data.size:'16px',color:data.color?data.color:'#f60'}" class="text">{{ data.text?data.text:'通知内容' }}</span></div></div></transition>
</template>
<script>
export default {props: {options: {type: Object,default() {return {text: '默认'};}}},data() {return {speed: this.options.speed, // 速度（单位px/s）backWidth: '', // 父级宽度backHeight: '', // 父级高度wordLength: '', // 文本长度state: 1,firstAnimationTime: '', // 状态一动画效果secondAnimationTime: '', // 状态二动画效果data: this.options};},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);},// 用速度计算时间（想要保持速度一样，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`;}},Listener() {let text = this.$refs.text;console.log(text);text.addEventListener('animationend',res => {this.changeState();},false);}},mounted() {this.Listener();setTimeout(res => {this.getData();}, 100);}
};
</script>
<style lang="less" scoped>
.noticebar {display: flex;align-items: center;height: 100%;width: 100%;background-color: #fff7cc;.icon {img {height: 100%;width: 100%;}}.back {overflow: hidden;white-space: nowrap;margin: 0 auto;height: 100%;width: 100%;position: relative;.text {position: absolute;display: inline-block;padding: 2px 0;}}
}
</style>

调用的时候如下

<template><transition name="fade"><div class="wrap"><div class="father"><noticebar :options=options></noticebar></div></div></transition>
</template>
<script>
import noticebar from './noticebar';
export default {components: {noticebar},data() {return {// noticebar 组件的配置项options: {text:'关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解', // 通知内容icon:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=735421754,4062673022&fm=26&gp=0.jpg', // 左侧图标(不需要icon不传)iconSize: '16px', // icon大小（正方形默认16px）size: '16px', // 通知内容文字大小（默认16px）color: '#1989fa', // 通知内容文字颜色(默认#f60)backround: '#fff7cc', //背景颜色(默认#fff7cc)delay: '1000', // 动画延迟时间(默认一秒后开始滚动，单位毫秒)speed: '50' // 滚动速率默认50 (px/s)}};}
};
</script>
<style lang="less" scoped>
.wrap {.father {margin: 150px auto;height: 60px;width: 100%;img {height: 100%;width: 20px;}}
}
</style>

NoticeBar 通知栏组件，封装好的可直接使用相关推荐

实现NoticeBar 通知栏。走马灯公告栏
前言微信小程序封装公共组件--实现NoticeBar 通知栏.走马灯公告栏一.使用步骤 1.引入库代码如下(示例): "usingComponents": {"va ...
Vue + Element UI 实现权限管理系统前端篇（七）：功能组件封装
组件封装为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构组件封装重构后,试图组件结构如下图所示代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State
开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...
【uniapp】组件封装与引用
前言 Hbuilder X 2.7.14.20200618 假设需求在 [uni-app]自定义导航栏/标题栏中提到,可以全局取消原生导航栏.全局取消原生导航栏后,就需要为每个页面均添加一个自定义 ...
React学习：ref调用、组件封装调用-学习笔记
文章目录 React学习:ref调用.组件封装调用-学习笔记 ref调用-string形式 ref调用-回调形式(官方推荐) ref调用-父调子组件封装调用demo(全选) demo1(单组件) d ...
Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
RabbitMQ 拓展基础组件封装思路
RabbitMQ 拓展基础组件封装思路一线大厂的MQ组件实现思路和架构设计思路
php 小程序自定义图,微信小程序之如何使用自定义组件封装原生 image 组件
零.问题的由来一般在前端展示图片时都会碰到这两个常见的需求: 图片未加载完成时先展示占位图,等到图片加载完毕后再展示实际的图片. 假如图片链接有问题(比如 404),依然展示占位图.甚至你还可以增加 ...
Vue自定义组件封装及使用Excel
Vue自定义组件封装及使用Excel 一.js-xlsx 组件安装二. 创建vue组件三.使用四.效果图一.js-xlsx 组件安装 npm install xlsx --savenpm in ...

NoticeBar 通知栏组件，封装好的可直接使用

NoticeBar 通知栏组件，封装好的可直接使用相关推荐

最新文章

热门文章