<template>
|
<div>
|
<el-carousel
|
type="card"
|
height="200px"
|
:autoplay="false"
|
indicator-position="none"
|
arrow="always"
|
ref="carouselRef"
|
|
>
|
<el-carousel-item
|
v-for="(item, index) in 5"
|
:key="index"
|
>
|
<div
|
class="fill"
|
@touchstart="touchStart"
|
@touchend="moveCard"
|
>
|
<h3>{{ item }}</h3>
|
<el-button @click="$router.push('/agentInfo')" size="small">詳細資訊</el-button>
|
<el-button @click="isVisibleDialog = true" size="small">+聯絡清單</el-button>
|
</div>
|
|
</el-carousel-item>
|
</el-carousel>
|
|
<Ui-Dialog
|
:isVisible.sync="isVisibleDialog"
|
>
|
<span>已加入聯絡清單</span>
|
</Ui-Dialog>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { ElCarousel } from 'element-ui/types/carousel';
|
import { Vue, Component } from 'vue-property-decorator';
|
|
@Component
|
export default class UiCardCarousel extends Vue {
|
isVisibleDialog = false;
|
startPosition = 0;
|
endPosition = 0;
|
|
touchStart(event: TouchEvent) {
|
this.startPosition = event.changedTouches[0].clientX;
|
}
|
|
moveCard(event: any) {
|
this.endPosition = event.changedTouches[0].clientX;
|
if (this.endPosition < this.startPosition) {
|
(this.$refs.carouselRef as ElCarousel).next();
|
return;
|
}
|
|
if (this.endPosition > this.startPosition) {
|
(this.$refs.carouselRef as ElCarousel).prev();
|
return;
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.el-carousel__item {
|
background-color: #d3dce6;
|
}
|
.fill {
|
width: 100%;
|
height: 100%;
|
padding: 3px;
|
}
|
</style>
|
