<template> <div :class="curClassName" :style="curStyle"> <el-carousel class="carsouel-container" height="150px" indicator-position="outside" :autoplay="swipeConfig.isAuto" :interval="swipeConfig.timeSpan"> <el-carousel-item v-for="item in swipeData" :key="item.key"> <div class="carousel-img-item"> <img class="app-carouse-img" v-if="item.type === 'img'" :src="item.value" @error="imgError" /> <i v-else-if="item.type === 'icon'" :class="item.value"></i> </div> </el-carousel-item> </el-carousel> </div> </template> <script lang='ts'> import { Component, Vue, Prop, Watch } from 'vue-property-decorator'; @Component({}) export default class AppCarousel extends Vue { /** * 模型 * * @type {*} * @memberof AppRawItemImage */ @Prop() public layoutModelDetails!: any; /** * 父项所有数据 * * @type {*} * @memberof AppCarousel */ @Prop() public data?: any; /** * @description 轮播图数据 * @param {*} * @memberof AppCarousel */ @Prop() public value?: any; /** * 名称 * * @type {string} * @memberof AppCarousel */ @Prop() public name!: string; /** * 类型 * * @type {string} * @memberof AppCarousel */ @Prop() public type?: string; /** * 下标 * * @type {number} * @memberof AppCarousel */ @Prop({ default: 0 }) public index?: number; /** * 项名称 * * @type {*} * @memberof AppCarousel */ get itemName() { return this.index ? `${this.name}_${this.index}` : this.name; } /** * 类名 * * @memberof AppCarousel */ get curClassName() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return `app-rawitem-carousel ${this.itemName} ${layoutModel.sysCss}`; } } /** * 当前容器样式 * * @memberof AppCarousel */ get curStyle() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return layoutModel.getElementStyle(); } } /** * @description 轮播图图片所有项数据 * @memberof AppCarousel */ public swipeData: any[] = []; /** * @description 轮播图配置 * @memberof AppCarousel */ public swipeConfig: any = {}; /** * data值变化 * * @param {*} newVal * @param {*} oldVal * @memberof AppCarousel */ @Watch('value', { immediate: true, deep: true }) public onValueChange(newVal: any, oldVal: any) { //处理轮播图-静态数据 if (this.type === "STATIC_CAROUSEL") { this.handleSwipData(newVal); } } @Watch('data', { immediate: true, deep: true }) public onDataChange(newVal: any, oldVal: any) { //处理轮播图-动态数据 if (this.type === "FIELD_CAROUSEL") { const tempData = newVal[this.name] if (tempData) { if (typeof tempData === 'string') { const swipeData = JSON.parse(this.value); this.handDynaSwipData(swipeData); } else if (tempData instanceof Array) { this.handDynaSwipData(tempData); } } } } //处理动态轮播图数据 private handDynaSwipData(data: any[] = []) { if (data && data.length > 0) { this.swipeConfig = this.setSwipeConfig(data); const tempData = data.filter((item: any) => { return !Object.is(item.key, 'autoplay') && !Object.is(item.key, 'timespan'); }) this.swipeData = []; tempData.forEach((item: any) => { if (item.value) { if (item.value.indexOf('fa fa-') < 0) { if (!item.type) { item.type = 'img'; } } else if (!item.type) { item.type = 'icon'; } } this.swipeData.push(JSON.parse(JSON.stringify(item))); }) } } /** * @description 处理静态轮播图数据 * @memberof AppCarousel */ private handleSwipData(data: any[] = []) { if (data && data.length > 0) { const configItem = data.findIndex((item: any) => Object.is(item.key, "autoplay") ); if (configItem > -1) { // 有配置参数就截掉配置参数 this.swipeData = data.slice(0, -2); this.swipeConfig = this.setSwipeConfig(data.slice(-2)); } else { this.swipeData = data; this.swipeConfig = this.setSwipeConfig(data); } } } /** * @description 设置轮播图配置 * @param {*} * @memberof AppRawItem */ private setSwipeConfig(data: any) { const autoPlay: any = data.find((item: any) => Object.is(item.key, "autoplay")) || {}; const timeSpan: any = data.find((item: any) => Object.is(item.key, "timespan")) || {}; let isauto = false; let timespan = 0; if (autoPlay.value && Object.is(autoPlay.value, "1")) { isauto = true; } if (timeSpan.value) { timespan = Number(timeSpan.value); } return { isAuto: isauto, timeSpan: timespan, }; } /** * img src错误 * * @param {*} $event * @memberof AppCarousel */ imgError($event: any) { let img = $event.srcElement; if (img && !img.imgSign) { if (img && !img.imgSign) { img.src = 'assets/img/404.png'; img.imgSign = true; img.imgSign = true; } img.onerror = null; } } } </script> <style lang='less'> @import './app-rawitem-carousel.less'; </style>