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 Button from './components/button';
|
||||
import Card from './components/card';
|
||||
import Carousel from './components/carousel';
|
||||
import Cascader from './components/cascader';
|
||||
import Checkbox from './components/checkbox';
|
||||
import Circle from './components/circle';
|
||||
|
|
@ -53,6 +54,8 @@ const iview = {
|
|||
iButton: Button,
|
||||
ButtonGroup: Button.Group,
|
||||
Card,
|
||||
Carousel,
|
||||
CarouselItem: Carousel.Item,
|
||||
Cascader,
|
||||
Checkbox,
|
||||
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 "time-picker";
|
||||
@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="'/date'">Date</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>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -135,6 +135,11 @@ router.map({
|
|||
require(['./routers/form.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/carousel': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/carousel.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/rate': {
|
||||
component: function (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