vueuse的useBreakpoints函数的使用场景

关于vueuse我就不多介绍了。简单的说就是对于vue一个补充的框架工具类库，有不少功能还是比较实用的，虽然有很多功能，实际项目中真正使用的也就那几个，今天就说说在响应式布局中常用的函数，useBreakpoints。

vueuse版本：10.3.0

场景，响应式改变组件属性

css的媒体查询大家应该都熟悉，他是通过css来改变的html的布局的，大部分情况下都可以满足需求了，但是有些组件的属性，并非是css，而我们需要在不同分辨率下，给组件传递不同的值，那么就要用到useBreakpoints函数了。

就以<el-tooltip>组件为例，他有一个placement属性，我想在大屏幕下，传递属性bottom，移动端下传递top。那么这个需求通过媒体查询是无法实现的。

import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

首先引入包，breakpointsTailwind是断点适配的一个内置方案，看名字就是使用Tailwind的方案，其实大部分响应式断点都差不多，如果你想用自己的断片方案，那么也可以自己写。

const breakpoints = useBreakpoints(breakpointsTailwind)
const smaller = breakpoints.smaller('sm')

这样smaller就是一个响应式变量，当屏幕是小屏幕的时候，则为true，否则为false，到这里是不是就茅塞顿开了？

<ElTooltip :placement="smaller?'top':'bottom'"></ElTooltip>

通过一个三元运算，就很轻松实现了所期望的功能了。

当然通过useBreakpoints函数可以实现各种功能，大家自己慢慢发掘吧。