238238 </div >
239239 </div >
240240 <!-- swiper content -->
241- <div class =" module-board"
241+ <div class =" module-board" id = " moduleBoard "
242242 <div class =" module-board__inner" :style =" `transform: translateX(-${tabTransformWidth}px);`"
243243 <div
244244 :class =" [
254254 <t-radio-button value =" vue" t-radio-button >
255255 <t-radio-button value =" vue-next" t-radio-button >
256256 <t-radio-button value =" react" t-radio-button >
257- <t-radio-button value =" miniprogram" t-radio-button >
258- <!-- <t-radio-button value="vue-mobile">vue-mobile</t-radio-button> -->
257+ <t-radio-button value =" miniprogram" t-radio-button >
258+ <t-radio-button value =" mobile-vue" t-radio-button >
259+ <t-radio-button value =" mobile-react" t-radio-button >
259260 </t-radio-group >
260261
261262 <ul class =" code-list"
@@ -595,6 +596,7 @@ const brandUrl = 'https://1257786608-faj515jw5t-hk.scf.tencentcs.com/brand/list'
595596const newsUrl = ' https://1257786608-faj515jw5t-hk.scf.tencentcs.com/news'
596597
597598const isIntranet = location .host .includes (' woa.com' // 部分动态或内容只能通过内网访问
599+ let ticking = false ;
598600
599601export default {
600602 name: ' site-home'
@@ -716,7 +718,19 @@ export default {
716718 { type: ' javascript' : ' <t-tag theme="primary">重要</t-tag>'
717719 { type: ' javascript' : ' '
718720 ],
719- // 'vue-mobile': [],
721+ ' mobile-vue' : [
722+ { type: ' bash' : ' npm i tdesign-mobile-vue'
723+ { type: ' javascript' : " import { createApp } from 'vue';"
724+ { type: ' javascript' : " import TDesign from 'tdesign-mobile-vue';"
725+ { type: ' javascript' : " import 'tdesign-mobile-vue/es/style/index.css';"
726+ { type: ' javascript' : ' createApp(App).use(TDesign);'
727+ ],
728+ ' mobile-react' : [
729+ { type: ' bash' : ' npm i tdesign-mobile-react'
730+ { type: ' javascript' : " import { Button } from 'tdesign-mobile-react';"
731+ { type: ' javascript' : " import 'tdesign-mobile-react/es/style/index.css';"
732+ { type: ' javascript' : ' '
733+ ],
720734 },
721735 componentModel: {
722736 selectValue: [' 1'
@@ -848,9 +862,8 @@ export default {
848862 this .getBrandList ();
849863 this .getNews ();
850864 window .addEventListener (' resize' this .handleResize );
851- this .tabTimer = setInterval (() => {
852- this .currentTab = this .currentTab === 2 ? 0 : this .currentTab + 1 ;
853- }, 4000 );
865+ window .addEventListener (' mousemove' this .handleMousemove );
866+ this .initTabTimer ();
854867 },
855868
856869 beforeDestroy () {
@@ -859,9 +872,36 @@ export default {
859872 clearInterval (this .tabTimer );
860873 this .observer .disconnect ();
861874 window .removeEventListener (' resize' this .handleResize );
875+ window .removeEventListener (' mousemove' this .handleMousemove );
862876 },
863877
864878 methods: {
879+ handleMousemove (event ) {
880+ if (ticking) return ;
881+ ticking = true ;
882+ window .requestAnimationFrame (() => {
883+ this .checkMousePosition (event );
884+ ticking = false ;
885+ });
886+ },
887+ checkMousePosition (event ) {
888+ const element = document .querySelector (' #moduleBoard'
889+ if (! element) return ;
890+ const isOver = element .contains (event .target );
891+ if (isOver) {
892+ clearInterval (this .tabTimer );
893+ this .tabTimer = null ;
894+ return ;
895+ }
896+ if (this .tabTimer ) return ;
897+ this .initTabTimer ();
898+ },
899+ initTabTimer () {
900+ clearInterval (this .tabTimer );
901+ this .tabTimer = setInterval (() => {
902+ this .currentTab = this .currentTab === 2 ? 0 : this .currentTab + 1 ;
903+ }, 4000 );
904+ },
865905 handleClickNews (url ) {
866906 if (url) window .open (url, ' _blank'
867907 },
0 commit comments