95 lines
2.3 KiB
JavaScript
95 lines
2.3 KiB
JavaScript
|
|
Vue.component("roll-amplify-img", {
|
|
template: `
|
|
<div class="amplify-carousel" v-show="imgShow" style="display: none">
|
|
<div class="amplify-carousel-img">
|
|
<img :src="imgUrl">
|
|
</div>
|
|
<div class="amplify-carousel-close" @click="onCloseBtn">
|
|
<i class="el-icon-close"></i>
|
|
</div>
|
|
<div class="amplify-carousel-btn amplify-carousel-left" @click="onTowardsLeft">
|
|
<i class="el-icon-arrow-left"></i>
|
|
</div>
|
|
<div class="amplify-carousel-btn amplify-carousel-right" @click="onTowardsRight">
|
|
<i class="el-icon-arrow-right"></i>
|
|
</div>
|
|
|
|
</div>
|
|
`,
|
|
props: {
|
|
list:{
|
|
type:Array
|
|
},
|
|
url:{
|
|
type:String
|
|
},
|
|
show:{
|
|
type:Boolean
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
index: -1,
|
|
imgUrl:'',
|
|
imgShow:false
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted(){
|
|
|
|
},
|
|
methods: {
|
|
init(){
|
|
this.imgUrl = this.url
|
|
this.imgShow = this.show
|
|
this.towards()
|
|
},
|
|
towards(){
|
|
for (let i = 0; i < this.list.length ; i++) {
|
|
if(this.list[i] == this.imgUrl){
|
|
this.index = i
|
|
break
|
|
}
|
|
}
|
|
},
|
|
onTowardsLeft(){
|
|
this.index = this.index - 1
|
|
if(this.index < 0){
|
|
this.imgUrl = this.list[this.list.length-1]
|
|
this.index = this.list.length-1
|
|
}else{
|
|
this.imgUrl = this.list[this.index]
|
|
}
|
|
},
|
|
onTowardsRight(){
|
|
this.index = this.index + 1
|
|
if(this.index > this.list.length-1){
|
|
this.imgUrl = this.list[0]
|
|
this.index = 0
|
|
}else{
|
|
this.imgUrl = this.list[this.index]
|
|
}
|
|
},
|
|
onCloseBtn(){
|
|
this.imgShow = false
|
|
this.$emit("show",false)
|
|
},
|
|
|
|
},
|
|
watch:{
|
|
list:function (o,n) {
|
|
this.init()
|
|
},
|
|
url:function (o,n) {
|
|
this.init()
|
|
},
|
|
show:function (o,n) {
|
|
this.init()
|
|
}
|
|
},
|
|
|
|
})
|