Browse Source

bug 修复

lilei 2 years ago
parent
commit
30cc08c21f
6 changed files with 37 additions and 4 deletions
  1. 13 0
      package-lock.json
  2. 1 0
      package.json
  3. 4 1
      src/main.js
  4. 5 1
      src/views/analyse/index.vue
  5. 7 0
      src/views/home.scss
  6. 7 2
      src/views/indexs/index.vue

+ 13 - 0
package-lock.json

@@ -4170,6 +4170,11 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "focusable-core": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/focusable-core/-/focusable-core-2.0.1.tgz",
+      "integrity": "sha512-sZdMNmDhYksZ1OwS9vA0Me1DLLVXD84zl7h4BvCoYffAj/lMWYNGdMdG3Hd2h9VhmaYcqPkPbbqCyEv5hG8A9Q=="
+    },
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -9999,6 +10004,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-tv-focusable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-tv-focusable/-/vue-tv-focusable-2.0.1.tgz",
+      "integrity": "sha512-JT8yFqsAdI5xdfPPkGL3COYn2ENBdyE442YaB5m28UTN9HMUwVFnBcYkon/HdLcAzh7z2sV0F7BtJgtAjtqJsg==",
+      "requires": {
+        "focusable-core": "~2.0.1"
+      }
+    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",

+ 1 - 0
package.json

@@ -25,6 +25,7 @@
     "vue-easytable": "^2.21.5",
     "vue-router": "^3.6.5",
     "vue-seamless-scroll": "^1.1.23",
+    "vue-tv-focusable": "^2.0.1",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

+ 4 - 1
src/main.js

@@ -20,7 +20,6 @@ import "vue-easytable/libs/theme-default/index.css";
 import  '@/assets/css/public.scss'
 import "@/assets/css/index.scss"
 
-
 import * as filters from '@/directives/filters'
 
 require('./mock/mock')//是否使用mock
@@ -46,6 +45,10 @@ Vue.use(digitalFlop)
 Vue.use(capsuleChart)
 // 全局数据过滤器
 Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));
+// tv 焦点控制
+import focusable from 'vue-tv-focusable';
+Vue.use(focusable);
+
 new Vue({
   router,
   store,

+ 5 - 1
src/views/analyse/index.vue

@@ -9,7 +9,7 @@
   <div class="contents">
     <div class="contetn_left">
       <div class="pagetab">
-        <div class="item" @click="toPage">﹤实时销售看板</div>
+        <div class="item" ref="myDiv" v-focusable @click="toPage">﹤实时销售看板</div>
       </div>
       <ItemWrap class="contetn_left-top contetn_lr-aitem" title="加盟商分布" mode="left">
 		<LeftBottom />
@@ -88,6 +88,10 @@ export default {
     },
   },
   created() {
+	  this.$nextTick(() => {
+		  // @ts-ignore
+		  this.$tv.requestFocus(this.$refs.myDiv)
+	  })
   },
 
   mounted() {},

+ 7 - 0
src/views/home.scss

@@ -119,6 +119,13 @@
 				background: linear-gradient(to right, rgba(39, 180, 255, 0.7), rgba(76, 245, 255, 0.3));
 			}
         }
+		.focus{
+			transform: scale(1.1);
+			border: 1px solid #00EAFF;
+			box-shadow: 0 0 10px #00EAFF;
+			color: #f1f1f1;
+			background: linear-gradient(to right, rgba(39, 180, 255, 0.7), rgba(76, 245, 255, 0.3));
+		}
     }
 }
 

+ 7 - 2
src/views/indexs/index.vue

@@ -9,7 +9,9 @@
   <div class="contents">
     <div class="contetn_left">
       <div class="pagetab">
-        <div class="item" @click="toPage">﹤加盟商/产品分析</div>
+        <div class="item" ref="myDiv" v-focusable @click="toPage">
+			﹤加盟商/产品分析
+		</div>
       </div>
       <ItemWrap class="contetn_left-top contetn_lr-item" title="区域销售金额占比">
         <LeftTop />
@@ -86,8 +88,11 @@ export default {
     },
   },
   created() {
+	  this.$nextTick(() => {
+		  // @ts-ignore
+		  this.$tv.requestFocus(this.$refs.myDiv)
+	  })
   },
-
   mounted() { },
   methods: {
     toPage() {