@@ -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": {
+ "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",
@@ -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": {
@@ -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,
@@ -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() {},
@@ -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));
@@ -9,7 +9,9 @@
- <div class="item" @click="toPage">﹤加盟商/产品分析</div>
+ <div class="item" ref="myDiv" v-focusable @click="toPage">
+ ﹤加盟商/产品分析
+ </div>
<ItemWrap class="contetn_left-top contetn_lr-item" title="区域销售金额占比">
<LeftTop />
@@ -86,8 +88,11 @@ export default {
mounted() { },
methods: {
toPage() {