如何在Element Plus不同断点下控制元素显隐？（替代Vuetify方案）

如果你习惯了 Vuetify 里用 v-if="$vuetify.breakpoint.md" 来根据断点控制元素显示隐藏，在 Element Plus 里可以用以下几种方案实现，不用局限于内置的 hidden-xs-only 这类类名：

1. 使用官方 Breakpoint 组合式函数（最贴近 Vuetify 用法） #

Element Plus 提供了 useBreakpoint 工具，能直接获取当前断点的响应式状态，搭配 v-if/v-show 就能精准控制：

首先在组件里引入并调用：

<script setup>
import { useBreakpoint } from 'element-plus'
const { breakpoint } = useBreakpoint()
</script>

然后在模板里直接判断：

<template>
  <!-- 仅在 md（≥992px）及以上屏幕显示 -->
  <div v-if="breakpoint.md">中等屏幕及以上可见</div>
  
  <!-- 仅在 sm（≥768px）屏幕显示 -->
  <div v-if="breakpoint.sm && !breakpoint.md">仅小屏幕可见</div>
  
  <!-- 排除 xs（<768px）屏幕显示 -->
  <div v-if="!breakpoint.xs">非超小屏幕可见</div>
</template>

断点对应规则：xs(<768px)、sm(≥768px)、md(≥992px)、lg(≥1200px)、xl(≥1920px)

2. 自定义响应式指令（复用性更高） #

如果需要在多个组件里重复用，可以自定义一个指令，简化模板写法：

<script setup>
import { useBreakpoint } from 'element-plus'
const { breakpoint } = useBreakpoint()

// 自定义 v-show-breakpoint 指令，传入断点键值控制显隐
const vShowBreakpoint = {
  mounted(el, binding) {
    updateDisplay(el, binding.value)
  },
  updated(el, binding) {
    updateDisplay(el, binding.value)
  }
}

function updateDisplay(el, breakpointKey) {
  el.style.display = breakpoint[breakpointKey] ? 'block' : 'none'
}
</script>

<template>
  <div v-show-breakpoint="md">中等屏幕及以上可见</div>
  <div v-show-breakpoint="xs">仅超小屏幕可见</div>
</template>

3. 自定义 CSS 媒体查询类（完全自定义规则） #

要是觉得内置类不够灵活，自己写媒体查询类也很方便：

/* 仅在 md 及以上显示 */
.show-md-up {
  display: none;
}
@media (min-width: 992px) {
  .show-md-up {
    display: block;
  }
}

/* 仅在 xs 到 sm 之间显示 */
.show-xs-sm {
  display: block;
}
@media (min-width: 992px) {
  .show-xs-sm {
    display: none;
  }
}

模板里直接套用类名：

<template>
  <div class="show-md-up">自定义类：中等屏幕及以上可见</div>
  <div class="show-xs-sm">自定义类：超小到小屏幕可见</div>
</template>

内容的提问来源于stack exchange，提问作者skav3n