chore: remove unnecessary computed (#2647)

jdf2e · Nov 9, 2023 · 5a3a445 · 5a3a445
1 parent a239dc4
commit 5a3a445
Show file tree

Hide file tree

Showing 34 changed files with 122 additions and 397 deletions.
diff --git a/src/packages/__VUE/actionsheet/index.taro.vue b/src/packages/__VUE/actionsheet/index.taro.vue
@@ -9,7 +9,7 @@
     :z-index="zIndex"
     @click-overlay="close"
   >
-    <view :class="classes">
+    <view class="nut-action-sheet">
       <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
       <slot></slot>
       <view v-if="!slotDefault">
@@ -40,12 +40,12 @@
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { computed, useSlots } from 'vue';
+import { useSlots } from 'vue';
 import type { PropType } from 'vue';
 import { popupProps } from '../popup/props';
 import Popup from '../popup/index.taro.vue';
 import { Loading } from '@nutui/icons-vue-taro';
-const { componentName, create } = createComponent('action-sheet');
+const { create } = createComponent('action-sheet');
 export interface menuItems {
   disable: boolean;
   loading: boolean;
@@ -102,12 +102,6 @@ export default create({
 
   setup(props, { emit }) {
     const slotDefault = !!useSlots().default;
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
 
     const isHighlight = (item: { [x: string]: string | boolean }) => {
       return props.chooseTagValue && props.chooseTagValue === item[props.optionTag] ? props.color : '';
@@ -137,8 +131,7 @@ export default create({
       isHighlight,
       cancelActionSheet,
       chooseItem,
-      close,
-      classes
+      close
     };
   }
 });

diff --git a/src/packages/__VUE/actionsheet/index.vue b/src/packages/__VUE/actionsheet/index.vue
@@ -8,7 +8,7 @@
     :z-index="zIndex"
     @click-overlay="close"
   >
-    <view :class="classes">
+    <view class="nut-action-sheet">
       <view v-if="title" class="nut-action-sheet__title">{{ title }}</view>
       <slot></slot>
       <view v-if="!slotDefault">
@@ -39,12 +39,12 @@
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { computed, useSlots } from 'vue';
+import { useSlots } from 'vue';
 import type { PropType } from 'vue';
 import { popupProps } from '../popup/props';
 import Popup from '../popup/index.vue';
 import { Loading } from '@nutui/icons-vue';
-const { componentName, create } = createComponent('action-sheet');
+const { create } = createComponent('action-sheet');
 export interface menuItems {
   disable: boolean;
   loading: boolean;
@@ -101,12 +101,6 @@ export default create({
 
   setup(props, { emit }) {
     const slotDefault = !!useSlots().default;
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
 
     const isHighlight = (item: { [x: string]: string | boolean }) => {
       return props.chooseTagValue && props.chooseTagValue === item[props.optionTag] ? props.color : '';
@@ -136,8 +130,7 @@ export default create({
       isHighlight,
       cancelActionSheet,
       chooseItem,
-      close,
-      classes
+      close
     };
   }
 });

diff --git a/src/packages/__VUE/barrage/index.vue b/src/packages/__VUE/barrage/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="dmBody" :class="classes">
+  <div ref="dmBody" class="nut-barrage">
     <div ref="dmContainer" :class="['dmContainer', $slots.default && 'slotContainer']">
       <div v-if="$slots.default" :class="['slotBody', 'slotBody' + classTime]">
         <slot></slot>
@@ -8,9 +8,9 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch, nextTick, useSlots } from 'vue';
+import { onMounted, onUnmounted, ref, watch, nextTick, useSlots } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('barrage');
+const { create } = createComponent('barrage');
 
 export default create({
   name: 'barrage',
@@ -44,13 +44,6 @@ export default create({
     const classTime = new Date().getTime();
     const slotDefault = !!useSlots().default;
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     let dmBody = ref<HTMLDivElement>(document.createElement('div'));
     let dmContainer = ref<HTMLDivElement>(document.createElement('div'));
 
@@ -195,7 +188,7 @@ export default create({
         run();
       });
     };
-    return { classTime, classes, danmuList, dmBody, dmContainer, add };
+    return { classTime, danmuList, dmBody, dmContainer, add };
   }
 });
 </script>
diff --git a/src/packages/__VUE/collapse/index.taro.vue b/src/packages/__VUE/collapse/index.taro.vue
@@ -1,12 +1,12 @@
 <template>
-  <view ref="collapseDom" :class="classes">
+  <view ref="collapseDom" class="nut-collapse">
     <slot></slot>
   </view>
 </template>
 <script lang="ts">
-import { computed, provide, ref, watch } from 'vue';
+import { provide, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, componentName } = createComponent('collapse');
+const { create } = createComponent('collapse');
 export default create({
   props: {
     modelValue: {
@@ -22,12 +22,6 @@ export default create({
   setup(props, { emit }) {
     const collapseDom: any = ref(null);
     const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
 
     watch(
       () => props.modelValue,
@@ -78,7 +72,7 @@ export default create({
       isExpanded
     });
 
-    return { collapseDom, classes };
+    return { collapseDom };
   }
 });
 </script>
diff --git a/src/packages/__VUE/collapse/index.vue b/src/packages/__VUE/collapse/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <view ref="collapseDom" :class="classes">
+  <view ref="collapseDom" class="nut-collapse">
     <slot></slot>
   </view>
 </template>
 <script lang="ts">
-import { computed, provide, ref, watch } from 'vue';
+import { provide, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, componentName } = createComponent('collapse');
+const { create } = createComponent('collapse');
 export default create({
   props: {
     modelValue: {
@@ -22,12 +22,6 @@ export default create({
   setup(props, { emit }) {
     const collapseDom: any = ref(null);
     const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
 
     watch(
       () => props.modelValue,
@@ -78,7 +72,7 @@ export default create({
       isExpanded
     });
 
-    return { collapseDom, classes };
+    return { collapseDom };
   }
 });
 </script>
diff --git a/src/packages/__VUE/drag/index.taro.vue b/src/packages/__VUE/drag/index.taro.vue
@@ -2,8 +2,7 @@
   <view
     :id="'myDrag' + refRandomId"
     ref="myDrag"
-    :class="classes"
-    class="myDrag"
+    class="nut-taro-drag myDrag"
     catchtouchmove="true"
     :style="{
       transform: ` translate(${state.left + 'px'}, ${state.top + 'px'})`,
@@ -18,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { onMounted, onDeactivated, onActivated, reactive, ref, computed } from 'vue';
+import { onMounted, onDeactivated, onActivated, reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import requestAniFrame from '@/packages/utils/raf';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
@@ -75,12 +74,6 @@ export default create({
       } as Record<string, any>
     });
 
-    const classes = computed(() => {
-      const prefixCls = 'nut-taro-drag';
-      return {
-        [prefixCls]: true
-      };
-    });
     const domElem = Taro.getSystemInfoSync();
     function getInfo() {
       useTaroRect(myDrag).then(
@@ -234,7 +227,6 @@ export default create({
       (myDrag as any).value.removeEventListener('touchend', touchEnd);
     });
     return {
-      classes,
       myDrag,
       touchStart,
       touchMove,

diff --git a/src/packages/__VUE/drag/index.vue b/src/packages/__VUE/drag/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view
     ref="myDrag"
-    :class="classes"
+    class="nut-drag"
     @touchstart="touchStart($event)"
     @touchmove="touchMove($event)"
     @touchend="touchEnd($event)"
@@ -11,10 +11,10 @@
 </template>
 
 <script lang="ts">
-import { onMounted, onDeactivated, onActivated, reactive, ref, computed } from 'vue';
+import { onMounted, onDeactivated, onActivated, reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import requestAniFrame from '@/packages/utils/raf';
-const { componentName, create } = createComponent('drag');
+const { create } = createComponent('drag');
 export default create({
   props: {
     attract: {
@@ -60,13 +60,6 @@ export default create({
       } as Record<string, any>
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     function getInfo() {
       const domElem = document.documentElement;
       state.elWidth = myDrag.value.offsetWidth;
@@ -190,7 +183,6 @@ export default create({
       myDrag.value.removeEventListener('touchend', touchEnd);
     });
     return {
-      classes,
       myDrag,
       touchStart,
       touchMove,

diff --git a/src/packages/__VUE/ellipsis/index.taro.vue b/src/packages/__VUE/ellipsis/index.taro.vue
@@ -1,6 +1,6 @@
 <template>
   <view>
-    <view :id="'root' + refRandomId" ref="root" :class="classes" @click="handleClick">
+    <view :id="'root' + refRandomId" ref="root" class="nut-ellipsis ell" @click="handleClick">
       <view v-if="!exceeded" class="nut-ellipsis__wordbreak">{{ content }}</view>
 
       <view v-if="exceeded && !expanded" class="nut-ellipsis__wordbreak">
@@ -32,7 +32,7 @@ import { ref, reactive, toRefs, computed, onMounted, PropType, unref } from 'vue
 import { createComponent } from '@/packages/utils/create';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 import Taro from '@tarojs/taro';
-const { componentName, create } = createComponent('ellipsis');
+const { create } = createComponent('ellipsis');
 export type Direction = 'start' | 'end' | 'middle';
 
 type EllipsisedValue = {
@@ -96,14 +96,6 @@ export default create({
     const letterUpperReg = /^[A-Z]+$/; //字母
     const letterLowerReg = /^[a-z]+$/; //字母
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        ell: true,
-        [prefixCls]: true
-      };
-    });
-
     const symbolText = computed(() => {
       if (props.direction == 'end' || props.direction == 'middle') {
         return `${props.symbol}${props.expandText}`;
@@ -299,7 +291,6 @@ export default create({
       rootContain,
       symbolContain,
       ellipsis,
-      classes,
       contantCopy,
       symbolText,
       clickHandle,

diff --git a/src/packages/__VUE/ellipsis/index.vue b/src/packages/__VUE/ellipsis/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view ref="root" :class="classes" @click="handleClick">
+  <view ref="root" class="nut-ellipsis" @click="handleClick">
     <view v-if="!exceeded">{{ content }}</view>
     <view v-if="exceeded && !expanded"
       >{{ ellipsis && ellipsis.leading
@@ -13,9 +13,9 @@
   </view>
 </template>
 <script lang="ts">
-import { ref, reactive, toRefs, computed, onMounted, PropType, watch } from 'vue';
+import { ref, reactive, toRefs, onMounted, PropType, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('ellipsis');
+const { create } = createComponent('ellipsis');
 export type Direction = 'start' | 'end' | 'middle';
 
 type EllipsisedValue = {
@@ -66,13 +66,6 @@ export default create({
       expanded: false //是否折叠
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     watch(
       () => props.content,
       (newV, oldVal) => {
@@ -225,7 +218,7 @@ export default create({
       emit('click');
     };
 
-    return { ...toRefs(state), root, ellipsis, classes, clickHandle, handleClick };
+    return { ...toRefs(state), root, ellipsis, clickHandle, handleClick };
   }
 });
 </script>