vue-device-detect/dist/index.mjs

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

import { defineComponent, h } from 'vue';
import UAParser from 'ua-parser-js';

const ClientUAInstance = new UAParser();
const browser = ClientUAInstance.getBrowser();
ClientUAInstance.getCPU();
const device = ClientUAInstance.getDevice();
const engine = ClientUAInstance.getEngine();
const os = ClientUAInstance.getOS();
const ua = ClientUAInstance.getUA();
function parseUA(userAgent) {
  const ua2 = new UAParser(userAgent);
  return {
    browser: ua2.getBrowser(),
    cpu: ua2.getCPU(),
    device: ua2.getDevice(),
    engine: ua2.getEngine(),
    os: ua2.getOS(),
    ua: ua2.getUA()
  };
}

const DeviceTypes = {
  Mobile: "mobile",
  Tablet: "tablet",
  SmartTv: "smarttv",
  Console: "console",
  Wearable: "wearable",
  Embedded: "embedded",
  Browser: void 0
};
const BrowserTypes = {
  Chrome: "Chrome",
  Firefox: "Firefox",
  Opera: "Opera",
  Yandex: "Yandex",
  Safari: "Safari",
  InternetExplorer: "Internet Explorer",
  Edge: "Edge",
  Chromium: "Chromium",
  Ie: "IE",
  MobileSafari: "Mobile Safari",
  EdgeChromium: "Edge Chromium",
  MIUI: "MIUI Browser",
  SamsungBrowser: "Samsung Browser"
};
const OsTypes = {
  IOS: "iOS",
  Android: "Android",
  WindowsPhone: "Windows Phone",
  Windows: "Windows",
  MAC_OS: "Mac OS"
};

const setDefaults = (p, d = "none") => p || d;
const getNavigatorInstance = () => {
  if (typeof window !== void 0) {
    if (window.navigator || navigator)
      return window.navigator || navigator;
  }
  return false;
};
const isIOS13Check = (type) => {
  const nav = getNavigatorInstance();
  return nav && nav.platform && (nav.platform.includes(type) || nav.platform === "MacIntel" && nav.maxTouchPoints > 1 && !window.MSStream);
};

const isMobileType = ({ type }) => type === DeviceTypes.Mobile;
const isTabletType = ({ type }) => type === DeviceTypes.Tablet;
const isMobileAndTabletType = ({ type }) => type === DeviceTypes.Mobile || type === DeviceTypes.Tablet;
const isSmartTVType = ({ type }) => type === DeviceTypes.SmartTv;
const isBrowserType = ({ type }) => type === DeviceTypes.Browser;
const isWearableType = ({ type }) => type === DeviceTypes.Wearable;
const isConsoleType = ({ type }) => type === DeviceTypes.Console;
const isEmbeddedType = ({ type }) => type === DeviceTypes.Embedded;
const getMobileVendor = ({ vendor }) => setDefaults(vendor);
const getMobileModel = ({ model }) => setDefaults(model);
const getDeviceType = ({ type }) => setDefaults(type, "browser");
const isAndroidType = ({ name }) => name === OsTypes.Android;
const isWindowsType = ({ name }) => name === OsTypes.Windows;
const isMacOsType = ({ name }) => name === OsTypes.MAC_OS;
const isWinPhoneType = ({ name }) => name === OsTypes.WindowsPhone;
const isIOSType = ({ name }) => name === OsTypes.IOS;
const getOsVersion = ({ version }) => setDefaults(version);
const getOsName = ({ name }) => setDefaults(name);
const isChromeType = ({ name }) => name === BrowserTypes.Chrome;
const isFirefoxType = ({ name }) => name === BrowserTypes.Firefox;
const isChromiumType = ({ name }) => name === BrowserTypes.Chromium;
const isEdgeType = ({ name }) => name === BrowserTypes.Edge;
const isYandexType = ({ name }) => name === BrowserTypes.Yandex;
const isSafariType = ({ name }) => name === BrowserTypes.Safari || name === BrowserTypes.MobileSafari;
const isMobileSafariType = ({ name }) => name === BrowserTypes.MobileSafari;
const isOperaType = ({ name }) => name === BrowserTypes.Opera;
const isIEType = ({ name }) => name === BrowserTypes.InternetExplorer || name === BrowserTypes.Ie;
const isMIUIType = ({ name }) => name === BrowserTypes.MIUI;
const isSamsungBrowserType = ({ name }) => name === BrowserTypes.SamsungBrowser;
const getBrowserFullVersion = ({ version }) => setDefaults(version);
const getBrowserVersion = ({ major }) => setDefaults(major);
const getBrowserName = ({ name }) => setDefaults(name);
const getEngineName = ({ name }) => setDefaults(name);
const getEngineVersion = ({ version }) => setDefaults(version);
const isElectronType = () => {
  const nav = getNavigatorInstance();
  const ua = nav && nav.userAgent && nav.userAgent.toLowerCase();
  return ua === "string" ? /electron/.test(ua) : false;
};
const isEdgeChromiumType = (ua) => typeof ua === "string" && ua.includes("Edg/");
const getIPad13 = () => isIOS13Check("iPad");
const getIphone13 = () => isIOS13Check("iPhone");
const getIPod13 = () => isIOS13Check("iPod");
const getIOS13 = () => {
  const nav = getNavigatorInstance();
  return nav && (/iPad|iPhone|iPod/.test(nav.platform) || nav.platform === "MacIntel" && nav.maxTouchPoints > 1) && !window.MSStream;
};

