检测设备类型,根据设备类型渲染内容
npm install vue-device-detect检测设备类型,根据设备类型渲染内容
``
npm install vue-device-detect --save
or
yarn add vue-device-detect
`
Example:
内置的组件渲染
`ts
// main.ts
import { vueDeviceDetect } from 'vue-device-detect'
app.use(vueDeviceDetect)
``
内置的组件ts`
export interface GlobalComponents {
BrowserView: void
ChromeView: void
EdgeView: void
MobileView: void
WindowsView: void
SafariView: void
AndroidView: void
}
`html`
This is rendered only in browser
This is rendered only on mobile
你也可以通过内置的API判断
`ts`
// main.ts
import { isMobile } from 'vue-device-detect'
##API
Available selectors:
| prop | type | description |
| ------------------ | ------- | -------------------------------------------------------------------------------------- |
| isMobile | bool | 设备类型为 mobile or tablet |mobile
| isMobileOnly | bool | 设备类型为 |tablet
| isTablet | bool | 设备类型为 |browser
| isBrowser (legacy) | bool | 设备类型为 |browser
| isDesktop | bool | 设备类型为 (an alias of the isBrowser type |smarttv
| isSmartTV | bool | 设备类型为 |wearable
| isWearable | bool | 设备类型为 |console
| isConsole | bool | 设备类型为 |embedded
| isEmbedded | bool | 设备类型为 |Android
| isAndroid | bool | 操作系统为 |Windows Phone
| isWinPhone | bool | 操作系统为 |iOS
| isIOS | bool | 操作系统为 |Chrome
| isChrome | bool | 浏览器类型 |Firefox
| isFirefox | bool | 浏览器类型 |Safari
| isSafari | bool | 浏览器类型 |Opera
| isOpera | bool | 浏览器类型 |Internet Explorer
| isIE | bool | 浏览器类型 |Edge
| isEdge | bool | 浏览器类型 or Edge Chromium |Yandex
| isYandex | bool | 浏览器类型 |Chromium
| isChromium | bool | 浏览器类型 |Mobile Safari
| isMobileSafari | bool | 浏览器类型 |Samsung Browser
| isSamsungBrowser | bool | 浏览器类型 |LG
| osVersion | string | 返回操作版本 |
| osName | string | 返回操作系统名字 |
| browserName | string | 返回浏览器名字 |
| mobileVendor | string | 手机品牌 (e.g , iPhone etc) |Nexus 5
| mobileModel | string | 手机设备类型 (e.g ) |name
| engineName | string | 浏览器引擎的 (e.g Gecko for FF or Blink for Chrome) |mobile
| deviceType | string | 设备类型 ( or tablet) |Electron
| isIOS13 | boolean | iOS13 |
| isIPhone13 | boolean | iOS13 |
| isIPad13 | boolean | iOS13 |
| isIPod13 | boolean | iOS13 |
| isElectron | boolean | |Edge Chromium
| isEdgeChromium | boolean | |Edge
| isLegacyEdge | boolean | 浏览器类型 |Windows
| isWindows | boolean | returns true/false if os is |Mac OS` |
| isMacOs | boolean |