From 5a8755ec9f39a405ff5b938c84f4b1a45738958c Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Thu, 15 Jun 2017 13:23:49 +0800
Subject: [PATCH] add screenfull
---
package.json | 1 +
src/components/Screenfull/index.vue | 57 +++++++++++++++++++++++++++++
src/views/layout/Navbar.vue | 14 +++++--
3 files changed, 69 insertions(+), 3 deletions(-)
create mode 100644 src/components/Screenfull/index.vue
diff --git a/package.json b/package.json
index 5e9b572..90e41d0 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
"mockjs": "1.0.1-beta3",
"normalize.css": "3.0.2",
"nprogress": "0.2.0",
+ "screenfull": "3.2.2",
"showdown": "1.7.1",
"simplemde": "1.11.2",
"sortablejs": "1.5.1",
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
new file mode 100644
index 0000000..4c5a9c3
--- /dev/null
+++ b/src/components/Screenfull/index.vue
@@ -0,0 +1,57 @@
+<template>
+
+<svg @click='click' class="icon screenfull" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1497503607356" viewBox="0 0 1024 1024" version="1.1" p-id="4109" :fill='fill' :width="width" :height="height"><path d="M604.157933 512l204.484208 204.484208 82.942037-82.942037c10.364045-10.952446 26.498514-13.83817 40.309054-8.067746 13.249769 5.742794 22.465664 18.99154 22.465664 33.977859l0 258.042008c0 20.168342-16.695241 36.863582-36.863582 36.863582L659.452283 954.357873c-14.986319 0-28.236088-9.215896-33.977859-23.025413-5.770424-13.249769-2.885723-29.384237 8.067746-39.748283l82.942037-82.942037L512 604.157933 307.515792 808.642141l82.942037 82.942037c10.952446 10.364045 13.83817 26.498514 8.067746 39.748283-5.742794 13.809517-18.99154 23.025413-33.977859 23.025413L106.504686 954.357873c-20.168342 0-36.863582-16.695241-36.863582-36.863582L69.641103 659.452283c0-14.986319 9.215896-28.236088 23.025413-33.977859 13.249769-5.770424 29.384237-2.8847 39.748283 8.067746l82.942037 82.942037 204.484208-204.484208L215.357859 307.515792l-82.942037 82.942037c-6.890944 6.918573-16.10684 10.952446-25.911136 10.952446-4.593622 0-9.804297-1.14815-13.83817-2.8847-13.809517-5.742794-23.025413-18.99154-23.025413-33.977859L69.641103 106.504686c0-20.168342 16.695241-36.863582 36.863582-36.863582L364.546693 69.641103c14.986319 0 28.236088 9.215896 33.977859 23.025413 5.770424 13.249769 2.8847 29.384237-8.067746 39.748283l-82.942037 82.942037 204.484208 204.484208L716.484208 215.357859l-82.942037-82.942037c-10.952446-10.364045-13.83817-26.498514-8.067746-39.748283 5.742794-13.809517 18.99154-23.025413 33.977859-23.025413l258.042008 0c20.168342 0 36.863582 16.695241 36.863582 36.863582l0 258.042008c0 14.986319-9.215896 28.236088-22.465664 33.977859-4.593622 1.736551-9.804297 2.8847-14.397918 2.8847-9.804297 0-19.020192-4.033873-25.911136-10.952446l-82.942037-82.942037L604.157933 512z" p-id="4110"/></svg>
+</template>
+
+<script>
+ import screenfull from 'screenfull';
+ export default {
+ name: 'hamburger',
+ props: {
+ width: {
+ type: Number,
+ default: 22
+ },
+ height: {
+ type: Number,
+ default: 22
+ },
+ fill: {
+ type: String,
+ default: '#48576a'
+ }
+ },
+ data() {
+ return {
+ isFullscreen: false
+ }
+ },
+ methods: {
+ click() {
+ if (!screenfull.enabled) {
+ this.$message({
+ message: 'you browser can not work',
+ type: 'warning'
+ });
+ return false;
+ }
+
+ if (this.isFullscreen) {
+ screenfull.exit();
+ this.isFullscreen = false;
+ } else {
+ screenfull.request();
+ this.isFullscreen = true;
+ }
+ }
+ }
+ }
+</script>
+
+<style scoped>
+ .screenfull {
+ display: inline-block;
+ cursor: pointer;
+ vertical-align: -0.15em;
+ }
+</style>
diff --git a/src/views/layout/Navbar.vue b/src/views/layout/Navbar.vue
index 15e3b2e..8871b59 100644
--- a/src/views/layout/Navbar.vue
+++ b/src/views/layout/Navbar.vue
@@ -1,9 +1,9 @@
<template>
<el-menu class="navbar" mode="horizontal">
- <Hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></Hamburger>
+ <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
<levelbar></levelbar>
<error-log v-if="log.length>0" class="errLog-container" :logsList="log"></error-log>
-
+ <screenfull class='screenfull'></screenfull>
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
@@ -30,6 +30,7 @@
import { mapGetters } from 'vuex';
import Levelbar from './Levelbar';
import Hamburger from 'components/Hamburger';
+ import Screenfull from 'components/Screenfull';
import ErrorLog from 'components/ErrLog';
import errLogStore from 'store/errLog';
@@ -37,7 +38,8 @@
components: {
Levelbar,
Hamburger,
- ErrorLog
+ ErrorLog,
+ Screenfull
},
data() {
return {
@@ -80,6 +82,12 @@
position: absolute;
right: 150px;
}
+ .screenfull{
+ position: absolute;
+ right: 90px;
+ top: 16px;
+ color: red;
+ }
.avatar-container {
height: 50px;
display: inline-block;
--
2.21.0