const isSmartTV = isSmartTVType(device);
const isConsole = isConsoleType(device);
const isWearable = isWearableType(device);
const isEmbedded = isEmbeddedType(device);
const isMobileSafari = isMobileSafariType(browser) || getIPad13();
const isChromium = isChromiumType(browser);
const isMobile = isMobileAndTabletType(device) || getIPad13();
const isMobileOnly = isMobileType(device);
const isTablet = isTabletType(device) || getIPad13();
const isBrowser = isBrowserType(device);
const isDesktop = isBrowserType(device);
const isAndroid = isAndroidType(os);
const isWinPhone = isWinPhoneType(os);
const isIOS = isIOSType(os) || getIPad13();
const isChrome = isChromeType(browser);
const isFirefox = isFirefoxType(browser);
const isSafari = isSafariType(browser);
const isOpera = isOperaType(browser);
const isIE = isIEType(browser);
const osVersion = getOsVersion(os);
const osName = getOsName(os);
const fullBrowserVersion = getBrowserFullVersion(browser);
const browserVersion = getBrowserVersion(browser);
const browserName = getBrowserName(browser);
const mobileVendor = getMobileVendor(device);
const mobileModel = getMobileModel(device);
const engineName = getEngineName(engine);
const engineVersion = getEngineVersion(engine);
const isEdge = isEdgeType(browser) || isEdgeChromiumType(ua);
const isYandex = isYandexType(browser);
const deviceType = getDeviceType(device);
const isIOS13 = getIOS13();
const isIPad13 = getIPad13();
const isIPhone13 = getIphone13();
const isIPod13 = getIPod13();
const isElectron = isElectronType();
const isEdgeChromium = isEdgeChromiumType(ua);
const isLegacyEdge = isEdgeType(browser) && !isEdgeChromiumType(ua);
const isWindows = isWindowsType(os);
const isMacOs = isMacOsType(os);
const isMIUI = isMIUIType(browser);
const isSamsungBrowser = isSamsungBrowserType(browser);

var checklist = /*#__PURE__*/Object.freeze({
  __proto__: null,
  isSmartTV: isSmartTV,
  isConsole: isConsole,
  isWearable: isWearable,
  isEmbedded: isEmbedded,
  isMobileSafari: isMobileSafari,
  isChromium: isChromium,
  isMobile: isMobile,
  isMobileOnly: isMobileOnly,
  isTablet: isTablet,
  isBrowser: isBrowser,
  isDesktop: isDesktop,
  isAndroid: isAndroid,
  isWinPhone: isWinPhone,
  isIOS: isIOS,
  isChrome: isChrome,
  isFirefox: isFirefox,
  isSafari: isSafari,
  isOpera: isOpera,
  isIE: isIE,
  osVersion: osVersion,
  osName: osName,
  fullBrowserVersion: fullBrowserVersion,
  browserVersion: browserVersion,
  browserName: browserName,
  mobileVendor: mobileVendor,
  mobileModel: mobileModel,
  engineName: engineName,
  engineVersion: engineVersion,
  isEdge: isEdge,
  isYandex: isYandex,
  deviceType: deviceType,
  isIOS13: isIOS13,
  isIPad13: isIPad13,
  isIPhone13: isIPhone13,
  isIPod13: isIPod13,
  isElectron: isElectron,
  isEdgeChromium: isEdgeChromium,
  isLegacyEdge: isLegacyEdge,
  isWindows: isWindows,
  isMacOs: isMacOs,
  isMIUI: isMIUI,
  isSamsungBrowser: isSamsungBrowser
});

function createComponent(key, value) {
  const name = key.substring(2);
  return defineComponent({
    name: `${name}View`,
    props: {
      tagName: {
        type: String,
        default: "div"
      }
    },
    setup(props, ctx) {
      return () => {
        const slot = ctx.slots.default?.();
        return value ? h(props.tagName, null, {
          default: () => slot
        }) : null;
      };
    }
  });
}
const list = {};
for (const key in checklist) {
  if (key.startsWith("is"))
    list[key] = createComponent(key, checklist[key]);
}

const vueDeviceDetect = {
  install(app) {
    for (const key in list)
      app.component(list[key].name, list[key]);
  }
};

export { browserName, browserVersion, deviceType, engineName, engineVersion, fullBrowserVersion, isAndroid, isBrowser, isChrome, isChromium, isConsole, isDesktop, isEdge, isEdgeChromium, isElectron, isEmbedded, isFirefox, isIE, isIOS, isIOS13, isIPad13, isIPhone13, isIPod13, isLegacyEdge, isMIUI, isMacOs, isMobile, isMobileOnly, isMobileSafari, isOpera, isSafari, isSamsungBrowser, isSmartTV, isTablet, isWearable, isWinPhone, isWindows, isYandex, mobileModel, mobileVendor, osName, osVersion, parseUA, vueDeviceDetect };