root
/
yibu
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加全屏切换

main
jinlan.du 5 years ago
parent
52372aa3f2
commit
838fa279d5
3 changed files with 185 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      web/package.json
  2. 10
      web/src/view/layout/index.vue
  3. 114
      web/src/view/layout/screenfull/index.vue

5
web/package.json
View File

@ -19,16 +19,17 @@
"qs": "^6.8.0", "qs": "^6.8.0",
"quill": "^1.3.7", "quill": "^1.3.7",
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",
"screenfull": "^5.0.2",
"script-ext-html-webpack-plugin": "^2.1.4", "script-ext-html-webpack-plugin": "^2.1.4",
"spark-md5": "^3.0.1", "spark-md5": "^3.0.1",
"timeline-vuejs": "1.1.1",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-particle-line": "^0.1.4", "vue-particle-line": "^0.1.4",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",
"vuescroll": "^4.14.4", "vuescroll": "^4.14.4",
"vuex": "^3.1.1", "vuex": "^3.1.1",
"vuex-persist": "^2.1.0",
"timeline-vuejs": "1.1.1"
"vuex-persist": "^2.1.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.11.0", "@vue/cli-plugin-babel": "^3.11.0",

10
web/src/view/layout/index.vue
View File

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

114
web/src/view/layout/screenfull/index.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save