<template> <ul class="list"> <li class="item" v-for="item of letters" :key="item" :ref="item" @touchstart.prevent="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" @click="handleLetterClick" > {{item}} </li> </ul> </template> <script> export default { name: 'CityAlphabet', props: { cities: Object }, computed: { letters () { const letters = [] for (let i in this.cities) { letters.push(i) } return letters } }, data () { return { touchStatus: false, startY: 0, timer: null } }, updated () { this.startY = this.$refs['A'][0].offsetTop }, methods: { handleLetterClick (e) { this.$emit('change', e.target.innerText) }, handleTouchStart () { this.touchStatus = true }, handleTouchMove (e) { if (this.touchStatus) { if (this.timer) { clearTimeout(this.timer) } this.timer = setTimeout(() => { const touchY = e.touches[0].clientY - 79 const index = Math.floor((touchY - this.startY) / 20) if (index >= 0 && index < this.letters.length) { this.$emit('change', this.letters[index]) } }, 8) } }, handleTouchEnd () { this.touchStatus = false } } } </script> <style lang="stylus" scoped> @import '~styles/varibles.styl' .list display: flex flex-direction: column justify-content: center position: absolute top: 1.58rem right: 0 bottom: 0 width: .4rem .item line-height: .4rem text-align: center color: $bgColor </style>这是一下这段代码

这段代码是一个Vue组件，用于显示城市列表的首字母索引条。其中，通过props属性传入一个城市对象，通过computed属性计算出城市列表中的所有首字母，并通过v-for指令渲染到页面上。通过touchstart、touchmove和touchend事件处理滑动事件，并通过计算当前滑动位置来确定用户点击了哪个字母。最后，通过$emit方法触发一个自定义事件，通知父组件用户的选择。样式部分使用了Stylus预处理器，并使用了一些变量。