@shijiu/jsview-vue-samples 2.1.476-test.0 → 2.1.482-test.0

package/DemoHomepage/components/BodyFrame.vue

@@ -22,6 +22,7 @@ const measures = (item) => {
     width: item.width,
     height: item.height,
     focusable: item.focusable,
+    enableTap: true,
   };
 };
 
@@ -65,6 +66,7 @@ watch(
     :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
     :onEdge="props.onEdge"
     :initFocusId="initFocusId"
+    :touchFlag="1"
   >
     <template #renderItem="{ data, query, onEdge, onAction }">
       <Item

package/DemoHomepage/components/Item.vue

@@ -40,6 +40,7 @@ const onBlur = () => {
 }
 
 const onClick = () => {
+  console.log("testtest", "onclick ", props.data.name)
   if (props.itemClick) {
     props?.itemClick(props.query.id, props.data);
   }

package/DemoHomepage/components/TabFrame.vue

@@ -7,15 +7,17 @@ const measures = (item) => {
     width: item.width,
     height: item.height,
     focusable: item.focusable,
+    enableTap: true,
   };
 };
 
 const props = defineProps({
   name: String,
   itemFocus: Function,
+  itemClick: Function,
   onEdge: Function,
   initId: Number,
-})
+});
 
 const width = 1280;
 const height = 100;
@@ -47,22 +49,38 @@ const data = [
     name: "游戏实例",
     focusable: true,
     id: 3,
-  }
+  },
 ];
 const direction = VERTICAL;
-
 </script>
 
 <template>
-  <metro-widget :name="props.name" :width="width" :height="height" :direction="direction" :data="data"
-    :measures="measures" :padding="{ left: 10, top: 10, right: 10, bottom: 10 }" :onEdge="props.onEdge" :initFocusId="props.initId">
+  <metro-widget
+    :name="props.name"
+    :width="width"
+    :height="height"
+    :direction="direction"
+    :data="data"
+    :measures="measures"
+    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
+    :onEdge="props.onEdge"
+    :initFocusId="props.initId"
+  >
     <template #renderItem="{ data, query, onEdge, onAction }">
-      <Item :style="{
+      <Item
+        :style="{
           width: data.width,
           height: data.height,
           backgroundColor: '#00AA00',
           color: '#FFFFFF',
-        }" :data="data" :query="query" :onEdge="onEdge" :onAction="onAction" :itemFocus="props.itemFocus">
+        }"
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+        :itemFocus="props.itemFocus"
+        :itemClick="props.itemClick"
+      >
         {{ data.name }}
       </Item>
     </template>

package/DemoHomepage/router.js

@@ -298,7 +298,13 @@ let routeList = [
     name: 'latex公式',
     path: '/feature/LatexFormula',
     component: () => import('jsview-vue-samples/LatexFormula/App.vue'),
-  }, {
+  }, 
+  {
+    name: '触控示例',
+    path: '/feature/TouchWidget',
+    component: () => import('jsview-vue-samples/TouchWidget/App.vue'),
+  }, 
+  {
     name: 'Swiper3dTest',
     path: '/Operations/Swiper3D',
     component: () => import('jsview-vue-samples/SwiperTest/App.vue'),

package/DemoHomepage/views/Homepage.vue

@@ -102,6 +102,14 @@ let tabItemFocus = (data) => {
   }
 };
 
+let tabItemClick = (id, data) => {
+  console.log("testtest", "tabItemClick");
+  if (data.id != tabId.value) {
+    tabId.value = data.id;
+    contentData.value = dataList[data.id];
+  }
+}
+
 let onDialogAction = (msg) => {
   showExitDialog.value = false;
   changeFocus(preFocusName);
@@ -156,6 +164,7 @@ onDeactivated(() => {
           :onEdge="onTabEdge"
           :itemFocus="tabItemFocus"
           :initId="tabId"
+          :itemClick="tabItemClick"
         />
       </div>
 

package/TouchWidget/App.vue

@@ -12,7 +12,7 @@ const focusHub = useFocusHub();
 
 const provideData = () => {
   const data = [];
-  for (let i = 0; i < 10; i++) {
+  for (let i = 0; i < 30; i++) {
     data.push({
       width: 500,
       height: 190,
@@ -57,7 +57,7 @@ onMounted(() => {
   <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
   <metro-widget
     name="mwWidget"
-    :top="10"
+    :top="50"
     :left="50"
     :width="660"
     :height="600"

package/TouchWidget/Item.vue

@@ -21,7 +21,7 @@ const onBlur = () => {
   focused.value = false;
 };
 const onClick = () => {
-  console.log("testtest item onclick ", props.data);
+  console.log("testtest item onclick ", props.data.content);
 };
 
 // 一般在create的时候进行回调的注册, 使用 option api的可以在created时进行注册

package/TouchWidget/WidgetItem.vue

@@ -12,7 +12,10 @@ const focusHub = useFocusHub();
 const mwRef = shallowRef(null);
 
 const measures = (item) => {
-  return item;
+  return {
+    ...item,
+    enableTap: true,
+  };
 };
 const randomColor = () => {
   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.1.476-test.0",
+  "version": "2.1.482-test.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",