3.9 Browser -- usePreferredLanguages

weixin_mouren

已于 2024-09-02 08:52:56 修改

阅读量141

点赞数 6

分类专栏： vueuse源码解析文章标签：前端 javascript vue.js

于 2024-09-02 08:52:03 首次发布

本文链接：https://blog.csdn.net/weixin_44438233/article/details/141804270

版权

vueuse源码解析专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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
}