Blame view

public/vues/components/tools/index-list.vue 1.53 KB
1 2
<template>
    <ul class="list-box">
郭成尧 authored
3
        <li v-for="(item, index) in items" :key="index"><a class="no-intercept" :href="`#${item.index}`">{{item.name}}</a></li>
4 5
    </ul>
</template>
陈峰 authored
6
<style lang="scss">
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
    .list-box {
        position: fixed;
        width: 30px;
        margin: 0;
        padding: 6px 0;
        right: 0;
        background: #fff;
        opacity: 0.8;
        top: 0;
        overflow-y: auto;

        li {
            list-style: none;
            text-align: center;
            width: 100%;

            a {
                font-size: 26px;
                display: inline-block;
                width: 100%;
            }
        }
    }

</style>
<script>
    module.exports = {
        props: {
            indexList: Array
        },
        data() {
            return {
                items: []
            };
        },
        watch: {
            indexList() {
                if (this.indexList) {
                    this.items = this.indexList;
                }
            }
        },
        created() {
            if (!this.indexList) {

                // 默认字母表索引数据
                for (let i = 65; i < 91; i++) {
                    let itemTemp = String.fromCharCode(i);

                    this.items.push({
                        index: itemTemp,
                        name: itemTemp
                    });
                }
                this.items.push({
                    index: '0~9',
                    name: '#'
                });
            }
        }
    };

</script>