VueUse中文文档usePreferredContrast
响应式 prefers-contrast
Reactive prefers-contrast media query.
例子
Usage
js
import { usePreferredContrast } from '@vueuse/core'
const preferredContrast = usePreferredContrast()
import { usePreferredContrast } from '@vueuse/core'
const preferredContrast = usePreferredContrast()
Component Usage
该函数还通过
@vueuse/components提供了一个无渲染的组件版本。了解更多.
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<UsePreferredContrast v-slot="{ contrast }">
Preferred Color Scheme: {{ contrast }}
<UsePreferredContrast>
<UsePreferredContrast v-slot="{ contrast }">
Preferred Color Scheme: {{ contrast }}
<UsePreferredContrast>
Type Declarations
typescript
export type ContrastType = "more" | "less" | "custom" | "no-preference"
/**
* Reactive prefers-contrast media query.
*
* @see https://vueuse.org/usePreferredContrast
* @param [options]
*/
export declare function usePreferredContrast(
options?: ConfigurableWindow
): ComputedRef<ContrastType>
export type ContrastType = "more" | "less" | "custom" | "no-preference"
/**
* Reactive prefers-contrast media query.
*
* @see https://vueuse.org/usePreferredContrast
* @param [options]
*/
export declare function usePreferredContrast(
options?: ConfigurableWindow
): ComputedRef<ContrastType>