forked from opentiny/tiny-vue
47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<template>
|
|
<div class="index-bar-wrapper">
|
|
<tiny-index-bar :index-list="indexList" @change="indexChange" @select="selectIndex">
|
|
<div v-for="item in indexList" :key="item">
|
|
<tiny-index-bar-anchor :index="item"></tiny-index-bar-anchor>
|
|
<div>内容 {{ item }}</div>
|
|
<div>内容 {{ item }}</div>
|
|
<div>内容 {{ item }}</div>
|
|
<div>内容 {{ item }}</div>
|
|
</div>
|
|
</tiny-index-bar>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="jsx">
|
|
import { IndexBar, IndexBarAnchor, Modal } from '@opentiny/vue'
|
|
|
|
export default {
|
|
components: {
|
|
TinyIndexBar: IndexBar,
|
|
TinyIndexBarAnchor: IndexBarAnchor
|
|
},
|
|
data() {
|
|
return {
|
|
indexList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.indexList = Array.from(new Array(26), (ele, index) => String.fromCharCode(65 + index))
|
|
},
|
|
methods: {
|
|
indexChange(value) {
|
|
Modal.message({ message: 'change事件:' + value })
|
|
},
|
|
selectIndex(value) {
|
|
Modal.message({ message: 'select事件:' + value })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.index-bar-wrapper {
|
|
width: 414px;
|
|
}
|
|
</style>
|