|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="slide-layout">
|
|
|
+ <div class="slide-layout" ref="continure">
|
|
|
<a class="ctrl up" @click="up">
|
|
|
<slot name="up" />
|
|
|
</a>
|
|
@@ -29,18 +29,19 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
+ continure: 0,
|
|
|
index: this.current
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
left () {
|
|
|
- return this.index / this.screens.length * 100 + '%'
|
|
|
+ return this.index * this.continure + 'px'
|
|
|
},
|
|
|
layoutStyle () {
|
|
|
- return {width: this.screens.length + '00%', transform: `translateX(-${this.left})`}
|
|
|
+ return {width: this.continure * this.screens.length + '00%', transform: `translateX(-${this.left})`}
|
|
|
},
|
|
|
itemStyle () {
|
|
|
- return {width: 1 / this.screens.length * 100 + '%'}
|
|
|
+ return {width: this.continure + 'px'}
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -61,6 +62,16 @@ export default {
|
|
|
this.index = this.screens.length - 1
|
|
|
}
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.sizeHandle = () => {
|
|
|
+ this.continure = this.$refs.continure.offsetWidth
|
|
|
+ }
|
|
|
+ window.addEventListener('resize', this.sizeHandle)
|
|
|
+ setTimeout(this.sizeHandle, 100)
|
|
|
+ },
|
|
|
+ beforeDestroy () {
|
|
|
+ window.removeEventListener('resize', this.sizeHandle)
|
|
|
}
|
|
|
}
|
|
|
</script>
|