添加全屏切换

web/package.json

@@ -1,65 +1,66 @@
 {
-    "name": "qm-plus-vue-page",
-    "version": "0.1.0",
-    "private": true,
-    "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint"
+  "name": "qm-plus-vue-page",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@moefe/vue-aplayer": "^2.0.0-beta.5",
+    "axios": "^0.19.0",
+    "core-js": "^2.6.5",
+    "echarts": "^4.7.0",
+    "element-ui": "^2.12.0",
+    "mavon-editor": "^2.7.7",
+    "node-sass": "^4.12.0",
+    "path": "^0.12.7",
+    "qs": "^6.8.0",
+    "quill": "^1.3.7",
+    "sass-loader": "^8.0.0",
+    "screenfull": "^5.0.2",
+    "script-ext-html-webpack-plugin": "^2.1.4",
+    "spark-md5": "^3.0.1",
+    "timeline-vuejs": "1.1.1",
+    "vue": "^2.6.10",
+    "vue-particle-line": "^0.1.4",
+    "vue-quill-editor": "^3.0.6",
+    "vue-router": "^3.1.3",
+    "vuescroll": "^4.14.4",
+    "vuex": "^3.1.1",
+    "vuex-persist": "^2.1.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.11.0",
+    "@vue/cli-plugin-eslint": "^3.11.0",
+    "@vue/cli-service": "^3.11.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
     },
-    "dependencies": {
-        "@moefe/vue-aplayer": "^2.0.0-beta.5",
-        "axios": "^0.19.0",
-        "core-js": "^2.6.5",
-        "echarts": "^4.7.0",
-        "element-ui": "^2.12.0",
-        "mavon-editor": "^2.7.7",
-        "node-sass": "^4.12.0",
-        "path": "^0.12.7",
-        "qs": "^6.8.0",
-        "quill": "^1.3.7",
-        "sass-loader": "^8.0.0",
-        "script-ext-html-webpack-plugin": "^2.1.4",
-        "spark-md5": "^3.0.1",
-        "vue": "^2.6.10",
-        "vue-particle-line": "^0.1.4",
-        "vue-quill-editor": "^3.0.6",
-        "vue-router": "^3.1.3",
-        "vuescroll": "^4.14.4",
-        "vuex": "^3.1.1",
-        "vuex-persist": "^2.1.0",
-        "timeline-vuejs": "1.1.1"
-    },
-    "devDependencies": {
-        "@vue/cli-plugin-babel": "^3.11.0",
-        "@vue/cli-plugin-eslint": "^3.11.0",
-        "@vue/cli-service": "^3.11.0",
-        "babel-eslint": "^10.0.1",
-        "eslint": "^5.16.0",
-        "eslint-plugin-vue": "^5.0.0",
-        "vue-template-compiler": "^2.6.10"
-    },
-    "eslintConfig": {
-        "root": true,
-        "env": {
-            "node": true
-        },
-        "extends": [
-            "plugin:vue/essential",
-            "eslint:recommended"
-        ],
-        "rules": {},
-        "parserOptions": {
-            "parser": "babel-eslint"
-        }
-    },
-    "postcss": {
-        "plugins": {
-            "autoprefixer": {}
-        }
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions"
-    ]
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
 }

web/src/view/layout/index.vue

@@ -28,6 +28,7 @@
                 >{{item.meta.title}}</el-breadcrumb-item>
               </el-breadcrumb>
               <div class="fl-right right-box">
+                <Screenfull class="screenfull"></Screenfull>
                 <el-dropdown>
                   <span class="el-dropdown-link">
                     <img :src="userInfo.headerImg" height="30" width="30" />
@@ -87,7 +88,7 @@
 <script>
 import Aside from "@/view/layout/aside";
 import HistoryComponent from "@/view/layout/aside/historyComponent/history";
-
+import Screenfull from "@/view/layout/screenfull";
 import { mapGetters, mapActions } from "vuex";
 import { changePassword } from "@/api/user";
 export default {
@@ -128,7 +129,8 @@ export default {
   },
   components: {
     Aside,
-    HistoryComponent
+    HistoryComponent,
+    Screenfull
   },
   methods: {
     ...mapActions("user", ["LoginOut"]),
@@ -372,4 +374,8 @@ $mainHight: 100vh;
     vertical-align: middle;
   }
 }
+.screenfull{
+  display: inline-block;
+ 
+}
 </style>

web/src/view/layout/screenfull/index.vue

