1.0.3 • Published 2 years ago

vue-device-detect v1.0.3

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

vue-device-detect

检测设备类型,根据设备类型渲染内容

安装

npm install vue-device-detect --save

or

yarn add vue-device-detect

使用

Example:

内置的组件渲染

// main.ts
import { vueDeviceDetect } from 'vue-device-detect'

app.use(vueDeviceDetect)

内置的组件

export interface GlobalComponents {
  BrowserView: void
  ChromeView: void
  EdgeView: void
  MobileView: void
  WindowsView: void
  SafariView: void
  AndroidView: void
}
<BrowserView>
  <h1>This is rendered only in browser</h1>
</BrowserView>
<MobileView>
  <h1>This is rendered only on mobile</h1>
</MobileView>

你也可以通过内置的API判断

// main.ts
import { isMobile } from 'vue-device-detect'

##API

Selectors

Available selectors:

proptypedescription
isMobilebool设备类型为 mobile or tablet
isMobileOnlybool设备类型为 mobile
isTabletbool设备类型为 tablet
isBrowser (legacy)bool设备类型为 browser
isDesktopbool设备类型为 browser (an alias of the isBrowser type
isSmartTVbool设备类型为 smarttv
isWearablebool设备类型为 wearable
isConsolebool设备类型为 console
isEmbeddedbool设备类型为 embedded
isAndroidbool操作系统为 Android
isWinPhonebool操作系统为 Windows Phone
isIOSbool操作系统为 iOS
isChromebool浏览器类型 Chrome
isFirefoxbool浏览器类型 Firefox
isSafaribool浏览器类型 Safari
isOperabool浏览器类型 Opera
isIEbool浏览器类型 Internet Explorer
isEdgebool浏览器类型 Edge or Edge Chromium
isYandexbool浏览器类型 Yandex
isChromiumbool浏览器类型 Chromium
isMobileSafaribool浏览器类型 Mobile Safari
isSamsungBrowserbool浏览器类型 Samsung Browser
osVersionstring返回操作版本
osNamestring返回操作系统名字
browserNamestring返回浏览器名字
mobileVendorstring手机品牌 (e.g LG, iPhone etc)
mobileModelstring手机设备类型 (e.g Nexus 5)
engineNamestring浏览器引擎的 name (e.g Gecko for FF or Blink for Chrome)
deviceTypestring设备类型 ( mobile or tablet)
isIOS13booleaniOS13
isIPhone13booleaniOS13
isIPad13booleaniOS13
isIPod13booleaniOS13
isElectronbooleanElectron
isEdgeChromiumbooleanEdge Chromium
isLegacyEdgeboolean浏览器类型 Edge
isWindowsbooleanreturns true/false if os is Windows
isMacOsbooleanMac OS