letter-list.vue
938 Bytes
1
2
3
4
5
6
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
<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>