52 lines
1.2 KiB
Markdown
52 lines
1.2 KiB
Markdown
|
# 视口数据
|
|||
|
|
|
|||
|
|
命名空间：`core/viewport`
|
|||
|
|
|
|||
|
|
## 选择器
|
|||
|
|
|
|||
|
|
<!-- START TOKEN(Autogenerated selectors|../../../packages/viewport/src/store/selectors.js) -->
|
|||
|
|
|
|||
|
|
### isViewportMatch
|
|||
|
|
|
|||
|
|
若视口匹配指定查询条件则返回 true，否则返回 false。
|
|||
|
|
|
|||
|
|
_使用示例_
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
import { store as viewportStore } from '@wordpress/viewport';
|
|||
|
|
import { useSelect } from '@wordpress/data';
|
|||
|
|
import { __ } from '@wordpress/i18n';
|
|||
|
|
const ExampleComponent = () => {
|
|||
|
|
const isMobile = useSelect(
|
|||
|
|
( select ) => select( viewportStore ).isViewportMatch( '< small' ),
|
|||
|
|
[]
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
return isMobile ? (
|
|||
|
|
<div>{ __( '移动端' ) }</div>
|
|||
|
|
) : (
|
|||
|
|
<div>{ __( '非移动端' ) }</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
_参数说明_
|
|||
|
|
|
|||
|
|
- _state_ `Object`: 视口状态对象
|
|||
|
|
- _query_ `string`: 查询字符串。包含运算符和断点名称，以空格分隔。运算符默认为 >=
|
|||
|
|
|
|||
|
|
_返回值_
|
|||
|
|
|
|||
|
|
- `boolean`: 视口是否匹配查询条件
|
|||
|
|
|
|||
|
|
<!-- END TOKEN(Autogenerated selectors|../../../packages/viewport/src/store/selectors.js) -->
|
|||
|
|
|
|||
|
|
## 操作
|
|||
|
|
|
|||
|
|
此包中的操作不应直接使用。
|
|||
|
|
|
|||
|
|
<!-- START TOKEN(Autogenerated actions|../../../packages/viewport/src/store/actions.js) -->
|
|||
|
|
|
|||
|
|
暂无需要说明的内容
|
|||
|
|
|
|||
|
|
<!-- END TOKEN(Autogenerated actions|../../../packages/viewport/src/store/actions.js) -->
|