xiaoshu/src/components/TopBar.vue

<template>
<main>
  <div v-for="(item, key) in list" :key="key" @click="chooseNav(key)">
    <img :src="item.icon" />
  </div>
</main>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  components: {

  },
  props: ['index'],
  setup(props, {emit}) {
    const list = ref([
      {
        icon: new URL('@/assets/icons/riLine-wechat-line.svg',import.meta.url).href,
        type: 'wechat'
      },
      {
        icon: new URL('@/assets/icons/riLine-qr-code-line.svg',import.meta.url).href,
        title: 'qr',
      },
      {
        icon: new URL('@/assets/icons/riLine-time-line.svg',import.meta.url).href,
        title: 'record',
      }
    ]);
    const chooseNav = (index) => {
      emit('choose-nav', index);
    };
    return {
      list,
      chooseNav
    }
  }
})
</script>
<style scoped>
  main {
    display: flex;
    >div {
      width: 24px;
      height: 24px;
      margin-right: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 4px;
      &:hover {
        background: rgba(229, 229, 229, 1);
      }
    }
  }
</style>