如何仅从平板电脑屏幕上的鼠标悬停和鼠标悬停触发事件，直到Vue.js？

Question

我想要一个功能，该功能只能在平板电脑屏幕上使用。这是我目前正在做的事情：@mouseover="$emit('activate', title)" **@mouseout="$emit('activate', null)"**。但我希望此事件仅在中等屏幕以上才触发。我正在使用 tailwind 作为 CSS 。 有人可以将此事件绑定到 md：hover 顺风 class 吗？

<template>
  <div  @mouseover="$emit('activate', title)" @mouseout="$emit('activate', null)" class="bg-white rounded shadow md:w-1/3 md:hover xl:w-1/5 relative md:h-full pl-4 pr-3 md:px-6 py-4 md:pt-14 mx-4 mt-4">
    <div class="inline-flex md:block justify-start">
      <img :src="imgSource" :alt="text" class="w-12 h-12"> 
      <div class="ml-4 md:ml-0 mt-1 md:mt-2">
        <h3 class="text-left md:text-center">{{ title }}</h3>
        <p class="-mt-2 md:mt-2 mt-1 md:mt-2 text-xs md:text-base text-grey text-left">{{ text }}</p>
        <div v-if="expanded" class="flex flex-col flex-start">
            <div class="inline-flex items-end p-2">
                <img src="/images/pre-sign-onboarding/Icons-Validate-Green.svg" :alt="itemOne" class="w-4 h-4">  
                    <p class="-mt-2 -mb-2 md:mt-2 mt-1 md:mt-2 text-xs md:text-base text-grey text-left">{{ itemOne }}</p>
            </div>
            <div class="inline-flex items-end p-2">
                <img src="/images/pre-sign-onboarding/Icons-Validate-Green.svg" :alt="itemTwo" class="w-4 h-4">  
                    <p class="-mt-2 -mb-2 md:mt-2 mt-1 md:mt-2 text-xs md:text-base text-grey text-left">{{ itemTwo }}</p>
            </div>
             <div class="inline-flex items-end p-2">
                <img :src="iconSource" :alt="itemThree" class="w-4 h-4">  
                    <p class="-mt-2 -mb-2 md:mt-2 mt-1 md:mt-2 text-xs md:text-base text-grey text-left">{{ itemThree }}</p>
            </div>
        </div>
        </div>
      </div>
      <button v-if="expanded" class="btn btn-pink w-32 text-center px-2 mt-2 md:mt-4 py-2" @click="select">Select</button>
      <div class="md:hidden absolute pin-r pin-b mb-2 mr-4" @click="$emit('activate', title)">
        <img v-if="!expanded" src="/images/pre-sign-onboarding/Icons - Disclosure Off.svg" alt="CheckboxEmpty" class="h-4 w-4">
      </div> 
    </div>
</template>