Vueは多重化可能なマルチキャストコンポーネントを実現する
33466 ワード
本論文ではvueを用いて単純にマルチキャストマップの基礎機能を実現し,htmlとjs部分の多重化を容易にする共通コンポーネントとして抽出した.
cssスタイルセクション
ただ简単に1つの轮播図の比较的基础の部分を実现して、前に原生で1回书いて、今vueで1回书いて1つのコンポーネントとして、悪くありません
<template>
<div
class="img-box"
ref="img-box"
:style="{width: styles.width, height: styles.height}"
>
<div v-for="(item, index) in imgList"
:key="index"
class="img-item"
:ref="'img-item-' + index"
:class="{'active': index === active}"
>
<img
:src="item"
style="width:100%"
:style="{height: styles.height}"
/>
</div>
<div
class="img-position"
v-if="isShowPosition"
>
<template v-for="(item, index) in imgList">
<span :key="index"
class="img-position-item"
:ref="'img-position-' + index"
:class="[
{'active': index === active},
isCircle ? 'circle' : '',
isNums ? 'nums' : ''
]"
@click="clickSpan(index)"
>
{{isNums ? index + 1 : ''}}
</span>
</template>
</div>
<div
class="left-btn"
v-if="isShowLeftOrRightBtn"
@click="clickBtn('left')"
>
<i class="iconfont roll-zuo"></i>
</div>
<div
class="right-btn"
v-if="isShowLeftOrRightBtn"
@click="clickBtn('right')"
>
<i class="iconfont roll-you"></i>
</div>
</div>
</template>
<script>
export default {
name: 'Roll',
props: {
imgList: { // src
type: Array,
default: () => []
},
isShowPosition: { //
type: Boolean,
default: true
},
positionInner: { //
type: String,
default: 'circle' // , circle => num => both => +
},
isShowLeftOrRightBtn: { //
type: Boolean,
default: true
},
duration: { //
type: [Number, String],
default: 3000
},
styles: { // 500*300
type: Object,
default: () => {
return {
width: '500px',
height: '300px'
}
}
}
},
data () {
return {
active: 0, //
timer: null //
}
},
computed: {
isCircle () {
return ['circle', 'both'].includes(this.positionInner)
},
isNums () {
return ['num', 'both'].includes(this.positionInner)
}
},
updated () {
if (this.timer) this.clearTimer()
this.setTimer()
},
created () {
this.setTimer()
},
methods: {
clickSpan (index) {
this.clearTimer()
this.active = index
},
clickBtn (arg) {
this.clearTimer()
if (arg === 'left') {
this.active = this.active - 1 < 0 ? this.imgList.length - 1 : this.active - 1
} else {
this.active = this.active + 1 === this.imgList.length ? 0 : this.active + 1
}
this.setTimer()
},
setTimer () {
this.timer = setInterval(() => {
this.clickBtn('right')
}, Number(this.duration))
},
clearTimer () {
clearInterval(this.timer)
this.timer = null
}
}
}
</script>
cssスタイルセクション
ただ简単に1つの轮播図の比较的基础の部分を実现して、前に原生で1回书いて、今vueで1回书いて1つのコンポーネントとして、悪くありません