npm组件 vue-scroll-ad 广告滚动

前言

闲着没事，作了一个商场项目，而后发现商城项目中，有不少地方都要用到广告滚动的效果，就想着写个组件，这样之后也不用老是重复写一遍（复制一遍）。

第一次写组件，参考了好多文档，而后找到了一个大佬写的，很是详细，收了，打算写组件的能够看看：blog.csdn.net/qq_40513881…

正文

先上效果图

基本一个项目里有单列的广告就能够知足了，可是我参考的网站上有个多列的滚动，也顺便作了一个，可是对于悬浮变色效果还有待改进。

使用步骤

安装

npm install --save vue-scroll-ad
复制代码

使用

main.js中

import scrollAd from 'vue-scroll-ad'
Vue.use(scrollAd)
复制代码

html中

<scroll-ad :dataList = "adList"></scroll-ad>
复制代码

配置

props	describe	type	default
dataList	数据	Array	[]
inhoverColor	显示的颜色	String	#b4a078
hoverColor	鼠标悬浮时的颜色	String	#fff
height	高度	String	10px
hasLine	是否有下划线	Boolean	false
hasBorder	横向多数据是否有分割线	Boolean	false
speed	速度	Number	5000
valueList	横线显示的子数据参数名	String	list
valueContent	显示的内容的参数名	String	content
valueLink	跳转的连接的参数名	String	link

使用示例

单列有下划线

<scroll-show class="ad"
	:dataList="adList"
	hover-color="#b4a078"
	inhover-color="#000"
	:hasLine="true"
></scroll-show>

adList: [
   { content: "广告内容1", link: "xxx.com" },
   { content: "广告内容2", link: "xxx.com" },
   { content: "广告内容3", link: "xxx.com" },
   { content: "广告内容4", link: "xxx.com" },
   { content: "广告内容5", link: "xxx.com" },
   { content: "广告内容6", link: "xxx.com" }
],
复制代码

list的格式若是是: [{ content: "xxx", link: "xxx.com" }],则不须要传valueContent和valueLink，不然须要制定内容和连接的自定义参数名

多列无下划线

<scroll-show class="ad"
 	:dataList="adList2"
 	:speed="3000"
 	hover-color="#b4a078"
 	inhover-color="#969696"
 	value-list="subList"
 	value-content="adContent"
 	value-link="adLink"
></scroll-show>
 
adList2: [
    {
        subList: [
            { adContent: "第1条广告的第1条内容", adLink: "xxx.com" },
            { adContent: "第1条广告的第2条内容", adLink: "xxx.com" },
            { adContent: "第1条广告的第3条内容", adLink: "xxx.com" },
            { adContent: "第1条广告的第4条内容", adLink: "xxx.com" }
        ]
    },
    {
        subList: [
            { adContent: "第2条广告的第1条内容", adLink: "xxx.com" },
            { adContent: "第2条广告的第2条内容", adLink: "xxx.com" },
            { adContent: "第2条广告的第3条内容", adLink: "xxx.com" },
            { adContent: "第2条广告的第4条内容", adLink: "xxxx.com" }
        ]
    },
    {
        subList: [
            { adContent: "第3条广告的第1条内容", adLink: "xxx.com" },
            { adContent: "第3条广告的第2条内容", adLink: "xxx.com" },
            { adContent: "第3条广告的第3条内容", adLink: "xxx.com" },
            { adContent: "第3条广告的第4条内容", adLink: "xxx.com" }
        ]
    }
],
复制代码

多列展现须要list数据中还有subList数据，默认的sub参数名为list，若是不一致，则须要传value-list=""进行自定义命名

GitHub地址(github.com/SaltedFishH…).