feat: 浏览器兼容性提示

Author: mutoe

assets/less/iview/components/index.less

@@ -4,7 +4,7 @@
 // @import "badge";
 // @import "circle";
 @import "spin";
-// @import "alert";
+@import "alert";
 // @import "collapse";
 // @import "card";
 @import "message";

layouts/default.vue

@@ -1,5 +1,19 @@
 <template>
   <div class="layout-default">
+    <!-- Browse Happy -->
+    <Collapse>
+      <IAlert
+        v-if="isIE"
+        banner
+        type="warning"
+        closable
+        :style="{marginBottom: 0,marginRight: logged && '48px', zIndex: 100}"
+      >
+        <!-- eslint-disable-next-line -->
+        您正在使用过时的 IE 浏览器，因此排版可能会错乱。为了您的浏览体验，强烈建议您更换至 <a class="primary-color" href="https://browsehappy.com/" target="_blank" >现代浏览器</a>
+      </IAlert>
+    </Collapse>
+
     <CommonHeader />
 
     <div class="container main">
@@ -23,6 +37,7 @@
 </template>
 
 <script>
+import { isIE } from '@/utils'
 import CommonHeader from '@/components/layout/CommonHeader.vue'
 import CommonFooter from '@/components/layout/CommonFooter.vue'
 import FloatWidget from '@/components/layout/FloatWidget.vue'
@@ -48,6 +63,18 @@ export default {
     ModalPinned,
     ModalPassword,
   },
+  data () {
+    return {
+      isIE: false,
+    }
+  },
+  mounted () {
+    if (isIE()) {
+      setTimeout(() => {
+        this.isIE = true
+      }, 500)
+    }
+  },
 }
 </script>
 

plugins/iview.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import '@/assets/less/index.less'
 
 import {
+  Alert,
   Button,
   Breadcrumb,
   BreadcrumbItem,
@@ -32,6 +33,7 @@ import {
 } from 'iview'
 
 const components = {
+  Alert,
   Button,
   Breadcrumb,
   BreadcrumbItem,

utils/index.js

@@ -21,6 +21,16 @@ export const isNumber = val => {
   else return /^\d+$/.test(val)
 }
 
+/**
+ * 判断是否是 IE 浏览器
+ */
+export function isIE () {
+  if (process.client) {
+    return !!window.ActiveXObject || 'ActiveXObject' in window
+  }
+  return null
+}
+
 /**
  * 获取关注状态
  * @param {boolean} follower 被关注