Skip to content

Commit 0f7cb13

Browse files
author
jinlan.du
committed
添加全屏切换
1 parent 8186d9e commit 0f7cb13

File tree

3 files changed

+185
-64
lines changed

3 files changed

+185
-64
lines changed

‎web/package.json‎

Lines changed: 63 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,66 @@
11
{
2-
"name": "qm-plus-vue-page",
3-
"version": "0.1.0",
4-
"private": true,
5-
"scripts": {
6-
"serve": "vue-cli-service serve",
7-
"build": "vue-cli-service build",
8-
"lint": "vue-cli-service lint"
2+
"name": "qm-plus-vue-page",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"@moefe/vue-aplayer": "^2.0.0-beta.5",
12+
"axios": "^0.19.0",
13+
"core-js": "^2.6.5",
14+
"echarts": "^4.7.0",
15+
"element-ui": "^2.12.0",
16+
"mavon-editor": "^2.7.7",
17+
"node-sass": "^4.12.0",
18+
"path": "^0.12.7",
19+
"qs": "^6.8.0",
20+
"quill": "^1.3.7",
21+
"sass-loader": "^8.0.0",
22+
"screenfull": "^5.0.2",
23+
"script-ext-html-webpack-plugin": "^2.1.4",
24+
"spark-md5": "^3.0.1",
25+
"timeline-vuejs": "1.1.1",
26+
"vue": "^2.6.10",
27+
"vue-particle-line": "^0.1.4",
28+
"vue-quill-editor": "^3.0.6",
29+
"vue-router": "^3.1.3",
30+
"vuescroll": "^4.14.4",
31+
"vuex": "^3.1.1",
32+
"vuex-persist": "^2.1.0"
33+
},
34+
"devDependencies": {
35+
"@vue/cli-plugin-babel": "^3.11.0",
36+
"@vue/cli-plugin-eslint": "^3.11.0",
37+
"@vue/cli-service": "^3.11.0",
38+
"babel-eslint": "^10.0.1",
39+
"eslint": "^5.16.0",
40+
"eslint-plugin-vue": "^5.0.0",
41+
"vue-template-compiler": "^2.6.10"
42+
},
43+
"eslintConfig": {
44+
"root": true,
45+
"env": {
46+
"node": true
947
},
10-
"dependencies": {
11-
"@moefe/vue-aplayer": "^2.0.0-beta.5",
12-
"axios": "^0.19.0",
13-
"core-js": "^2.6.5",
14-
"echarts": "^4.7.0",
15-
"element-ui": "^2.12.0",
16-
"mavon-editor": "^2.7.7",
17-
"node-sass": "^4.12.0",
18-
"path": "^0.12.7",
19-
"qs": "^6.8.0",
20-
"quill": "^1.3.7",
21-
"sass-loader": "^8.0.0",
22-
"script-ext-html-webpack-plugin": "^2.1.4",
23-
"spark-md5": "^3.0.1",
24-
"vue": "^2.6.10",
25-
"vue-particle-line": "^0.1.4",
26-
"vue-quill-editor": "^3.0.6",
27-
"vue-router": "^3.1.3",
28-
"vuescroll": "^4.14.4",
29-
"vuex": "^3.1.1",
30-
"vuex-persist": "^2.1.0",
31-
"timeline-vuejs": "1.1.1"
32-
},
33-
"devDependencies": {
34-
"@vue/cli-plugin-babel": "^3.11.0",
35-
"@vue/cli-plugin-eslint": "^3.11.0",
36-
"@vue/cli-service": "^3.11.0",
37-
"babel-eslint": "^10.0.1",
38-
"eslint": "^5.16.0",
39-
"eslint-plugin-vue": "^5.0.0",
40-
"vue-template-compiler": "^2.6.10"
41-
},
42-
"eslintConfig": {
43-
"root": true,
44-
"env": {
45-
"node": true
46-
},
47-
"extends": [
48-
"plugin:vue/essential",
49-
"eslint:recommended"
50-
],
51-
"rules": {},
52-
"parserOptions": {
53-
"parser": "babel-eslint"
54-
}
55-
},
56-
"postcss": {
57-
"plugins": {
58-
"autoprefixer": {}
59-
}
60-
},
61-
"browserslist": [
62-
"> 1%",
63-
"last 2 versions"
64-
]
48+
"extends": [
49+
"plugin:vue/essential",
50+
"eslint:recommended"
51+
],
52+
"rules": {},
53+
"parserOptions": {
54+
"parser": "babel-eslint"
55+
}
56+
},
57+
"postcss": {
58+
"plugins": {
59+
"autoprefixer": {}
60+
}
61+
},
62+
"browserslist": [
63+
"> 1%",
64+
"last 2 versions"
65+
]
6566
}

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
>{{item.meta.title}}</el-breadcrumb-item>
2929
</el-breadcrumb>
3030
<div class="fl-right right-box">
31+
<Screenfull class="screenfull"></Screenfull>
3132
<el-dropdown>
3233
<span class="el-dropdown-link">
3334
<img :src="userInfo.headerImg" height="30" width="30" />
@@ -87,7 +88,7 @@
8788
<script>
8889
import Aside from "@/view/layout/aside";
8990
import HistoryComponent from "@/view/layout/aside/historyComponent/history";
90-
91+
import Screenfull from "@/view/layout/screenfull";
9192
import { mapGetters, mapActions } from "vuex";
9293
import { changePassword } from "@/api/user";
9394
export default {
@@ -128,7 +129,8 @@ export default {
128129
},
129130
components: {
130131
Aside,
131-
HistoryComponent
132+
HistoryComponent,
133+
Screenfull
132134
},
133135
methods: {
134136
...mapActions("user", ["LoginOut"]),
@@ -372,4 +374,8 @@ $mainHight: 100vh;
372374
vertical-align: middle;
373375
}
374376
}
377+
.screenfull{
378+
display: inline-block;
379+
380+
}
375381
</style>

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

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<template>
2+
<div @click="click">
3+
<!-- <svg
4+
t="1508738709248"
5+
class="screenfull-svg"
6+
viewBox="0 0 1024 1024"
7+
version="1.1"
8+
xmlns="http://www.w3.org/2000/svg"
9+
p-id="2069"
10+
xmlns:xlink="http://www.w3.org/1999/xlink"
11+
width="32"
12+
height="32"
13+
v-if="isShow"
14+
>
15+
<path
16+
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"
17+
p-id="2070"/>
18+
<path
19+
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"
20+
p-id="2071"/>
21+
<path
22+
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"
23+
p-id="2072"/>
24+
<path
25+
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"
26+
p-id="2073"/>
27+
</svg> -->
28+
<svg
29+
t="1590133227479"
30+
class="screenfull-svg"
31+
viewBox="0 0 1024 1024"
32+
version="1.1"
33+
width="20"
34+
height="20"
35+
xmlns="http://www.w3.org/2000/svg"
36+
v-if="isShow"
37+
>
38+
<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"/>
39+
<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"/>
40+
<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"/>
41+
<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"/>
42+
<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"/>
43+
<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"/>
44+
<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"/>
45+
<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"/>
46+
<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"/>
47+
</svg>
48+
<svg
49+
t="1590133734869"
50+
class="screenfull-svg"
51+
viewBox="0 0 1024 1024"
52+
version="1.1"
53+
xmlns="http://www.w3.org/2000/svg"
54+
p-id="1862"
55+
xmlns:xlink="http://www.w3.org/1999/xlink"
56+
width="20"
57+
height="20"
58+
v-else
59+
>
60+
<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>
61+
<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>
62+
<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>
63+
<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>
64+
<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>
65+
<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>
66+
<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>
67+
<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>
68+
<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>
69+
</svg>
70+
</div>
71+
</template>
72+
<script>
73+
import screenfull from 'screenfull' //引入screenfull
74+
export default {
75+
name: 'Screenfull',
76+
props: {
77+
width: {
78+
type: Number,
79+
default: 22
80+
},
81+
height: {
82+
type: Number,
83+
default: 22
84+
},
85+
fill: {
86+
type: String,
87+
default: '#48576a'
88+
}
89+
},
90+
data(){
91+
return {
92+
isShow:true
93+
}
94+
},
95+
methods: {
96+
click () {
97+
if (screenfull.isEnabled) {
98+
this.isShow = !this.isShow
99+
screenfull.toggle()
100+
}
101+
}
102+
}
103+
}
104+
</script>
105+
<style scoped>
106+
.screenfull-svg {
107+
width: 20px;
108+
height: 20px;
109+
cursor: pointer;
110+
fill: #606266;
111+
vertical-align: middle;
112+
margin-right: 15px;
113+
}
114+
</style>

0 commit comments

Comments
 (0)