@@ -0,0 +1,114 @@
+<template>
+    <div  @click="click">
+        <!-- <svg
+            t="1508738709248"
+            class="screenfull-svg"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="2069"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            width="32"
+            height="32"
+            v-if="isShow"
+           >
+                <path
+                    d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
+                    p-id="2070"/>
+                <path
+                    d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
+                    p-id="2071"/>
+                <path
+                    d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
+                    p-id="2072"/>
+                <path
+                    d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
+                    p-id="2073"/>
+        </svg> -->
+        <svg 
+        t="1590133227479" 
+        class="screenfull-svg"
+        viewBox="0 0 1024 1024" 
+        version="1.1" 
+        width="20" 
+        height="20" 
+        xmlns="http://www.w3.org/2000/svg"  
+        v-if="isShow"
+        >
+                <path id="svg_1" d="m928.512,959.744a32,32 0 0 1 -32,-32l0,-256a32,32 0 0 1 64,0l0,256a32,32 0 0 1 -32,32z"/>
+                <path id="svg_2" d="m960.512,927.744a32,32 0 0 1 -32,32l-256,0a32,32 0 0 1 0,-64l256,0a32,32 0 0 1 32,32zm-864.768,-863.488a32,32 0 0 1 32,32l0,256a32,32 0 0 1 -64,0l0,-256a32,32 0 0 1 32,-32z"/>
+                <path id="svg_3" d="m63.744,96.256a32,32 0 0 1 32,-32l256,0a32,32 0 0 1 0,64l-256,0a32,32 0 0 1 -32,-32z"/>
+                <path id="svg_4" d="m958.030718,91.777575a32,32 0 0 1 -32,32l-256,0a32,32 0 0 1 0,-64l256,0a32,32 0 0 1 32,32z"/>
+                <path id="svg_5" d="m926.030718,59.777575a32,32 0 0 1 32,32l0,256a32,32 0 0 1 -64,0l0,-256a32,32 0 0 1 32,-32z"/>
+                <path id="svg_6" d="m940.622718,69.250038a32,32 0 0 1 0,45.248l-247.936,247.936a32,32 0 0 1 -45.248,-45.248l247.936,-247.936a31.936,31.936 0 0 1 45.248,0z"/>
+                <path id="svg_7" d="m61.649508,930.478492a32,32 0 0 1 32,-32l256,0a32,32 0 0 1 0,64l-256,0a32,32 0 0 1 -32,-32z"/>
+                <path id="svg_8" d="m93.649508,962.478492a32,32 0 0 1 -32,-32l0,-256a32,32 0 0 1 64,0l0,256a32,32 0 0 1 -32,32z"/>
+                <path id="svg_9" d="m79.121508,945.070492a32,32 0 0 1 0,-45.248l247.936,-247.936a32,32 0 0 1 45.248,45.248l-247.936,247.936a32,32 0 0 1 -45.248,0z"/>
+        </svg>
+        <svg 
+            t="1590133734869"  
+            class="screenfull-svg" 
+            viewBox="0 0 1024 1024"
+            version="1.1" 
+            xmlns="http://www.w3.org/2000/svg" 
+            p-id="1862" 
+            xmlns:xlink="http://www.w3.org/1999/xlink" 
+            width="20" 
+            height="20" 
+            v-else
+            >
+                <path d="M928.512 959.744a32 32 0 0 1-32-32v-256a32 32 0 0 1 64 0v256a32 32 0 0 1-32 32z" fill="" p-id="1863"></path>
+                <path d="M960.512 927.744a32 32 0 0 1-32 32h-256a32 32 0 0 1 0-64h256a32 32 0 0 1 32 32zM95.744 64.256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0v-256a32 32 0 0 1 32-32z" fill="" p-id="1864"></path>
+                <path d="M63.744 96.256a32 32 0 0 1 32-32h256a32 32 0 0 1 0 64h-256a32 32 0 0 1-32-32z" fill="" p-id="1865"></path>
+                <path d="M384.064 671.744a32 32 0 0 1-32 32h-256a32 32 0 0 1 0-64h256a32 32 0 0 1 32 32z" fill="" p-id="1866"></path>
+                <path d="M352.064 639.744a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0v-256a32 32 0 0 1 32-32z" fill="" p-id="1867"></path>
+                <path d="M366.656 657.216a32 32 0 0 1 0 45.248L118.72 950.4a32 32 0 0 1-45.248-45.248l247.936-247.936a31.936 31.936 0 0 1 45.248 0z" fill="" p-id="1868"></path>
+                <path d="M639.616 352.512a32 32 0 0 1 32-32h256a32 32 0 0 1 0 64h-256a32 32 0 0 1-32-32z" fill="" p-id="1869"></path>
+                <path d="M671.616 384.512a32 32 0 0 1-32-32v-256a32 32 0 0 1 64 0v256a32 32 0 0 1-32 32z" fill="" p-id="1870"></path>
+                <path d="M657.088 367.104a32 32 0 0 1 0-45.248l247.936-247.936a32 32 0 0 1 45.248 45.248l-247.936 247.936a32 32 0 0 1-45.248 0z" fill="" p-id="1871"></path>
+        </svg>
+    </div>
+</template>
+<script>
+import screenfull from 'screenfull'  //引入screenfull
+export default {
+    name: 'Screenfull',
+    props: {
+        width: {
+            type: Number,
+            default: 22
+        },
+        height: {
+            type: Number,
+            default: 22
+        },
+        fill: {
+            type: String,
+            default: '#48576a'
+        }
+    },
+    data(){
+        return {
+            isShow:true
+        }
+    },
+    methods: {
+        click () {
+            if (screenfull.isEnabled) {
+                this.isShow  = !this.isShow
+                screenfull.toggle()
+            }
+        }
+    }
+}
+</script>
+<style scoped>
+.screenfull-svg {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    fill: #606266;
+    vertical-align: middle;
+    margin-right: 15px;
+}
+</style>