Vue實現可復用輪播元件

本文用vue簡單的實現了乙個輪播圖的基礎功能，並抽離出來作為乙個公共元件，方便復用

html和js部分

class
="img-box"
ref=
"img-box"
:style=
"">
for=
"(item, index) in imglist"
:key=
"index"
class
="img-item"
:ref=
"'img-item-' + index"
:class=""
>
:src=
"item"
style=
"width:100%"
:style=""/
>
<
/div>
class
="img-position"
v-if=
"isshowposition"
>
for=
"(item, index) in imglist"
>
"index"
class
="img-position-item"
:ref=
"'img-position-' + index"
:class
="[,
iscircle ?
'circle':''
, isnums ?
'nums':''
]" @click=
"clickspan(index)"
>
}<
/span>
<
/template>
<
/div>
class
="left-btn"
v-if=
"isshowleftorrightbtn"
@click=
"clickbtn('left')"
>
="iconfont roll-zuo"
>
<
/i>
<
/div>
class
="right-btn"
v-if=
"isshowleftorrightbtn"
@click=
"clickbtn('right')"
>
="iconfont roll-you"
>
<
/i>
<
/div>
<
/div>
<
/template>
export
default
, isshowposition:
, positioninner:
, isshowleftorrightbtn:
, duration:
, styles:}}
},data()
},computed:
,isnums()
},updated()
,created()
, methods:
,clickbtn
(arg)
else
this
.settimer()
},settimer()
,number
(this
.duration))}
,cleartimer()
}}<
/script>css樣式部分

基於vue實現swipe輪播元件

輪播是前端專案必有項，當前有很多效果很酷炫的輪播外掛程式，例如swiper。但是當專案中的輪播只需要乙個很簡單的輪播樣式，比如這樣的 我們引用這樣乙個110k的大外掛程式，就大材小用了。再安利一下，swiper2.x和swiper3.x對移動和pc端支援情況如下圖 噹噹噹噹 我們今天的主角登場了，t...

Vue之元件（插槽slot與可復用元件）

作用 通過插槽slot可以更加方便的向子元件傳遞dom元素，同時子元件使用插槽內容也十分簡單，大大簡化了 增加了 可讀性。接下來結合具體案例來了解下 作用域插槽案例 2 獲取資料 在父元件中使用 slot scope 特性從子元件獲取資料 注意 1 在父級中，具有特殊特性 slot scope 的元...

Vue 實現元件可拖拽

一 templateclass item v for item,index in items key index draggable true dragstart handledragstart event,item dragover.prevent handledragover event,ite...