增加右键菜单的失去焦点事件，失去焦点自动消失

index.html

@@ -18,7 +18,7 @@
  <!-- 左上 -->
  <div class="nav-left-top" :title="title" @click="showPage(homePage)">
  <img :src="logo_url" class="admin-logo">
- <span class="nav-title" style="font-size: 1.1em;">{{title}}</span> 
+ <span class="nav-title" style="font-size: 1.05em;">{{title}}</span> 
  </div>
 
  <!-- 左下 -->
@@ -206,14 +206,14 @@
 
 
  <!-- 鼠标右键弹出的盒子 -->
- <div class="right-box" :style="{left: rightZB.x + 'px', top: rightZB.y + 'px'}" v-if="rightShow">
- <div @click="right_f5">刷新</div>
- <div @click="right_close">关闭</div>
- <div @click="right_close_other">关闭其它</div>
- <div @click="right_close_all">关闭所有</div>
- <div @click="right_xf">悬浮打开</div>
- <div @click="right_window_open">新窗口打开</div>
- <div @click="right_menu_close">取消</div>
+ <div class="right-box" :style="{left: rightZB.x + 'px', top: rightZB.y + 'px'}" v-if="rightShow" tabindex="-1" @blur="rightShow = false">
+ <div @click="rightShow = false; right_f5()">刷新</div>
+ <div @click="rightShow = false; right_close()">关闭</div>
+ <div @click="rightShow = false; right_close_other()">关闭其它</div>
+ <div @click="rightShow = false; right_close_all()">关闭所有</div>
+ <div @click="rightShow = false; right_xf()">悬浮打开</div>
+ <div @click="rightShow = false; right_window_open()">新窗口打开</div>
+ <div @click="rightShow = false">取消</div>
  </div>
 
 

main.html

@@ -201,6 +201,13 @@ <h4>为什么是iframe，而不是SPA？</h4>
 
  <div><br></div>
 
+ <li>
+ <b> <el-tag size="mini">版本 v1.1.2</el-tag></b>
+ &nbsp;&nbsp;2019-7-16 
+ </li>
+ <li>增加右键菜单的失去焦点事件，失去焦点自动消失</li>
+ <div><br></div>
+
  <li>
  <b> <el-tag size="mini">版本 v1.1.1</el-tag></b>
  &nbsp;&nbsp;2019-6-26 

sa-resources/index.css

