@shijiu/jsview-vue 2.1.200 → 2.1.340-test.0

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -69,7 +69,8 @@
                                             METRO_WIDGET_CONST.ITEM_SLIDE.DISABLE 不滚动
                                             METRO_WIDGET_CONST.ITEM_SLIDE.ACT_ITEM_FOCUS 按照SlideSetting滚动
                                             METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT 按照子组件发送的focusRect事件滚动
-                                          zIndex {int | object}: item的zIndex, 为object时可以分别设置{focus: 0, normal: 0}, 为number时则同时设置获焦和不获焦的zIndex
+                                          zIndex {int | object}: item的zIndex, 为object时可以分别设置{focus: 0, normal: 0}, 为number时则同时设置获焦和不获焦的zIndex,
+                                          uid {string}: item的uid, 可以通过uid来设置焦点
                                         }
  *
  *      onFocus {function} 控件获取焦点的回调
@@ -83,7 +84,8 @@
                                 visibleStart: 可视区域的起点
                                 visibleRange: 可视区域大小(不含padding)
                                 totalSize: 所有item的总长
- *
+ *      onFocusRectChange {() => void} 焦点区域变化的回调
+ *      onAllItemResizeDone {() => void} 所有item resize完成的回调
  *      loadAll {boolean} 加载不显示的view，触控场景使用
  *      flingPageWidth {}
  *      flingPageEdge {}
@@ -100,6 +102,10 @@
           @description 滚动到指定item
           @params {int} index 目标item的index, 注意与item的id区别, id是可获焦item的序号
           @params {boolean} doAnim 是否做动画
+        slideToDiv
+          @description 滚动到指定div, div必需是MetroWidget的子
+          @params {object} div 目标div
+          @params {boolean} doAnim 是否做动画
         setEnterFocusId
           @description 设置落焦时的焦点
           @params {int} id 落焦时的焦点id
@@ -124,8 +130,17 @@
                                           {
                                             lockChildSlideEvent: {boolean} 设置焦点时忽略子发过来的滚动事件
                                           }
+        setFocusByUid
+          @description 通过uid设置焦点
+          @params {int} id 焦点id
+          @params {boolean} needSlide 是否需要滚动
+          @params {boolean} doAnim 滚动时是否做动画
+          @params {object} extraSetting 额外的参数设置
+                                          {
+                                            lockChildSlideEvent: {boolean} 设置焦点时忽略子发过来的滚动事件
+                                          }
         refreshData
-          @description 刷新数据, 只有存在provideData时才会生效
+          @description 刷新数据, 只有存在provideData时才会生效. refresh时对比的array里的object, 所以可以建一个新的array, 只要保证数据成员还是之前的那个object就行
           @params {boolean} forceUpdate 是否强制刷新
         getVisibleItems
           @description 获取可视item的列表信息
@@ -153,6 +168,14 @@
           @params {int} index: item的index
           @params {int} blurZIndex: blur状态下的zIndex
           @params {int} focusZIndex: focus状态下的zIndex, 缺省时采用blurZIndex相同的值
+        getTemplatePosition
+          @description 获取item的template位置
+          @params {int} index: item的index
+          @return {object} {left: number, top: number, width: number, height: number,}
+        lockSlide
+          @description 锁定滚动
+        unlockSlide
+          @description 取消锁定
             
   slots:
     renderItem: 该slot用于描画每个单元格
@@ -213,8 +236,9 @@
 -->
 
 <script setup>
-import { ref, shallowRef, computed } from "vue";
+import { ref, shallowRef, computed, reactive } from "vue";
 import { setup } from "./MetroWidgetSetup";
+import SlotComponent from "./SlotComponent.vue";
 import {
   VERTICAL,
   HORIZONTAL,
@@ -351,6 +375,16 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  onFocusRectChange: {
+    type: Function,
+  },
+  onAllItemResizeDone: {
+    type: Function,
+  },
+  // enableTouch: {
+  //   type: Boolean,
+  //   default: false,
+  // },
 });
 
 const renderBreakKey = props.enableItemRenderBreak ? RENDER_ITEM_BREAK_KEY : "";
@@ -363,6 +397,12 @@ const slideDivTop = ref(0);
 const focusNode = shallowRef(null);
 const pageUpdateToken = ref(0);
 
