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…).