@@ -109,18 +109,26 @@ html,body{height: 100%; background-color: #EEE;}
 
 
 /* 右键菜单 样式 */
-.right-box{
- width: 100px;
+.right-box {
  font-size: 0.8em;
- border: 1px #CCC solid;
+ border: 1px #aaa solid;
  border-radius: 1px;
  background-color: #FFF;
  padding: 0.5em 0;
  position: fixed;
  z-index: 2147483647;
+ transition: all 0.2s;
+ outline:none;
+}
+.right-box>div {
+ line-height: 2.2em;
+ padding-left: 1em;
+ padding-right: 2em;
+ cursor: pointer;
+}
+.right-box>div:hover {
+ background-color: #ddd;
 }
-.right-box>div{line-height: 2.2em; text-indent: 1em; cursor: pointer;}
-.right-box>div:hover{background-color: #EEE;}
 
 
 /* 菜单折叠时候样式调整 */

sa-resources/index.js

@@ -9,10 +9,12 @@ var homePage = {
 var sp = new Vue({
  el: '.app',
  data: {
- version: 'v1.1.1', // 当前版本
- update_time: '2019-6-26', // 更新日期 
+ version: 'v1.1.2', // 当前版本
+ update_time: '2019-7-16', // 更新日期 
  title: '',//'SA-后台模板', // 页面标题 
  logo_url: 'sa-resources/admin-logo.png', // logo地址 
+ is_log: true, // 是否打印日志 
+ github_url: 'https://github.com/click33/sa-admin', // github地址 
  default_active: '0', // 默认的高亮菜单id
  menuList: [], // 菜单集合 
  homePage: homePage, // 主页page
@@ -37,14 +39,12 @@ var sp = new Vue({
  ],
  themeV: localStorage.getItem('themeV') || '1', // 当前主题值
  themeList: [ // 主题数组
- {name: '主题 1', value: '1'},
- {name: '主题 2', value: '2'},
- {name: '主题 3', value: '3'},
- {name: '主题 4', value: '4'}
+ {name: '蓝色', value: '1'},
+ {name: '绿色', value: '2'},
+ {name: '白色', value: '3'},
+ {name: '灰色', value: '4'}
  ],
  dropList: [], // 头像处下拉列表菜单 
- is_log: true, // 是否打印日志 
- github_url: 'https://github.com/click33/sa-admin', // github地址 
  },
  watch: {
  // 监听全屏动作 
@@ -202,18 +202,16 @@ var sp = new Vue({
  this.rightZB.y = e.clientY; // 
  this.rightPage = page; // 绑定操作page
  this.rightShow = true; // 显示
- },
- // 右键菜单消失
- right_menu_close: function() {
- this.rightShow = false; // 关闭 
+ this.$nextTick(function() {
+ document.querySelector('.right-box').focus();
+ })
  },
  // 右键 刷新
  right_f5: function() {
  this.showPage(this.rightPage); // 先转到
  var cs = '#iframe' + this.rightPage.id;
  var iframe = document.querySelector(cs);
  iframe.setAttribute('src', iframe.getAttribute('src')); 
- this.rightShow = false; // 隐藏右菜单
  },
  // 右键 悬浮 
  right_xf: function() {
@@ -222,11 +220,10 @@ var sp = new Vue({
  message: '这个不能悬浮哦，换个卡片试试吧',
  type: 'warning'
  });
- return this.rightShow = false; // 隐藏右菜单
+ return; 
  }
  // 先关闭
  this.closePage(this.rightPage); 
- this.rightShow = false; // 隐藏右菜单 
  // 再打开 
  layer.open({
  type: 2,
@@ -271,10 +268,9 @@ var sp = new Vue({
  message: '这个不能关闭哦',
  type: 'warning'
  });
- return this.rightShow = false; // 隐藏右菜单
+ return; // 隐藏右菜单
  }
  this.closePage(this.rightPage);
- this.rightShow = false; // 隐藏右菜单
  },
  // 右键 - 关闭其它 
  right_close_other: function() {
@@ -286,7 +282,6 @@ var sp = new Vue({
  this.closePage(page);
  i--;
  }
- this.rightShow = false; // 隐藏右菜单
  },
  // 右键 - 关闭所有 
  right_close_all: function() {
@@ -298,21 +293,16 @@ var sp = new Vue({
  this.closePage(page);
  i--;
  }
- this.rightShow = false; // 隐藏右菜单
  },
  // 右键 - 新窗口打开
  right_window_open: function() {
  open(this.rightPage.url); 
- this.rightShow = false; // 隐藏右菜单
  },
 
  // ------------------- menu 相关 --------------------
  // 点击子菜单时的回调, 
- // 参数: 点击菜单index标识（不是下标）, 所有已经打开的菜单 index
+ // 参数: 点击菜单index标识（不是下标）, 所有已经打开的菜单 index 
  selectMenu: function(index, indexArray) {
- // if(index + '' == homePage.id + '') {
- // return this.showPage(homePage);
- // }
  var menu = this.getMenuById(this.menuList, index);
  this.showPage(menu); 
  },

sa-resources/theme.css

@@ -22,7 +22,7 @@
 /* 左边栏背景色，前景色 */
 .theme-0 .nav-left {
  background-color: #222;
- color: #EEE;
+ color: #FFF;
 }
 
 /* 二级菜单背景色 */
@@ -84,6 +84,7 @@
 /* 非标准附加样式 */
 .theme-3 .nav-left-top{box-shadow: 0 2px 2px #CCC;}
 .theme-3 .nav-left-bottom{width: 199px; border-right: 1px #DDD solid;}
+.theme-3 .nav-right-1,.theme-3 .nav-right-2{border-left: 1px #eee solid;}
 
 /* 左边栏背景色，前景色 */
 .theme-3 .nav-left {
@@ -144,8 +145,6 @@
  color: #009688;
 }
 
-
-
 /* 工具栏背景色颜色, 前景色 */
 .theme-4 .nav-right-1 {
  color: #EEE;