Browse Source

fix(rate): dev error

richard1015 3 years ago
parent
commit
05724f4eb7
3 changed files with 244 additions and 154 deletions
  1. 0 146
      src/packages/__VUE/rate/common.ts
  2. 122 4
      src/packages/__VUE/rate/index.taro.vue
  3. 122 4
      src/packages/__VUE/rate/index.vue

+ 0 - 146
src/packages/__VUE/rate/common.ts

@@ -1,146 +0,0 @@
-import { computed, Ref, ref } from 'vue';
-import Taro from '@tarojs/taro';
-import { StarN } from '@nutui/icons-vue';
-import { StarN as StarNTaro } from '@nutui/icons-vue-taro';
-import { createComponent, renderIcon } from '@/packages/utils/create';
-import { pxCheck } from '@/packages/utils/pxCheck';
-import { useTouch } from '@/packages/utils/useTouch';
-const { componentName } = createComponent('rate');
-const useComponent = (touchable: Boolean = true) => {
-  return {
-    props: {
-      count: {
-        type: [String, Number],
-        default: 5
-      },
-      modelValue: {
-        type: [String, Number],
-        default: 0
-      },
-      icon: {
-        type: Object,
-        default: () => {
-          return Taro.getEnv() === 'WEB' ? StarN : StarNTaro;
-        }
-      },
-      activeColor: {
-        type: String,
-        default: ''
-      },
-      voidColor: {
-        type: String,
-        default: ''
-      },
-      readonly: {
-        type: Boolean,
-        default: false
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      allowHalf: {
-        type: Boolean,
-        default: false
-      },
-      touchable: {
-        type: Boolean,
-        default: true
-      },
-      spacing: {
-        type: [String, Number],
-        default: 14
-      }
-    },
-    components: { StarN },
-    emits: ['update:modelValue', 'change'],
-    setup(props: any, { emit, slots }: any) {
-      const rateRefs = ref<HTMLElement[]>([]);
-      const classes = computed(() => {
-        const prefixCls = componentName;
-        return {
-          [prefixCls]: true
-        };
-      });
-      const updateVal = (value: number) => {
-        emit('update:modelValue', value);
-        emit('change', value);
-      };
-      const onClick = (e: number, index: number) => {
-        if (props.disabled || props.readonly) return;
-        let value = 0;
-        if (index === 1 && props.modelValue === index) {
-        } else {
-          value = index;
-          if (props.allowHalf && e == 2) {
-            value -= 0.5;
-          }
-        }
-        updateVal(value);
-      };
-      const getScoreByPosition = (x: number, rateRefs: Ref<HTMLElement[]>, allowHalf: boolean) => {
-        let v = 0;
-        for (let index = rateRefs.value.length - 1; index >= 0; index--) {
-          const item = rateRefs.value[index];
-          if (x > item.offsetLeft) {
-            if (allowHalf) {
-              v = index + (x > item.offsetLeft + item.clientWidth / 2 ? 1 : 0.5);
-            } else {
-              v = index + 1;
-            }
-            break;
-          }
-        }
-        return v;
-      };
-      const touch = useTouch();
-      const touchMethods = {
-        onTouchStart(event: Event) {
-          if (!props.touchable) return;
-          touch.start(event);
-        },
-        onTouchMove(event: Event) {
-          if (!props.touchable || !touchable) return;
-          touch.move(event);
-          if (touch.isHorizontal()) {
-            if (rateRefs.value) {
-              event.preventDefault();
-              updateVal(getScoreByPosition(touch.moveX.value, rateRefs, props.allowHalf));
-            }
-          }
-        }
-      };
-      const refRandomId = Math.random().toString(36).slice(-8);
-      return {
-        classes,
-        ...touchMethods,
-        onClick,
-        pxCheck,
-        rateRefs,
-        refRandomId,
-        renderIcon,
-        slots
-      };
-    }
-  };
-};
-
-// import { useTaroRect } from '@/packages/utils/useTaroRect';
-// const getScoreByPositionTaro = async (x: number, rateRefs: Ref<HTMLElement[]>, allowHalf: boolean) => {
-//     let v = 0;
-//     for (let index = rateRefs.value.length - 1; index >= 0; index--) {
-//         const _item = rateRefs.value[index];
-//         let item = await useTaroRect(_item, Taro);
-//         if (x > (item.left)) {
-//             if (allowHalf) {
-//                 v = index + (x > item.left + item.width / 2 ? 1 : 0.5);
-//             } else {
-//                 v = index + 1;
-//             }
-//             break;
-//         }
-//     }
-//     return v;
-// };
-export const component = useComponent();
-export const taroComponent = useComponent(false);

+ 122 - 4
src/packages/__VUE/rate/index.taro.vue

@@ -1,7 +1,125 @@
 <template src="./template.html"></template>
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
-const { create } = createComponent('rate');
-import { taroComponent } from './common';
-export default create(taroComponent);
+import { StarN } from '@nutui/icons-vue-taro';
+import { computed, Ref, ref } from 'vue';
+import { createComponent, renderIcon } from '@/packages/utils/create';
+import { pxCheck } from '@/packages/utils/pxCheck';
+import { useTouch } from '@/packages/utils/useTouch';
+const { create, componentName } = createComponent('rate');
+export default create({
+  props: {
+    count: {
+      type: [String, Number],
+      default: 5
+    },
+    modelValue: {
+      type: [String, Number],
+      default: 0
+    },
+    icon: {
+      type: Object,
+      default: () => {
+        return StarN;
+      }
+    },
+    activeColor: {
+      type: String,
+      default: ''
+    },
+    voidColor: {
+      type: String,
+      default: ''
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    allowHalf: {
+      type: Boolean,
+      default: false
+    },
+    touchable: {
+      type: Boolean,
+      default: true
+    },
+    spacing: {
+      type: [String, Number],
+      default: 14
+    }
+  },
+  components: { StarN },
+  emits: ['update:modelValue', 'change'],
+  setup(props: any, { emit, slots }: any) {
+    const rateRefs = ref<HTMLElement[]>([]);
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const updateVal = (value: number) => {
+      emit('update:modelValue', value);
+      emit('change', value);
+    };
+    const onClick = (e: number, index: number) => {
+      if (props.disabled || props.readonly) return;
+      let value = 0;
+      if (index === 1 && props.modelValue === index) {
+      } else {
+        value = index;
+        if (props.allowHalf && e == 2) {
+          value -= 0.5;
+        }
+      }
+      updateVal(value);
+    };
+    const getScoreByPosition = (x: number, rateRefs: Ref<HTMLElement[]>, allowHalf: boolean) => {
+      let v = 0;
+      for (let index = rateRefs.value.length - 1; index >= 0; index--) {
+        const item = rateRefs.value[index];
+        if (x > item.offsetLeft) {
+          if (allowHalf) {
+            v = index + (x > item.offsetLeft + item.clientWidth / 2 ? 1 : 0.5);
+          } else {
+            v = index + 1;
+          }
+          break;
+        }
+      }
+      return v;
+    };
+    const touch = useTouch();
+    const touchMethods = {
+      onTouchStart(event: Event) {
+        if (!props.touchable) return;
+        touch.start(event);
+      },
+      onTouchMove(event: Event) {
+        if (!props.touchable || !false) return;
+        touch.move(event);
+        if (touch.isHorizontal()) {
+          if (rateRefs.value) {
+            event.preventDefault();
+            updateVal(getScoreByPosition(touch.moveX.value, rateRefs, props.allowHalf));
+          }
+        }
+      }
+    };
+    const refRandomId = Math.random().toString(36).slice(-8);
+    return {
+      classes,
+      ...touchMethods,
+      onClick,
+      pxCheck,
+      rateRefs,
+      refRandomId,
+      renderIcon,
+      slots
+    };
+  }
+});
 </script>

+ 122 - 4
src/packages/__VUE/rate/index.vue

@@ -1,7 +1,125 @@
 <template src="./template.html"></template>
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
-const { create } = createComponent('rate');
-import { component } from './common';
-export default create(component);
+import { computed, Ref, ref } from 'vue';
+import { StarN } from '@nutui/icons-vue';
+import { createComponent, renderIcon } from '@/packages/utils/create';
+import { pxCheck } from '@/packages/utils/pxCheck';
+import { useTouch } from '@/packages/utils/useTouch';
+const { create, componentName } = createComponent('rate');
+export default create({
+  props: {
+    count: {
+      type: [String, Number],
+      default: 5
+    },
+    modelValue: {
+      type: [String, Number],
+      default: 0
+    },
+    icon: {
+      type: Object,
+      default: () => {
+        return StarN;
+      }
+    },
+    activeColor: {
+      type: String,
+      default: ''
+    },
+    voidColor: {
+      type: String,
+      default: ''
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    allowHalf: {
+      type: Boolean,
+      default: false
+    },
+    touchable: {
+      type: Boolean,
+      default: true
+    },
+    spacing: {
+      type: [String, Number],
+      default: 14
+    }
+  },
+  components: { StarN },
+  emits: ['update:modelValue', 'change'],
+  setup(props: any, { emit, slots }: any) {
+    const rateRefs = ref<HTMLElement[]>([]);
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const updateVal = (value: number) => {
+      emit('update:modelValue', value);
+      emit('change', value);
+    };
+    const onClick = (e: number, index: number) => {
+      if (props.disabled || props.readonly) return;
+      let value = 0;
+      if (index === 1 && props.modelValue === index) {
+      } else {
+        value = index;
+        if (props.allowHalf && e == 2) {
+          value -= 0.5;
+        }
+      }
+      updateVal(value);
+    };
+    const getScoreByPosition = (x: number, rateRefs: Ref<HTMLElement[]>, allowHalf: boolean) => {
+      let v = 0;
+      for (let index = rateRefs.value.length - 1; index >= 0; index--) {
+        const item = rateRefs.value[index];
+        if (x > item.offsetLeft) {
+          if (allowHalf) {
+            v = index + (x > item.offsetLeft + item.clientWidth / 2 ? 1 : 0.5);
+          } else {
+            v = index + 1;
+          }
+          break;
+        }
+      }
+      return v;
+    };
+    const touch = useTouch();
+    const touchMethods = {
+      onTouchStart(event: Event) {
+        if (!props.touchable) return;
+        touch.start(event);
+      },
+      onTouchMove(event: Event) {
+        if (!props.touchable || !true) return;
+        touch.move(event);
+        if (touch.isHorizontal()) {
+          if (rateRefs.value) {
+            event.preventDefault();
+            updateVal(getScoreByPosition(touch.moveX.value, rateRefs, props.allowHalf));
+          }
+        }
+      }
+    };
+    const refRandomId = Math.random().toString(36).slice(-8);
+    return {
+      classes,
+      ...touchMethods,
+      onClick,
+      pxCheck,
+      rateRefs,
+      refRandomId,
+      renderIcon,
+      slots
+    };
+  }
+});
 </script>