<template>
    <div>
        <div v-if="isBlur" v-for="(item, index) in map" :key="index">
            <text v-if="index <= begin">{{ index }}.{{ item }}</text>
            <text v-if="index == begin + 1" class="blur-light">{{ index }}.{{ item }}</text>
            <text v-if="index == begin + 2" class="blur-medium">{{ index }}.{{ item }}</text>
            <text v-if="index > begin + 2" class="blur-heavy">{{ index }}.{{ item }}</text>
        </div>

        <div v-if="!isBlur" v-for="(item, index) in map" :key="index">
            <text>{{ index }}.{{ item }}</text>

        </div>

    </div>
</template>

<script>

export default {
    name: 'm-map-blur',
    data() {
        return {

        }
    },
    props: {
        map: {
            type: Object,
            default: {}
        },
        begin: {
            type: Number,
            default: 1
        },
        isBlur: {
            type: Boolean,
            default: true
        }
    },
}
</script>

<style lang="less" scoped>
.blur-light {
    color: transparent;
    text-shadow: 2rpx 2rpx 4rpx #000000;
}

.blur-medium {
    color: transparent;
    text-shadow: 2rpx 2rpx 8rpx #000000;
}

.blur-heavy {
    color: transparent;
    text-shadow: 2rpx 2rpx 16rpx #000000;
}
</style>