added height props
This commit is contained in:
Rijn
parent
8738f4d304
commit
9cd69375d8
4 changed files with 48 additions and 33 deletions
|
|
@ -11,6 +11,7 @@
|
|||
return {
|
||||
prefixCls: prefixCls,
|
||||
width: 0,
|
||||
height: 'auto',
|
||||
left: 0
|
||||
};
|
||||
},
|
||||
|
|
@ -18,6 +19,7 @@
|
|||
styles () {
|
||||
return {
|
||||
width: `${this.width}px`,
|
||||
height: `${this.height}`,
|
||||
left: `${this.left}px`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
</button>
|
||||
<div :class="[prefixCls + '-list']">
|
||||
<div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
|
||||
<!-- opacity: 1; width: 4480px; transform: translate3d(-1120px, 0px, 0px); -->
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -56,13 +55,13 @@
|
|||
type: String,
|
||||
default: 'click'
|
||||
},
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
currentIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: 'auto'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -70,25 +69,23 @@
|
|||
prefixCls: prefixCls,
|
||||
listWidth: 0,
|
||||
trackWidth: 0,
|
||||
trackLeft: 0,
|
||||
trackOffset: 0,
|
||||
slides: [],
|
||||
slideInstances: [],
|
||||
timer: null
|
||||
timer: null,
|
||||
ready: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-vertical`]: this.vertical
|
||||
}
|
||||
`${prefixCls}`
|
||||
];
|
||||
},
|
||||
trackStyles () {
|
||||
return {
|
||||
width: `${this.trackWidth}px`,
|
||||
transform: `translate3d(-${this.trackLeft}px, 0px, 0px)`,
|
||||
transform: `translate3d(-${this.trackOffset}px, 0px, 0px)`,
|
||||
transition: `transform 500ms ${this.easing}`
|
||||
};
|
||||
},
|
||||
|
|
@ -103,11 +100,6 @@
|
|||
`${prefixCls}-dots`,
|
||||
`${prefixCls}-dots-${this.dots}`
|
||||
]
|
||||
},
|
||||
activeDot (n) {
|
||||
return {
|
||||
[`${prefixCls}-vertical`]: this.currentIndex === n
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -125,7 +117,7 @@
|
|||
}
|
||||
};
|
||||
|
||||
if (this.slideInstances.length) {
|
||||
if (this.slideInstances.length || !this.$children) {
|
||||
this.slideInstances.forEach((child) => {
|
||||
find(child);
|
||||
});
|
||||
|
|
@ -157,6 +149,7 @@
|
|||
updatePos () {
|
||||
this.findChild((child) => {
|
||||
child.width = this.listWidth;
|
||||
child.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
||||
});
|
||||
|
||||
this.trackWidth = (this.slides.length || 0) * this.listWidth;
|
||||
|
|
@ -172,10 +165,8 @@
|
|||
});
|
||||
},
|
||||
handleResize () {
|
||||
this.$nextTick(() => {
|
||||
this.listWidth = parseInt(getStyle(this.$el, 'width'));
|
||||
this.updatePos();
|
||||
});
|
||||
},
|
||||
add (offset) {
|
||||
let index = this.currentIndex;
|
||||
|
|
@ -198,6 +189,12 @@
|
|||
this.add(1);
|
||||
}, this.autoplaySpeed);
|
||||
}
|
||||
},
|
||||
updateOffset () {
|
||||
this.$nextTick(() => {
|
||||
this.handleResize();
|
||||
this.trackOffset = this.currentIndex * this.listWidth;
|
||||
});
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
|
|
@ -211,10 +208,10 @@
|
|||
this.setAutoplay();
|
||||
},
|
||||
currentIndex (val, oldVal) {
|
||||
this.$emit('on-change', oldVal, val);
|
||||
this.$nextTick(() => {
|
||||
this.trackLeft = this.currentIndex * this.listWidth;
|
||||
});
|
||||
this.updateOffset();
|
||||
},
|
||||
height () {
|
||||
this.updatePos();
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
|
|
|
|||
|
|
@ -103,21 +103,22 @@
|
|||
}
|
||||
|
||||
&-dots {
|
||||
z-index: 10;
|
||||
|
||||
@padding: 7px;
|
||||
|
||||
display: none;
|
||||
|
||||
position: relative;
|
||||
&-inside {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 10px - @padding;
|
||||
}
|
||||
|
||||
&-outside {
|
||||
margin-top: 10px - @padding;
|
||||
}
|
||||
|
||||
display: block;
|
||||
&-none {
|
||||
display: none;
|
||||
margin-top: 10px - @padding;
|
||||
}
|
||||
|
||||
list-style: none;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@
|
|||
<i-button @click="push">Push</i-button>
|
||||
<i-button @click="remove = true">Remove Front</i-button>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Row>
|
||||
<i-col span="4">
|
||||
<p>Dots</p>
|
||||
<Button-group>
|
||||
|
|
@ -46,14 +48,21 @@
|
|||
<i-button @click="arrow = 'never'">Never</i-button>
|
||||
</Button-group>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
Height
|
||||
<i-button @click="height = 'auto'">Auto</i-button>
|
||||
<i-button @click="height = 80">Manual</i-button>
|
||||
<Slider v-if="height !== 'auto'" :value.sync="height" :min="50" :max="200"></Slider>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Carousel style="width: 50%; border: solid 1px #000"
|
||||
<Carousel style="width: 50%; border: solid 1px #000; margin-top: 20px;"
|
||||
:current-index.sync="currentIndex"
|
||||
:autoplay="autoplay"
|
||||
:autoplay-speed="autoplaySpeed"
|
||||
:dots="dots"
|
||||
:trigger="trigger"
|
||||
:arrow="arrow"
|
||||
:height="height"
|
||||
@on-change="slideChange"
|
||||
easing="linear">
|
||||
<Carousel-item v-if="!remove">
|
||||
|
|
@ -64,6 +73,11 @@
|
|||
</template>
|
||||
</Alert>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
|
||||
<p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
|
||||
</div>
|
||||
</Carousel-item>
|
||||
<Carousel-item style="text-align: center">
|
||||
<Icon type="checkmark" style="font-size: 5em"></Icon>
|
||||
</Carousel-item>
|
||||
|
|
@ -73,7 +87,7 @@
|
|||
</Carousel-item>
|
||||
</Carousel>
|
||||
<div>
|
||||
<p v-for="item in log">{{item}}</p>
|
||||
<p v-for="item in log" track-by="$index">{{item}}</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -88,6 +102,7 @@
|
|||
arrow: 'hover',
|
||||
trigger: 'click',
|
||||
dots: 'inside',
|
||||
height: 'auto',
|
||||
log: []
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue