37、滚动展示-中

<script>
export default {
    props: {
        // 是否反向
        reverse: {
            type: [Boolean],
            default: function () {
                return false
            }
        },
        // 偏移的百分比
        offsetPrecent: {
            type: [Number],
            default: function () {
                return 10
            }
        },
        // 滚动模式，单条或者整页，可选值为 item 或者 page
        mode: {
            type: [String],
            default: function () {
                return 'item'
            }
        },
        // 动画的持续时间，ms为单位
        transitionDuration: {
            type: [Number],
            default: function () {
                return 500
            }
        },
        // 单条动画之间的间隔时间
        animationInterval: {
            type: [Number],
            default: function () {
                return 100
            }
        },
        // 轮播的间隔时间，ms为单位
        intervalTime: {
            type: [Number],
            default: function () {
                return 3000
            }
        },
        // 显示的条数
        showCount: {
            type: [Number],
            default: function () {
                return 3
            }
        },
        // 鼠标悬停的时候是否暂停
        hoverPause: {
            type: [Boolean],
            default: function () {
                return true
            }
        },
        // 起始模糊程度
        startBlur: {
            type: [Number],
            default: function () {
                return 0
            }
        },
        // 结束模糊程度
        endBlur: {
            type: [Number],
            default: function () {
                return 0 * window.innerHeight / 1440
            }

        },
        // 起始透明度
        startOpacity: {
            type: [Number],
            default: function () {
                return 1
            }
        },
        // 结束透明度
        endOpacity: {
            type: [Number],
            default: function () {
                return 1
            }
        },
        // 类名
        className: {
            type: [String],
            default: function () {
                return ''
            }
        },

        // 是否使用复制模式，即传入的数据小于等于要显示的条数的时候，自动复制

        repeat: {
            type: [Boolean],
            default: function () {
                return false
            }
        }
    },
    data: function () {
        return {
            msg: 'banner',
            enable: true,
            childrenDom: [],
            repeatTime: 1,
            active: 0,
            originLength: 0,
            timer: 0,
            alive: true
        }
    },
    mounted: function () {
        this.alive = true
        /* eslint-disable */
        this.intervalTime !== 0 && this.animationFrame()
        setTimeout(() => {
            this.computeChildrenDom().then(() => {
                this.computeContainerHeight()
                this.computeItemStyle()
            })
        }, 0)
    },

    watch: {
        // activeIndex: function (newVal) {
        //     this.$emit('changeActive', (newVal + 1) % this.children.length)
        // }
    },
    beforeUpdate: function () { },
    beforeDestroy: function () {
        this.alive = false
    }
}
</script>