+const touchDiv = shallowRef(null);
+const touchDivSize = reactive({
+  width: 0,
+  height: 0,
+});
+
 const normalizedPlaceHolder = computed(() => {
   return {
     gap: props.placeHolderSetting.gap ?? 0,
@@ -379,9 +419,12 @@ const {
   focusBlockOnFocus,
   focusBlockOnBlur,
   focusBlockOnKeyDown,
-  focusBlockOnCustomerEvent,
+  focusBlockOnCustomEvent,
   _onFocusableItemEdge,
   exportObject,
+  onTouchDown,
+  onTouchRelease,
+  currentFocusIndex,
 } = setup(
   props,
   itemRender,
@@ -392,9 +435,10 @@ const {
   slideDivTop,
   focusNode,
   pageUpdateToken,
+  touchDiv,
+  touchDivSize,
   "common"
 );
-
 defineExpose(exportObject);
 </script>
 
@@ -423,67 +467,79 @@ defineExpose(exportObject);
           top: slideDivTop,
         }"
       >
-        <div>
-          <slot name="background"></slot>
-        </div>
-        <div ref="locateDiv">
-          <jsv-focus-block
-            ref="focusNode"
-            :name="name"
-            :onAction="{
-              onFocus: focusBlockOnFocus,
-              onBlur: focusBlockOnBlur,
-              onKeyDown: focusBlockOnKeyDown,
-              onCustomerEvent: focusBlockOnCustomerEvent,
-            }"
-          >
-            <div
-              v-for="(item, index) in renderData"
-              :key="pageUpdateToken + '_' + item.index"
-              :ref="item.divRef"
-              :style="{
-                left: item.templateInfo.left,
-                top: item.templateInfo.top,
-                width: item.templateInfo.width,
-                height: item.templateInfo.height,
-                zIndex: item.renderStyle.zIndex,
+        <div
+          ref="touchDiv"
+          :style="{
+            width: touchDivSize.width,
+            height: touchDivSize.height,
+          }"
+          @jsv-touchend="onTouchRelease"
+        >
+          <div>
+            <slot name="background"></slot>
+          </div>
+          <div ref="locateDiv">
+            <jsv-focus-block
+              ref="focusNode"
+              :name="name"
+              :onAction="{
+                onFocus: focusBlockOnFocus,
+                onBlur: focusBlockOnBlur,
+                onKeyDown: focusBlockOnKeyDown,
+                onCustomEvent: focusBlockOnCustomEvent,
               }"
             >
               <div
-                v-if="
-                  !enableItemRenderBreak || item.mounted.value || itemRender
-                "
-                :key="renderBreakKey"
-                :ref="item.slotRef"
-                :id="`${name}_${index}`"
-              >
-                <slot
-                  name="renderItem"
-                  :data="item.customerData"
-                  :onEdge="_onFocusableItemEdge"
-                  :onAction="item.registerObj"
-                  :query="item.query"
-                  :onItemEdge="_onFocusableItemEdge"
-                ></slot>
-              </div>
-              <div
-                v-if="
-                  enableItemRenderBreak &&
-                  placeHolderSetting &&
-                  !item.mounted.value
-                "
+                v-for="(item, index) in renderData"
+                :key="pageUpdateToken + '_' + item.index"
+                :ref="item.divRef"
                 :style="{
-                  width: item.renderStyle.width - normalizedPlaceHolder.gap,
-                  height: item.renderStyle.height - normalizedPlaceHolder.gap,
-                  backgroundColor:
-                    exportObject.getCurrentFocusIndex() == item.index
-                      ? normalizedPlaceHolder.focusBackgroundColor
-                      : normalizedPlaceHolder.backgroundColor,
-                  borderRadius: normalizedPlaceHolder.borderRadius,
+                  left: item.templateInfo.left,
+                  top: item.templateInfo.top,
+                  width: item.templateInfo.width,
+                  height: item.templateInfo.height,
+                  zIndex: item.renderStyle.zIndex,
                 }"
-              ></div>
-            </div>
-          </jsv-focus-block>
+                @click="item.onTap.value"
+              >
+                <div
+                  v-if="
+                    !enableItemRenderBreak || item.mounted.value || itemRender
+                  "
+                  :key="renderBreakKey"
+                  :ref="item.slotRef"
+                  :id="`${name}_${index}`"
+                >
+                  <slot-component key="__QcodeJsviewFreezeComponent">
+                    <slot
+                      name="renderItem"
+                      :data="item.customerData"
+                      :onEdge="_onFocusableItemEdge"
+                      :onAction="item.registerObj"
+                      :query="item.query"
+                      :onItemEdge="_onFocusableItemEdge"
+                    ></slot>
+                  </slot-component>
+                </div>
+                <div
+                  v-if="
+                    enableItemRenderBreak &&
+                    placeHolderSetting &&
+                    !item.mounted.value
+                  "
+                  :style="{
+                    width: item.renderStyle.width - normalizedPlaceHolder.gap,
+                    height: item.renderStyle.height - normalizedPlaceHolder.gap,
+                    backgroundColor:
+                      currentFocusIndex == item.index
+                        ? normalizedPlaceHolder.focusBackgroundColor
+                        : normalizedPlaceHolder.backgroundColor,
+                    borderRadius: normalizedPlaceHolder.borderRadius,
+                  }"
+                ></div>
+              </div>
+            </jsv-focus-block>
+          </div>
         </div>
         <div>
           <slot name="foreground"></slot>