'重写mavonEditor的flex样式兼容IE'

config/index.js

@@ -65,7 +65,7 @@ module.exports = {
      * Source Maps
      */
 
-    productionSourceMap: true,
+    productionSourceMap: false,
     // https://webpack.js.org/configuration/devtool/#production
     devtool: '#source-map',
 

package.json

@@ -65,7 +65,7 @@
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions",
+    "last 5 versions",
     "not ie <= 8"
   ]
 }

src/components/page/Markdown.vue

@@ -20,6 +20,8 @@
 <script>
     import { mavonEditor } from 'mavon-editor'
     import 'mavon-editor/dist/css/index.css'
+    // 重写mavon的flex样式来兼容IE
+    import 'static/css/mavon-flex.css'
     export default {
         data: function(){
             return {

src/main.js

@@ -18,7 +18,7 @@ router.beforeEach((to, from, next) => {
         role === 'admin' ? next() : next('/login');
     }else{
         // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
-        if(navigator.userAgent.indexOf('MSIE') && to.path === '/editor'){
+        if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
             Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
                 confirmButtonText: '确定'
             });
@@ -27,7 +27,7 @@ router.beforeEach((to, from, next) => {
         }
     }
 })
-console.log(navigator.userAgent);
+
 new Vue({
     router,
     render: h => h(App)

static/css/mavon-flex.css

@@ -0,0 +1,70 @@
+.v-note-wrapper{
+    display: flex;
+    flex-direction: column;
+}
+.v-note-wrapper .v-note-op{
+    display: flex;
+    flex: none;
+}
+.v-note-wrapper .v-note-op .left,
+.v-note-wrapper .v-note-op .right{
+    flex: 1;
+}
+.v-note-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.v-note-wrapper .v-note-op {
+  display: flex;
+  flex: none;
+}
+.v-note-wrapper .v-note-op .left,
+.v-note-wrapper .v-note-op .right {
+  flex: 1;
+}
+
+.v-note-wrapper .v-note-panel {
+  display: flex;
+  flex: 1;
+  min-height: 500px;
+}
+.v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper {
+  flex: 0 0 50%;
+}
+
+.v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper.single-edit {
+  flex: 0 0 100%;
+}
+.v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper.single-show {
+  width: 0;
+  flex: 0 0 0;
+  display: none;
+}
+
+.v-note-wrapper .v-note-panel .v-note-show {
+  flex: 0 0 50%;
+}
+.v-note-wrapper .v-note-panel .v-note-show.single-show {
+  flex: 0 0 100%;
+}
+
+.v-note-wrapper .v-note-panel .v-note-navigation-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.v-note-wrapper .v-note-panel .v-note-navigation-wrapper .v-note-navigation-title {
+  flex: none;
+}
+
+.v-note-wrapper .v-note-panel .v-note-navigation-wrapper .v-note-navigation-content {
+  flex: 1;
+}
+.v-note-img-wrapper{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.v-note-img-wrapper img {
+    flex: 0 0 auto;
+}