<template>
    <view class="van-index-anchor-wrapper" :style="wrapperStyle">
        <view :class="'van-index-anchor ' + (active ? 'van-index-anchor--active van-hairline--bottom' : '')" :style="anchorStyle">
            <slot v-if="useSlot" />
            <block v-else>
                <text>{{ index }}</text>
            </block>
        </view>
    </view>
</template>

<script>
'use strict';
Object.defineProperty(exports, '__esModule', {
    value: true
});
var component_1 = require('../common/component');
component_1.VantComponent({
    relation: {
        name: 'index-bar',
        type: 'ancestor',
        current: 'index-anchor'
    },
    props: {
        useSlot: Boolean,
        index: null
    },
    data: {
        active: false,
        wrapperStyle: '',
        anchorStyle: ''
    },
    methods: {
        scrollIntoView: function (scrollTop) {
            var that = this;
            this.getBoundingClientRect().then(function (rect) {
                uni.pageScrollTo({
                    duration: 0,
                    scrollTop: scrollTop + rect.top - that.parent.data.stickyOffsetTop
                });
            });
        },
        getBoundingClientRect: function () {
            return this.getRect('.van-index-anchor-wrapper');
        }
    }
});
</script>
<style>
@import './index.css';
</style>
