bk-vue/src/App.vue

<script setup lang="ts">
import { RouterView } from 'vue-router';

import SideMenu from './layouts/BlogMenu.vue';
import Footer from './layouts/BlogFooter.vue';
import { ref } from 'vue';
import LoginAlert from '@/layouts/LoginAlert.vue'

const displayLoginAlert = ref(false);

let pressTimer: number | null = null;
const LONG_PRESS_DURATION = 1000;

const avatarMouseDownHandler = () => {
  pressTimer = window.setTimeout(() => {
    displayLoginAlert.value = true;
  }, LONG_PRESS_DURATION);
};

const avatarMouseUpHandler = () => {
  if (pressTimer) {
    window.clearTimeout(pressTimer);
    pressTimer = null;
  }
};

</script>

<template>
  <div class="container">
    <div class="aside">
      <div class="avatar-box">
        <img src="./assets/headset.jpg" alt="avatar" class="avatar" @mousedown.prevent="avatarMouseDownHandler" @mouseup.prevent="avatarMouseUpHandler"/>
        <div class="info">
          <span class="blogger">枫叶秋林</span>
          <span class="desc">枫林天天忙，不想写代码</span>
        </div>
      </div>
      <SideMenu />
    </div>
    <div class="main">
      <RouterView />
      <Footer />
    </div>
    <LoginAlert v-model="displayLoginAlert"/>
  </div>
</template>

<style scoped>

</style>