app-rawitem-carousel.vue

<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>