Aresn
GitHub
commit
e7f1cf2877
9 changed files with 669 additions and 1 deletions
34
src/components/carousel/carousel-item.vue
Normal file
34
src/components/carousel/carousel-item.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<div :class="prefixCls" v-bind:style="styles"><slot></slot></div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
const prefixCls = 'ivu-carousel-item';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
componentName: 'carousel-item',
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
prefixCls: prefixCls,
|
||||||
|
width: 0,
|
||||||
|
height: 'auto',
|
||||||
|
left: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
styles () {
|
||||||
|
return {
|
||||||
|
width: `${this.width}px`,
|
||||||
|
height: `${this.height}`,
|
||||||
|
left: `${this.left}px`
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
compiled () {
|
||||||
|
this.$parent.slotChange();
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
this.$parent.slotChange();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
238
src/components/carousel/carousel.vue
Normal file
238
src/components/carousel/carousel.vue
Normal file
|
|
@ -0,0 +1,238 @@
|
||||||
|
<template>
|
||||||
|
<div :class="classes">
|
||||||
|
<button :class="arrowClasses" class="left" @click="add(-1)">
|
||||||
|
<Icon type="chevron-left"></Icon>
|
||||||
|
</button>
|
||||||
|
<div :class="[prefixCls + '-list']">
|
||||||
|
<div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button :class="arrowClasses" class="right" @click="add(1)">
|
||||||
|
<Icon type="chevron-right"></Icon>
|
||||||
|
</button>
|
||||||
|
<ul :class="dotsClasses">
|
||||||
|
<template v-for="n in slides.length">
|
||||||
|
<li :class="{ [`${prefixCls}-active`]: n === currentIndex }"
|
||||||
|
@click="dotsEvent('click', n)"
|
||||||
|
@mouseover="dotsEvent('hover', n)">
|
||||||
|
<button></button>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Icon from '../icon/icon.vue';
|
||||||
|
import { getStyle, oneOf } from '../../utils/assist';
|
||||||
|
|
||||||
|
const prefixCls = 'ivu-carousel';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Carousel',
|
||||||
|
components: { Icon },
|
||||||
|
props: {
|
||||||
|
arrow: {
|
||||||
|
type: String,
|
||||||
|
default: 'hover',
|
||||||
|
validator (value) {
|
||||||
|
return oneOf(value, ['hover', 'always', 'never']);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
autoplay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
autoplaySpeed: {
|
||||||
|
type: Number,
|
||||||
|
default: 2000
|
||||||
|
},
|
||||||
|
easing: {
|
||||||
|
type: String,
|
||||||
|
default: 'ease'
|
||||||
|
},
|
||||||
|
dots: {
|
||||||
|
type: String,
|
||||||
|
default: 'inside',
|
||||||
|
validator (value) {
|
||||||
|
return oneOf(value, ['inside', 'outside', 'none']);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
trigger: {
|
||||||
|
type: String,
|
||||||
|
default: 'click',
|
||||||
|
validator (value) {
|
||||||
|
return oneOf(value, ['click', 'hover']);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
currentIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 'auto',
|
||||||
|
validator (value) {
|
||||||
|
return value === 'auto' || toString.call(value) === '[object Number]';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
prefixCls: prefixCls,
|
||||||
|
listWidth: 0,
|
||||||
|
trackWidth: 0,
|
||||||
|
trackOffset: 0,
|
||||||
|
slides: [],
|
||||||
|
slideInstances: [],
|
||||||
|
timer: null,
|
||||||
|
ready: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classes () {
|
||||||
|
return [
|
||||||
|
`${prefixCls}`
|
||||||
|
];
|
||||||
|
},
|
||||||
|
trackStyles () {
|
||||||
|
return {
|
||||||
|
width: `${this.trackWidth}px`,
|
||||||
|
transform: `translate3d(-${this.trackOffset}px, 0px, 0px)`,
|
||||||
|
transition: `transform 500ms ${this.easing}`
|
||||||
|
};
|
||||||
|
},
|
||||||
|
arrowClasses () {
|
||||||
|
return [
|
||||||
|
`${prefixCls}-arrow`,
|
||||||
|
`${prefixCls}-arrow-${this.arrow}`
|
||||||
|
];
|
||||||
|
},
|
||||||
|
dotsClasses () {
|
||||||
|
return [
|
||||||
|
`${prefixCls}-dots`,
|
||||||
|
`${prefixCls}-dots-${this.dots}`
|
||||||
|
];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// find option component
|
||||||
|
findChild (cb) {
|
||||||
|
const find = function (child) {
|
||||||
|
const name = child.$options.componentName;
|
||||||
|
|
||||||
|
if (name) {
|
||||||
|
cb(child);
|
||||||
|
} else if (child.$children.length) {
|
||||||
|
child.$children.forEach((innerChild) => {
|
||||||
|
find(innerChild, cb);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.slideInstances.length || !this.$children) {
|
||||||
|
this.slideInstances.forEach((child) => {
|
||||||
|
find(child);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$children.forEach((child) => {
|
||||||
|
find(child);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateSlides (init ) {
|
||||||
|
let slides = [];
|
||||||
|
let index = 1;
|
||||||
|
|
||||||
|
this.findChild((child) => {
|
||||||
|
slides.push({
|
||||||
|
$el: child.$el
|
||||||
|
});
|
||||||
|
child.index = index++;
|
||||||
|
|
||||||
|
if (init) {
|
||||||
|
this.slideInstances.push(child);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.slides = slides;
|
||||||
|
|
||||||
|
this.updatePos();
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
},
|
||||||
|
// use when slot changed
|
||||||
|
slotChange () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.slides = [];
|
||||||
|
this.slideInstances = [];
|
||||||
|
|
||||||
|
this.updateSlides(true, true);
|
||||||
|
this.updatePos();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleResize () {
|
||||||
|
this.listWidth = parseInt(getStyle(this.$el, 'width'));
|
||||||
|
this.updatePos();
|
||||||
|
},
|
||||||
|
add (offset) {
|
||||||
|
let index = this.currentIndex;
|
||||||
|
index += offset;
|
||||||
|
while (index < 0) index += this.slides.length;
|
||||||
|
index = index % this.slides.length;
|
||||||
|
this.currentIndex = index;
|
||||||
|
},
|
||||||
|
dotsEvent (event, n) {
|
||||||
|
if (event === this.trigger && this.currentIndex !== n) {
|
||||||
|
this.currentIndex = n;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setAutoplay () {
|
||||||
|
window.clearInterval(this.timer);
|
||||||
|
if (this.autoplay) {
|
||||||
|
this.timer = window.setInterval(() => {
|
||||||
|
this.add(1);
|
||||||
|
}, this.autoplaySpeed);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateOffset () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.handleResize();
|
||||||
|
this.trackOffset = this.currentIndex * this.listWidth;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
compiled () {
|
||||||
|
this.updateSlides(true);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
autoplay () {
|
||||||
|
this.setAutoplay();
|
||||||
|
},
|
||||||
|
autoplaySpeed () {
|
||||||
|
this.setAutoplay();
|
||||||
|
},
|
||||||
|
currentIndex (val, oldVal) {
|
||||||
|
this.$emit('on-change', oldVal, val);
|
||||||
|
this.updateOffset();
|
||||||
|
},
|
||||||
|
height () {
|
||||||
|
this.updatePos();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
ready () {
|
||||||
|
this.handleResize();
|
||||||
|
this.setAutoplay();
|
||||||
|
window.addEventListener('resize', this.handleResize, false);
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
window.removeEventListener('resize', this.handleResize, false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
5
src/components/carousel/index.js
Normal file
5
src/components/carousel/index.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import Carousel from './carousel.vue';
|
||||||
|
import CarouselItem from './carousel-item.vue';
|
||||||
|
|
||||||
|
Carousel.Item = CarouselItem;
|
||||||
|
export default Carousel;
|
||||||
|
|
@ -8,6 +8,7 @@ import Badge from './components/badge';
|
||||||
import Breadcrumb from './components/breadcrumb';
|
import Breadcrumb from './components/breadcrumb';
|
||||||
import Button from './components/button';
|
import Button from './components/button';
|
||||||
import Card from './components/card';
|
import Card from './components/card';
|
||||||
|
import Carousel from './components/carousel';
|
||||||
import Cascader from './components/cascader';
|
import Cascader from './components/cascader';
|
||||||
import Checkbox from './components/checkbox';
|
import Checkbox from './components/checkbox';
|
||||||
import Circle from './components/circle';
|
import Circle from './components/circle';
|
||||||
|
|
@ -53,6 +54,8 @@ const iview = {
|
||||||
iButton: Button,
|
iButton: Button,
|
||||||
ButtonGroup: Button.Group,
|
ButtonGroup: Button.Group,
|
||||||
Card,
|
Card,
|
||||||
|
Carousel,
|
||||||
|
CarouselItem: Carousel.Item,
|
||||||
Cascader,
|
Cascader,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
CheckboxGroup: Checkbox.Group,
|
CheckboxGroup: Checkbox.Group,
|
||||||
|
|
|
||||||
175
src/styles/components/carousel.less
Normal file
175
src/styles/components/carousel.less
Normal file
|
|
@ -0,0 +1,175 @@
|
||||||
|
@carousel-prefix-cls: ~"@{css-prefix}carousel";
|
||||||
|
@carousel-item-prefix-cls: ~"@{css-prefix}carousel-item";
|
||||||
|
|
||||||
|
.@{carousel-prefix-cls} {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
user-select: none;
|
||||||
|
touch-action: pan-y;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
|
||||||
|
&-track, &-list {
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-list {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-track {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
float: left;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 1px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-arrow {
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
z-index: 10;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
|
||||||
|
transition: .3s;
|
||||||
|
background-color: rgba(31, 45, 61, .11);
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(31, 45, 61, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1em;
|
||||||
|
|
||||||
|
font-family: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.left {
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-always {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-hover {
|
||||||
|
display: inherit;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover &-arrow-hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-dots {
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
@padding: 7px;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
&-inside {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px - @padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-outside {
|
||||||
|
display: block;
|
||||||
|
margin-top: 10px - @padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 3px + @padding * 2;
|
||||||
|
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
margin: 0 2px;
|
||||||
|
padding: @padding 0;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
background: #8391a5;
|
||||||
|
opacity: 0.3;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
width: 16px;
|
||||||
|
height: 3px;
|
||||||
|
|
||||||
|
border-radius: 1px;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
font-size: 0;
|
||||||
|
color: transparent;
|
||||||
|
|
||||||
|
-webkit-transition: all .5s;
|
||||||
|
transition: all .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover > button {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.@{carousel-prefix-cls}-active > button {
|
||||||
|
opacity: 1;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -35,4 +35,5 @@
|
||||||
@import "date-picker";
|
@import "date-picker";
|
||||||
@import "time-picker";
|
@import "time-picker";
|
||||||
@import "form";
|
@import "form";
|
||||||
@import "rate";
|
@import "carousel";
|
||||||
|
@import "rate";
|
||||||
|
|
|
||||||
|
|
@ -47,6 +47,7 @@ li + li {
|
||||||
<li><a v-link="'/menu'">Menu</a></li>
|
<li><a v-link="'/menu'">Menu</a></li>
|
||||||
<li><a v-link="'/date'">Date</a></li>
|
<li><a v-link="'/date'">Date</a></li>
|
||||||
<li><a v-link="'/form'">Form</a></li>
|
<li><a v-link="'/form'">Form</a></li>
|
||||||
|
<li><a v-link="'/carousel'">Carousel</a></li>
|
||||||
<li><a v-link="'/rate'">Rate</a></li>
|
<li><a v-link="'/rate'">Rate</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -135,6 +135,11 @@ router.map({
|
||||||
require(['./routers/form.vue'], resolve);
|
require(['./routers/form.vue'], resolve);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
'/carousel': {
|
||||||
|
component: function (resolve) {
|
||||||
|
require(['./routers/carousel.vue'], resolve);
|
||||||
|
}
|
||||||
|
},
|
||||||
'/rate': {
|
'/rate': {
|
||||||
component: function (resolve) {
|
component: function (resolve) {
|
||||||
require(['./routers/rate.vue'], resolve);
|
require(['./routers/rate.vue'], resolve);
|
||||||
|
|
|
||||||
206
test/routers/carousel.vue
Normal file
206
test/routers/carousel.vue
Normal file
|
|
@ -0,0 +1,206 @@
|
||||||
|
<template>
|
||||||
|
<Row>
|
||||||
|
<i-col span="2">
|
||||||
|
Current Index
|
||||||
|
<p>{{ currentIndex }}</p>
|
||||||
|
</i-col>
|
||||||
|
<i-col span="2">
|
||||||
|
<p>Autoplay</p>
|
||||||
|
<Switch :checked.sync="autoplay" size="small"></Switch>
|
||||||
|
</i-col>
|
||||||
|
<i-col span="4">
|
||||||
|
Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
|
||||||
|
</i-col>
|
||||||
|
<i-col span="4">
|
||||||
|
Switch To
|
||||||
|
<Button-group>
|
||||||
|
<i-button @click="currentIndex = 0">0</i-button>
|
||||||
|
<i-button @click="currentIndex = 1">1</i-button>
|
||||||
|
<i-button @click="currentIndex = 2">2</i-button>
|
||||||
|
</Button-group>
|
||||||
|
</i-col>
|
||||||
|
<i-col span="4">
|
||||||
|
<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>
|
||||||
|
<i-button @click="dots = 'inside'">Inside</i-button>
|
||||||
|
<i-button @click="dots = 'outside'">Outside</i-button>
|
||||||
|
<i-button @click="dots = 'none'">None</i-button>
|
||||||
|
</Button-group>
|
||||||
|
</i-col>
|
||||||
|
<i-col span="4">
|
||||||
|
<p>Trigger</p>
|
||||||
|
<Button-group>
|
||||||
|
<i-button @click="trigger = 'click'">Click</i-button>
|
||||||
|
<i-button @click="trigger = 'hover'">Hover</i-button>
|
||||||
|
</Button-group>
|
||||||
|
</i-col>
|
||||||
|
<i-col span="4">
|
||||||
|
Arrow
|
||||||
|
<Button-group>
|
||||||
|
<i-button @click="arrow = 'hover'">Hover</i-button>
|
||||||
|
<i-button @click="arrow = 'always'">Always</i-button>
|
||||||
|
<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; 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">
|
||||||
|
<Alert type="warning" show-icon>
|
||||||
|
警告提示文案
|
||||||
|
<template slot="desc">
|
||||||
|
警告的提示描述文案警告的提示描述文案警告的提示描述文案
|
||||||
|
</template>
|
||||||
|
</Alert>
|
||||||
|
</Carousel-item>
|
||||||
|
<Carousel-item>
|
||||||
|
<div style="height: 150px; 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>
|
||||||
|
<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>
|
||||||
|
<Card style="width:350px">
|
||||||
|
<p slot="title">
|
||||||
|
<Icon type="ios-film-outline"></Icon>
|
||||||
|
经典电影
|
||||||
|
</p>
|
||||||
|
<a href="#" slot="extra">
|
||||||
|
<Icon type="ios-loop-strong"></Icon>
|
||||||
|
换一换
|
||||||
|
</a>
|
||||||
|
<ul>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</Card>
|
||||||
|
</Carousel-item>
|
||||||
|
<Carousel-item style="text-align: center">
|
||||||
|
<Icon type="checkmark" style="font-size: 5em"></Icon>
|
||||||
|
</Carousel-item>
|
||||||
|
<Carousel-item>test3</Carousel-item>
|
||||||
|
<Carousel-item v-for="item in pushItem" track-by="$index">
|
||||||
|
<Icon type="checkmark" style="font-size: 5em"></Icon>{{item}}
|
||||||
|
</Carousel-item>
|
||||||
|
</Carousel>
|
||||||
|
<div style="max-height: 200px; overflow: scroll">
|
||||||
|
<p v-for="item in log" track-by="$index">{{item}}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card style="width:350px">
|
||||||
|
<p slot="title">
|
||||||
|
<Icon type="ios-film-outline"></Icon>
|
||||||
|
经典电影
|
||||||
|
</p>
|
||||||
|
<Carousel>
|
||||||
|
<Carousel-item v-if="!remove">
|
||||||
|
<Alert type="warning" show-icon>
|
||||||
|
警告提示文案
|
||||||
|
<template slot="desc">
|
||||||
|
警告的提示描述文案警告的提示描述文案警告的提示描述文案
|
||||||
|
</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>
|
||||||
|
</Carousel>
|
||||||
|
</Card>
|
||||||
|
<Tabs>
|
||||||
|
<Tab-pane label="标签一">
|
||||||
|
<Carousel>
|
||||||
|
<Carousel-item v-if="!remove">
|
||||||
|
<Alert type="warning" show-icon>
|
||||||
|
警告提示文案
|
||||||
|
<template slot="desc">
|
||||||
|
警告的提示描述文案警告的提示描述文案警告的提示描述文案
|
||||||
|
</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>
|
||||||
|
</Carousel>
|
||||||
|
</Tab-pane>
|
||||||
|
<Tab-pane label="标签二" disabled>标签二的内容</Tab-pane>
|
||||||
|
<Tab-pane label="标签三">
|
||||||
|
<Carousel>
|
||||||
|
<Carousel-item v-if="!remove">
|
||||||
|
<Alert type="warning" show-icon>
|
||||||
|
警告提示文案
|
||||||
|
<template slot="desc">
|
||||||
|
警告的提示描述文案警告的提示描述文案警告的提示描述文案
|
||||||
|
</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>
|
||||||
|
</Carousel>
|
||||||
|
</Tab-pane>
|
||||||
|
</Tabs>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
currentIndex: 0,
|
||||||
|
autoplay: true,
|
||||||
|
autoplaySpeed: 2000,
|
||||||
|
remove: false,
|
||||||
|
pushItem: [],
|
||||||
|
arrow: 'hover',
|
||||||
|
trigger: 'click',
|
||||||
|
dots: 'inside',
|
||||||
|
height: 'auto',
|
||||||
|
log: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
push () {
|
||||||
|
this.pushItem.push('test');
|
||||||
|
},
|
||||||
|
slideChange (from, to) {
|
||||||
|
this.log.push(`From ${from} To ${to}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Add table
Reference in a new issue