letter-list.vue 938 Bytes
<template>
    <ul class="list-box">
        <li v-for="item in items"><a href="#{{item.index}}">{{item.name}}</a></li>
    </ul>
</template>
<style>
    .list-box {
        position: fixed;
        height: 100%;
        width: 30px;
        margin: 0;
        padding: 6px;
        right: 0;
        border-radius: 8px;
        background: #fff;
        opacity: 0.8;

        li {
            list-style: none;
        }
    }

</style>
<script>
//    var $ = require('yoho-jquery');
    let items = [];

    module.exports = {
        data() {
            return {
                items: items
            };
        },
        init() {

            // 品牌索引数据
            for (let i = 65; i < 91; i++) {
                let itemTemp = String.fromCharCode(i);

                items.push({
                    index: itemTemp,
                    name: itemTemp
                });
            }
        }
    };

</script>