3.9 Browser – usePreferredLanguages
https://vueuse.org/usePreferredLanguages
作用
它为web开发人员提供有关用户首选语言的信息。例如,这可能有助于根据用户的首选语言调整用户界面的语言,以提供更好的体验。
官方示例
import { usePreferredLanguages } from '@vueuse/core'
const languages = usePreferredLanguages() // [ "zh-CN", "zh" ]
源码分析
需要知道以下知识:
window.navigator.languages
拿到浏览器的首选语言- 可以监听
languagechange
事件
export function usePreferredLanguages(options: ConfigurableWindow = {}): Ref<readonly string[]> {
const { window = defaultWindow } = options
if (!window)
return ref(['en'])
const navigator = window.navigator
const value = ref<readonly string[]>(navigator.languages)
useEventListener(window, 'languagechange', () => {
value.value = navigator.languages
})
return value
}