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