基于Vue的横向跑马灯提示(vue-marquee-tips)-用法与遇到的坑

基于Vue的横向跑马灯提示(vue-marquee-tips)-用法与遇到的坑

插件链接:https://github.com/wg5945/vue-marquee-tips
记录一下使用心得,这里不再详述。

1.npm安装或cnpm安装

npm install vue-marquee-tips --save-dev
cnpm install vue-marquee-tips --save-dev

2. vue-marquee-tips的使用

//引入组件、注册组件
import MarqueeTips from 'vue-marquee-tips'
export default {
  components: {
    MarqueeTips
  }
}

//使用方法：
<MarqueeTips content="我是一个短短的提示！"></MarqueeTips>
<MarqueeTips content="我是一个比较长的提示！拉吧拉吧拉吧拉吧拉吧拉吧拉吧拉吧拉吧拉吧拉吧拉吧~~~~" style="color: red" :speed="3"></MarqueeTips>
<MarqueeTips content="加大字体提示：BigBigBigBig" style="font-size: 30px" font="30px sans-serif"></MarqueeTips>
             
<div style="width: 200px;margin: 0 auto;background-color: orange;">
  <MarqueeTips content="容器内提示：22222222222222222" :speed="3"></MarqueeTips>
  <MarqueeTips content="容器内提示：1111"></MarqueeTips>
</div>

Options：

3. 作者留下的坑及解决方法

图一是作者写的一个方法，主要是用于修改外部css文件，虽然本地运行是没有问题的，可是提交到服务器后是报错，获取不到link标签的属性。deleteKeyFrame ： 通过styleSheets找可能不准确， 会遇到不匹配cssRules（rules）的情况，详情看图二。

这里我没有截图控制台的报错，不过看图二就好。初步判断是可能因为引入了其他样式所导致的，可是后面就排除了。在网上找了很多解决办法都没找到合适的，最终判断是因为vue在本地运行时，css文件是未编译后的文件，所以可以通过styleSheets获取到cssRules，而vue打包编辑后，导致css文件编译了，从而无法获取，为null。详情看图三。

图三是我自己在vue文件打包后,自己添加的一个空白的.css文件,用来通过styleSheets获取到cssRules。看图是可以获取到的，也已经动态的赋值样式上去了。

注：其实主要的原因是作者写的通过styleSheets获取到cssRules属性，不是动态去获取的。导致出现了上述的问题。只要在打包后文件重新添加一个空白的css文件就可以解决了。

希望可以帮到大家。