ghn-marquee-plugin v1.0.3

ghn-marquee-plugin

安装

# 安装
npm install ghn-marquee-plugin --save

使用

• ghn-marquee-one为不固定长度，内容会全部显示
• ghn-marquee-two为固定长度，超过长度的使用...代替，且内部实现方式不一样。

# main.js
import GhnMarqueePlugin from "../static/ghn-marquee-plugin.js"
Vue.use(GhnMarqueePlugin);

# 组件内
<ghn-marquee-one :lists="realData" style="width: 400px;" @getTitle="getTitle"></ghn-marquee-one>
<ghn-marquee-two :lists="realData" style="width: 400px;" @getTitle="getTitle"></ghn-marquee-two>

# realData数据格式
realData: [
  { icon: 'el-icon-edit', num: "1", content: '111作家杰罗姆·大卫·塞林格创作的唯一1一部长作家杰罗姆·大卫·塞林格创作的唯一一部长1', },
  { icon: 'icon iconfont icon-xiaoyu', num: "2", content: '22作家杰罗姆·大卫·塞林格创作的唯一2一部长作家杰罗姆·大卫·塞林格创作的唯一一部长2', },
  { icon: '', num: "3", content: '33作家杰罗姆·大卫·塞林格创作的唯一3一部长作家杰罗姆·大卫·塞林格创作的唯一一部长3331', },
  { icon: '', num: "4", content: '44作家杰罗姆·大卫·塞林格创作的唯一4一部长作家杰罗姆·大卫·塞林格创作的唯一一部长44', },
  { icon: '', num: "5", content: '55作家杰罗姆·大卫·塞林格创作的唯一5一部长作家杰罗姆·大卫·塞林格创作的唯一一部长44', },
],

# 返回函数及参数
getTitle(title){
  console.log(title);
},


# ghn-marquee-two 额外参数
<ghn-marquee-two :lists="realData" style="width: 400px;" @getTitle="getTitle" :totalWidth="1200" :amount="4" :height="50"></ghn-marquee-two>

# 默认值
:amount="4" 
:totalWidth="1200" 
:height="50"

amount为不折叠的数组长度，实际数组长度要多于这个数量，才会进行滚动
totalWidth是数组总长度，如果amount为4，则每条占300px，多余的信息会变成...

功能

• 将列表信息循环滚动展示信息
• 鼠标悬停暂停滚动
• 鼠标离开继续滚动
• 鼠标点击返回当前项
• 允许添加图标