@dolphinweex/weex-harmony 0.1.32 → 0.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dolphinweex/weex-harmony",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "weex harmony adapter",
   "main": "index.js",
   "files": [

package/src/components/hl-web-base.vue

@@ -1,11 +1,11 @@
 <template>
-    <!-- <BaseSameLayer
-        :hosSameLayerArgs="hosSameLayerArgs"
-        embedType="native/web"
-        :defaultWidth="300"
-        :defaultHeight="120"
-    ></BaseSameLayer> -->
-    <iframe :src="src" ref="iframe"></iframe>
+  <!-- <BaseSameLayer
+      :hosSameLayerArgs="hosSameLayerArgs"
+      embedType="native/web"
+      :defaultWidth="300"
+      :defaultHeight="120"
+  ></BaseSameLayer> -->
+  <iframe :src="src" ref="iframe"></iframe>
 
 </template>
 
@@ -14,100 +14,100 @@ import BaseSameLayer from "./baseSameLayer.vue";
 let count = 0
 
 export default {
-  name: "HlWeb",
-  data() {
-    return {
-      width: 0,
-      height: 0
-    }
-  },
-  props: {
-    hosUniqueProps: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    src: {
-      type: String,
-      required: true,
+name: "HlWeb",
+data() {
+  return {
+    width: 0,
+    height: 0
+  }
+},
+props: {
+  hosUniqueProps: {
+    type: Object,
+    default() {
+      return {};
     },
-    harmonyStyle: {
-      type: Object,
-      required: false,
-    }
   },
+  src: {
+    type: String,
+    required: true,
+  },
+  harmonyStyle: {
+    type: Object,
+    required: false,
+  }
+},
 
-  computed: {
-    hosSameLayerArgs() {
-    return {
-        ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
-        src: this.src,
-        width: this.width,
-        height: (this.harmonyStyle && this.harmonyStyle.height) ? this.harmonyStyle.height : this.height,
-        pagefinish: this.onPageFinish,
-        pagestart: this.onPageStart,
-        error: this.onError,
-        receivedtitle: this.onReceivedTitle,
-        message: this.onMessage,
-      }
+computed: {
+  hosSameLayerArgs() {
+  return {
+      ...this.hosUniqueProps, // 鸿蒙原生组件独有属性
+      src: this.src,
+      width: this.width,
+      height: (this.harmonyStyle && this.harmonyStyle.height) ? this.harmonyStyle.height : this.height,
+      pagefinish: this.onPageFinish,
+      pagestart: this.onPageStart,
+      error: this.onError,
+      receivedtitle: this.onReceivedTitle,
+      message: this.onMessage,
     }
-  },
-  mounted() {
-    this.width = this.$el.clientWidth;
-    this.height = this.$el.clientHeight;
+  }
+},
+mounted() {
+  this.width = this.$el.clientWidth;
+  this.height = this.$el.clientHeight;
 
-    this.onPageStart();
-    var that = this
-    window.addEventListener('message', function (event)  {
-      // 可以添加来源检查以确保消息来自预期的源
-      if (event.origin === window.origin && that.onMessage) {
-        that.onMessage(event.data)
-      }
-    });
+  this.onPageStart();
+  var that = this
+  window.addEventListener('message', function (event)  {
+    // 可以添加来源检查以确保消息来自预期的源
+    if (event.origin === window.origin && that.onMessage) {
+      that.onMessage(event.data)
+    }
+  });
 
-    this.$refs["iframe"].addEventListener('load', this.onPageFinish);
+  this.$refs["iframe"].addEventListener('load', this.onPageFinish);
 
-    this.$refs["error"].addEventListener('load', this.onError);
+  this.$refs["error"].addEventListener('load', this.onError);
+},
+methods: { 
+  postMessage(message){
+    const iframe = this.$refs["iframe"]
+    const target = new URL(iframe.src).origin
+    iframe.contentWindow.postMessage(message, target)
+    //this.$refs["iframe"].contentWindow.postMessage(message, this.src)
   },
-  methods: { 
-    postMessage(message){
-      const iframe = this.$refs["iframe"]
-      const target = new URL(iframe.src).origin
-      iframe.contentWindow.postMessage(message, target)
-      //this.$refs["iframe"].contentWindow.postMessage(message, this.src)
-    },
-    // 自定义拓展其它逻辑
-    onPageFinish(res) {
-        console.log("[web] pagefinish ", res);
-        this.$refs["iframe"].contentWindow.$midea_harmony_native = window.$midea_harmony_native
-        this.$refs["iframe"].contentWindow.postMessage(JSON.stringify(window.$midea_harmony_native), '*');
-        this.$emit("pagefinish", res);
-    },
-    onPageStart(res) {
-        console.log("[web] pagestart ", res);
-        this.$emit("pagestart", res);
-    },
-    onError(res) {
-        console.log("[web] onError ", res);
-        this.$emit("error", res);
-    },
-    onReceivedTitle(res) {
-        console.log("[web] onReceivedTitle ", res);
-        this.$emit("receivedtitle", res);
-    },
-    onMessage(res){
-      console.log("[web] onMessage ", res);
-      this.$emit("message", res);
-    },
+  // 自定义拓展其它逻辑
+  onPageFinish(res) {
+      console.log("[web] pagefinish ", res);
+      this.$refs["iframe"].contentWindow.$midea_harmony_native = window.$midea_harmony_native
+      this.$refs["iframe"].contentWindow.postMessage(JSON.stringify(window.$midea_harmony_native), '*');
+      this.$emit("pagefinish", res);
   },
-  watch: {
-    loading(newText, oldText) {
-      if (newText !== oldText) {
-        this.scheduleTransfer(); // 当loading属性变化时重新调用
-      }
-    },
+  onPageStart(res) {
+      console.log("[web] pagestart ", res);
+      this.$emit("pagestart", res);
+  },
+  onError(res) {
+      console.log("[web] onError ", res);
+      this.$emit("error", res);
+  },
+  onReceivedTitle(res) {
+      console.log("[web] onReceivedTitle ", res);
+      this.$emit("receivedtitle", res);
+  },
+  onMessage(res){
+    console.log("[web] onMessage ", res);
+    this.$emit("message", res);
+  },
+},
+watch: {
+  loading(newText, oldText) {
+    if (newText !== oldText) {
+      this.scheduleTransfer(); // 当loading属性变化时重新调用
+    }
   },
+},
 };
 </script>
 

package/src/components/midea-scene-card-drag-list-view.vue

@@ -122,9 +122,7 @@
         <div class="flexBox">
           <img
             :src="data.list[draggingIndex].iconImage.url"
-            :style="
-              applyNormalAttribute(data.list[draggingIndex].iconImage)
-            "
+            :style="applyNormalAttribute(data.list[draggingIndex].iconImage)"
           />
           <div @click.stop.prevent>
             <img
@@ -134,9 +132,7 @@
                   ? data.list[draggingIndex].selectIcon.selectedUrl
                   : data.list[draggingIndex].selectIcon.url
               "
-              :style="
-                applyNormalAttribute(data.list[draggingIndex].selectIcon)
-              "
+              :style="applyNormalAttribute(data.list[draggingIndex].selectIcon)"
             />
           </div>
         </div>
@@ -152,7 +148,6 @@
 </template>
 
 <script>
-import { weex_harmony_rebindGestureDelayed } from '@dolphinweex/harmony-webpack-adapter/registerGesture.js'; // 请替换为实际的loader文件路径
 import lottie from 'lottie-web';
 const scla = 2;
 export default {
@@ -177,7 +172,6 @@ export default {
       selected: null,
       longPressTimer: null,
       longPressDuration: 350,
-      longPressStartIndex: null,
       draggingIndex: null,
       hoverIndex: null,
       isTouchDragging: false,
@@ -199,10 +193,6 @@ export default {
       fixedItemHeight: 0,
       animationFrameId: null,
       isProcessingData: false,
-      // 手势事件配置 - 根据实际使用的手势事件来配置
-      gestureEventMap: [],
-      // 元素ID - 用于标识需要绑定手势的元素
-      elementId: 'grid-item'
     };
   },
   computed: {
@@ -210,7 +200,9 @@ export default {
       return {
         '--grid-cols': this.data.spanCount || this.cols,
         '--grid-gap': `${this.data.spaceSize || 8}px`,
-        '--grid-margin': `${(this.data.layoutConfig.marginStart ) + (this.data.layoutConfig.marginEnd )}px`,
+        '--grid-margin': `${
+          this.data.layoutConfig.marginStart + this.data.layoutConfig.marginEnd
+        }px`,
         marginTop: this.data.layoutConfig.marginTop * scla,
         marginBottom: this.data.layoutConfig.marginBottom * scla,
         marginLeft: this.data.layoutConfig.marginStart * scla,
@@ -222,7 +214,6 @@ export default {
       if (this.draggingIndex === null) {
         return { display: 'none' };
       }
-
       const item = this.data.list[this.draggingIndex];
       let itemView = {};
       if (item) {
@@ -248,108 +239,49 @@ export default {
     updateListItem(data) {
       console.log('updateListItem收到数据:', JSON.stringify(data));
       const id = data.itemView.id;
-      const index = this.data.list.findIndex(
-        (item) => item.itemView.id == id
-      );
+      const index = this.data.list.findIndex((item) => item.itemView.id == id);
 
       if (index === -1) {
         return;
       }
 
-      // 检查是否有动画URL的变化
-      const oldBgAnimUrl = this.data.list[index].bgAnimView.animUrl || '';
-      const oldLoadingAnimUrl = this.data.list[index].loadingAnimView.animUrl || '';
-      const oldFrontAnimUrl = this.data.list[index].frontAnimView.animUrl || '';
-      const newBgAnimUrl = data.bgAnimView.animUrl || '';
-      const newLoadingAnimUrl = data.loadingAnimView.animUrl || '';
-      const newFrontAnimUrl = data.frontAnimView.animUrl || '';
-
       // 合并全局数据到新数据
       const mergedData = this.mergeItemData(data);
-      
-      // 更新数据
-      this.$set(this.data.list, index, mergedData);
 
+      this.$set(this.data.list, index, mergedData);
       this.$nextTick(() => {
         const itemId = String(data.itemView.id);
-
-        // 处理背景动画
-        if (oldBgAnimUrl !== newBgAnimUrl && newBgAnimUrl) {
-          this.createLottieAnimation('bg', itemId, mergedData.bgAnimView, mergedData);
+        if (mergedData.bgAnimView.animUrl) {
+          this.createLottieAnimation(
+            'bg',
+            itemId,
+            mergedData.bgAnimView,
+            mergedData
+          );
         }
 
-        // 处理加载动画
-        if (oldLoadingAnimUrl !== newLoadingAnimUrl && newLoadingAnimUrl) {
-          this.createLottieAnimation('loading', itemId, mergedData.loadingAnimView, mergedData);
+        if (mergedData.loadingAnimView.animUrl) {
+          this.createLottieAnimation(
+            'loading',
+            itemId,
+            mergedData.loadingAnimView,
+            mergedData
+          );
         }
 
-        // 处理前景动画
-        if (oldFrontAnimUrl !== newFrontAnimUrl && newFrontAnimUrl) {
-          this.createLottieAnimation('front', itemId, mergedData.frontAnimView, mergedData);
+        if (mergedData.frontAnimView.animUrl) {
+          this.createLottieAnimation(
+            'front',
+            itemId,
+            mergedData.frontAnimView,
+            mergedData
+          );
         }
-        // 重新绑定手势事件 - 解决DOM更新后手势失效问题
-        this.rebindGestureEvents();
       });
     },
-    // 重新绑定手势事件的方法
-    rebindGestureEvents() {
-      try {
-        // 延迟执行确保DOM完全更新
-        weex_harmony_rebindGestureDelayed(
-          this.$el, // 组件根元素
-          this.gestureEventMap, // 手势事件配置数组
-          this.elementId, // 元素类名ID
-          100 // 延迟100ms
-        );
-        console.log('手势事件重新绑定完成');
-      } catch (error) {
-        console.error('重新绑定手势事件失败:', error);
-      }
-    },
-          // 初始化手势事件配置
-          initGestureConfig() {
-      // 根据你实际使用的手势事件来配置
-      this.gestureEventMap = [
-        {
-          name: "@touchstart",
-          handler: this.startLongPress,
-          params: ['event', 'index'],
-          isEvent: true,
-          modifier: []
-        },
-        {
-          name: "@touchmove", 
-          handler: this.checkLongPressMove,
-          params: [],
-          isEvent: true,
-          modifier: []
-        },
-        {
-          name: "@touchend",
-          handler: this.endTouch,
-          params: [],
-          isEvent: true,
-          modifier: []
-        },
-        {
-          name: "@touchcancel",
-          handler: this.endTouch,
-          params: [],
-          isEvent: true,
-          modifier: []
-        }
-      ];
-    },
-    // 简化的动画创建方法
     createLottieAnimation(type, itemId, animView, itemData) {
       const animKey = `${type}-${itemId}`;
       const refName = `${type}Anim-${itemId}`;
-      
-      // 销毁旧动画
-      if (this.lottieAnimations[animKey]) {
-        this.lottieAnimations[animKey].destroy();
-        delete this.lottieAnimations[animKey];
-      }
 
       // 检查DOM元素是否存在
       const animEl = this.$refs[refName];
@@ -358,10 +290,43 @@ export default {
       }
 
       // 检查可见性
-      if (typeof animView.visibility === 'number' && animView.visibility === 0) {
+      if (
+        typeof animView.visibility === 'number' &&
+        animView.visibility === 0
+      ) {
         return;
       }
 
+      // 如果是bg或front动画，需要检查并清理另一个
+      if (type === 'bg' || type === 'front') {
+        const otherType = type === 'bg' ? 'front' : 'bg';
+        const otherAnimKey = `${otherType}-${itemId}`;
+
+        // 如果另一个动画正在运行，先销毁它
+        if (this.lottieAnimations[otherAnimKey]) {
+          this.lottieAnimations[otherAnimKey].destroy();
+          delete this.lottieAnimations[otherAnimKey];
+
+          // 清空对应的animUrl数据
+          const index = this.data.list.findIndex(
+            (i) => i.itemView.id == itemId
+          );
+          if (index !== -1) {
+            this.$set(
+              this.data.list[index][`${otherType}AnimView`],
+              'animUrl',
+              ''
+            );
+          }
+        }
+      }
+
+      // 销毁当前类型的旧动画
+      if (this.lottieAnimations[animKey]) {
+        this.lottieAnimations[animKey].destroy();
+        delete this.lottieAnimations[animKey];
+      }
+
       try {
         const anim = lottie.loadAnimation({
           container: animEl[0],
@@ -384,11 +349,17 @@ export default {
             if (this.lottieAnimations[animKey] === anim) {
               anim.destroy();
               delete this.lottieAnimations[animKey];
-              
+
               // 清空对应的animUrl数据
-              const index = this.data.list.findIndex(i => i.itemView.id == itemId);
+              const index = this.data.list.findIndex(
+                (i) => i.itemView.id == itemId
+              );
               if (index !== -1) {
-                this.$set(this.data.list[index][`${type}AnimView`], 'animUrl', '');
+                this.$set(
+                  this.data.list[index][`${type}AnimView`],
+                  'animUrl',
+                  ''
+                );
               }
             }
           });
@@ -422,11 +393,11 @@ export default {
       return selectedIds;
     },
     selectIconClick(e, item, index) {
-      e.preventDefault();
-      e.stopPropagation();
       if (item.selectIcon.visibility) {
         item.itemView.isSelected = !item.itemView.isSelected;
       }
+      e.preventDefault();
+      e.stopPropagation();
       const target = {
         ...item.itemView,
         id: String(item.itemView.id),
@@ -439,19 +410,16 @@ export default {
     },
 
     itemViewClick(e, item, index) {
-      if (e.defaultPrevented) {
-        return;
-      }
-
       console.log('itemViewClick');
-      // 确保取消任何长按计时器
-      this.cancelLongPress();
       if (this.data.isEditing) {
         if (item.selectIcon.visibility) {
           item.itemView.isSelected = !item.itemView.isSelected;
         }
-        return;
       }
+
+      // 确保取消任何长按计时器
+      this.cancelLongPress();
+
       e.preventDefault();
       e.stopPropagation();
       const target = {
@@ -461,6 +429,7 @@ export default {
         ...e,
       };
       this.$emit('onClickItem', target);
+      this.$emit('onSelectItems', target);
     },
 
     actionClick(e, item, index) {
@@ -571,7 +540,7 @@ export default {
         'bgAnimView',
         'frontAnimView',
       ];
-      
+
       types.forEach((type) => {
         // 使用mergeDate合并全局数据和项目数据
         processedItem[type] = this.mergeDate(item[type] || {}, type);
@@ -648,7 +617,6 @@ export default {
         return;
       }
       this.$emit('onDragEventStart', e);
-      
       // 只在编辑模式下阻止事件冒泡和默认行为
       this.cancelLongPress();
       // 记录起始触摸位置和索引
@@ -656,7 +624,6 @@ export default {
       this.touchStartX = touch.pageX;
       this.touchStartY = touch.pageY;
       console.log('开始长按ddddddddd', touch, touch.pageY, touch.pageX);
-      this.longPressStartIndex = index;
       this.isScrolling = false; // 重置滚动状态
 
       // 设置新的长按计时器
@@ -670,7 +637,7 @@ export default {
 
     // 检查长按过程中的移动
     checkLongPressMove(e) {
-      if(this.data.isEditing){
+      if (this.data.isEditing) {
         e.oriEvent.stopImmediatePropagation();
       }
       if (!this.data.isEditable) {
@@ -682,7 +649,7 @@ export default {
       const moveY = Math.abs(touch.pageY - this.touchStartY);
 
       // 如果水平移动大于垂直移动，则阻止事件传播
-      if (moveX > moveY &&!this.isTouchDragging && this.data.isEditing) {
+      if (moveX > moveY && !this.isTouchDragging && this.data.isEditing) {
         if (e.oriEvent) {
           e.oriEvent.preventDefault();
           e.oriEvent.stopPropagation();
@@ -717,38 +684,37 @@ export default {
       console.log('长按触发，进入编辑模式');
       // 进入编辑模式
 
-      if(this.data.isEditing){
-            // 设置当前拖拽索引
-      this.draggingIndex = index;
-      this.isTouchDragging = true;
-
-
-      // 使用存储的固定宽高
-      this.draggedItemRect = {
-        width: this.fixedItemWidth,
-        height: this.fixedItemHeight,
-      };
-
-      // 获取当前元素位置用于计算偏移
-      const element = document.querySelectorAll('.grid-item')[index];
-      if (element) {
-        const rect = element.getBoundingClientRect();
-        // 计算触摸点相对于元素左上角的偏移
-        this.touchOffsetX = this.touchStartX - rect.left;
-        this.touchOffsetY = this.touchStartY - rect.top;
-
-        // 设置克隆元素的初始位置
-        this.dragCloneX = rect.left;
-        this.dragCloneY = rect.top;
-        this.isDragClone = true;
-
-        requestAnimationFrame(() => {
-          this.dragCloneX = this.touchStartX - this.touchOffsetX;
-          this.dragCloneY = this.touchStartY - this.touchOffsetY;
-        });
+      if (this.data.isEditing) {
+        // 设置当前拖拽索引
+        this.draggingIndex = index;
+        this.isTouchDragging = true;
+
+        // 使用存储的固定宽高
+        this.draggedItemRect = {
+          width: this.fixedItemWidth,
+          height: this.fixedItemHeight,
+        };
+
+        // 获取当前元素位置用于计算偏移
+        const element = document.querySelectorAll('.grid-item')[index];
+        if (element) {
+          const rect = element.getBoundingClientRect();
+          // 计算触摸点相对于元素左上角的偏移
+          this.touchOffsetX = this.touchStartX - rect.left;
+          this.touchOffsetY = this.touchStartY - rect.top;
+
+          // 设置克隆元素的初始位置
+          this.dragCloneX = rect.left;
+          this.dragCloneY = rect.top;
+          this.isDragClone = true;
+
+          requestAnimationFrame(() => {
+            this.dragCloneX = this.touchStartX - this.touchOffsetX;
+            this.dragCloneY = this.touchStartY - this.touchOffsetY;
+          });
 
-        console.log('拖拽克隆已创建');
-      }
+          console.log('拖拽克隆已创建');
+        }
       }
       this.data.isEditing = true;
       this.$emit('onEditStateChanged', true);
@@ -761,7 +727,6 @@ export default {
         clearTimeout(this.longPressTimer);
         this.longPressTimer = null;
       }
-      this.longPressStartIndex = null;
     },
 
     // 触摸移动处理
@@ -808,7 +773,7 @@ export default {
         if (itemIndex === this.draggingIndex) continue;
 
         const rect = item.getBoundingClientRect();
-        
+
         // 触摸点是否在元素的中心区域内
         const centerX = (rect.left + rect.right) / 2;
         const centerY = (rect.top + rect.bottom) / 2;
@@ -832,10 +797,7 @@ export default {
 
       // 执行交换
       if (targetIndex !== null && targetIndex !== this.draggingIndex) {
-        [
-          this.data.list[this.draggingIndex],
-          this.data.list[targetIndex],
-        ] = [
+        [this.data.list[this.draggingIndex], this.data.list[targetIndex]] = [
           this.data.list[targetIndex],
           this.data.list[this.draggingIndex],
         ];
@@ -944,10 +906,7 @@ export default {
         // 重置动画实例对象
         this.lottieAnimations = {};
 
-        console.log(
-          '开始初始化Lottie动画，列表项数量:',
-          this.data.list.length
-        );
+        console.log('开始初始化Lottie动画，列表项数量:', this.data.list.length);
 
         // 延迟一点时间确保DOM完全更新并且之前的动画已被销毁
         setTimeout(() => {
@@ -958,10 +917,20 @@ export default {
             this.createLottieAnimation('bg', itemId, item.bgAnimView, item);
 
             // 加载加载中动画
-            this.createLottieAnimation('loading', itemId, item.loadingAnimView, item);
+            this.createLottieAnimation(
+              'loading',
+              itemId,
+              item.loadingAnimView,
+              item
+            );
 
             // 加载前景动画
-            this.createLottieAnimation('front', itemId, item.frontAnimView, item);
+            this.createLottieAnimation(
+              'front',
+              itemId,
+              item.frontAnimView,
+              item
+            );
           });
         }, 50); // 小延迟确保DOM已更新和旧动画已销毁
       });
@@ -988,13 +957,14 @@ export default {
     },
   },
   watch: {
-    'data.isEditing':{
-        handler(newVal){
-          if(!newVal){
-            this.$set(this.data, 'list', this.data.list);
-          }
-        },
-        deep:true
+    'data.isEditing': {
+      handler(newVal) {
+        this.generateDataList();
+        this.$nextTick(() => {
+          this.initLottieAnimations();
+        });
+      },
+      deep: true,
     },
     // 监听列表数据变化，自动更新处理后的数据
     'data.list': {
@@ -1003,20 +973,19 @@ export default {
         if (this.isProcessingData) {
           return;
         }
-        
-        console.log('检测到data.list变化');
-        this.generateDataList();
-        this.$nextTick(() => {
-          this.initLottieAnimations();
-          this.rebindGestureEvents();
-        });
+        if (newList.length !== oldList.length) {
+          console.log('检测到data.list变化');
+          this.generateDataList();
+          this.$nextTick(() => {
+            this.initLottieAnimations();
+          });
+        }
       },
       deep: true,
     },
   },
 
   mounted() {
-    this.initGestureConfig()
     console.log(this.data, 'djdjdjdjdjdjdj');
     // 初始获取grid-box宽度
     this.updateGridBoxWidth();
@@ -1045,10 +1014,12 @@ export default {
 button {
   border: none;
 }
+
 .disabled-item {
   opacity: 0.6;
   pointer-events: none;
 }
+
 .outer-container {
   width: 100%;
   position: relative;
@@ -1083,6 +1054,7 @@ button {
   will-change: transform, opacity, box-shadow;
   overflow: hidden;
 }
+
 .grid-box {
   position: relative;
   display: flex;
@@ -1093,16 +1065,19 @@ button {
   overflow: hidden;
   height: auto;
 }
+
 .leftTopIcon {
   position: fixed;
   left: 0;
   top: 0;
 }
+
 .actionButton {
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
 /* Lottie容器样式 */
 .lottie-container {
   position: absolute;
@@ -1120,6 +1095,7 @@ button {
   width: 100%;
   height: 100%;
 }
+
 .bg-anim,
 .front-anim {
   position: absolute;
@@ -1144,7 +1120,8 @@ button {
 /* 正在拖拽的元素样式 */
 .being-dragged {
   z-index: 10;
-  opacity: 0.3; /* 降低原位置的不透明度 */
+  opacity: 0.3;
+  /* 降低原位置的不透明度 */
 }
 
 /* 被拖拽时原位置隐藏 */
@@ -1168,6 +1145,7 @@ button {
   left: 0;
   top: 0;
 }
+
 .flexBox {
   display: flex;
   justify-content: space-between;
@@ -1175,6 +1153,7 @@ button {
   position: relative;
   flex-direction: row;
 }
+
 .itemText {
   display: block;
   width: 80%;
@@ -1184,7 +1163,7 @@ button {
 }
 
 .shaking {
-  animation: shake 0.3s infinite;
+  animation: shake 0.6s infinite;
   transform-origin: center center;
 }
 
@@ -1193,22 +1172,21 @@ button {
   0% {
     transform: rotateZ(2deg);
   }
+
   25% {
     transform: rotateZ(-2deg);
   }
+
   50% {
     transform: rotateZ(2deg);
   }
+
   75% {
     transform: rotateZ(-2deg);
   }
+
   100% {
     transform: rotateZ(2deg);
   }
 }
-
-.grid-item.shaking {
-  animation: seesaw-rotate 0.6s linear infinite;
-  transform-origin: center center;
-}
 </style>

package/src/components/midea-seek-bar-base.vue

@@ -122,7 +122,7 @@
     methods: {
       // 自定义拓展其它逻辑
       handleOnChange(res) {
-        if (res.mode == 1) {  //停止滑动
+        if (res.mode == 2) {  //停止滑动
             this.$emit("stopChange", res);
             this.$emit("slideEnd", res);
         } else {