diff --git a/src/packages/__VUE/actionsheet/index.taro.vue b/src/packages/__VUE/actionsheet/index.taro.vue
index f9b6edada4..96046481ac 100644
--- 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
index 598d90f02f..6e9dcee59e 100644
--- 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
index 993167acd4..d6baadf795 100644
--- 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
index 2f71ee2f8b..c2e7576999 100644
--- 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
index 2f71ee2f8b..c2e7576999 100644
--- 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
index 04f13389f0..bf5650d4cf 100644
--- 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
index c30733b1b5..94a66763fb 100644
--- 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
index 05e174ad0f..fb469dabc0 100644
--- 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
index 7991ab88fd..d389766764 100644
--- 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>
diff --git a/src/packages/__VUE/list/index.taro.vue b/src/packages/__VUE/list/index.taro.vue
index c6dfd7f835..b98508d9f8 100644
--- a/src/packages/__VUE/list/index.taro.vue
+++ b/src/packages/__VUE/list/index.taro.vue
@@ -2,7 +2,7 @@
   <nut-scroll-view
     :id="'list' + refRandomId"
     ref="list"
-    :class="classes"
+    class="nut-list"
     :scroll-y="true"
     :style="{ height: `${getContainerHeight}px` }"
     scroll-top="0"
@@ -38,7 +38,7 @@ import Taro from '@tarojs/taro';
 import ScrollView from '../scroll-view/index.taro.vue';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { CachedPosition, CompareResult, binarySearch } from './type';
-const { componentName, create } = createComponent('list');
+const { create } = createComponent('list');
 const clientHeight = Taro.getSystemInfoSync().windowHeight || 667;
 
 export default create({
@@ -101,13 +101,6 @@ export default create({
       return Math.min(state.originStartIndex + visibleCount.value + props.bufferSize, state.list.length);
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const visibleData: ComputedRef = computed(() => {
       return state.list.slice(state.start, end.value);
     });
@@ -270,7 +263,6 @@ export default create({
       actualContent,
       getTransform,
       visibleData,
-      classes,
       refRandomId,
       getContainerHeight,
       handleScrollEvent
diff --git a/src/packages/__VUE/list/index.vue b/src/packages/__VUE/list/index.vue
index 854a708f9d..a8875b9361 100644
--- a/src/packages/__VUE/list/index.vue
+++ b/src/packages/__VUE/list/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="list" :class="classes" :style="{ height: `${getContainerHeight}px` }" @scroll.passive="handleScrollEvent">
+  <div ref="list" class="nut-list" :style="{ height: `${getContainerHeight}px` }" @scroll.passive="handleScrollEvent">
     <div ref="phantom" class="nut-list-phantom" :style="{ height: phantomHeight + 'px' }"></div>
     <div ref="actualContent" class="nut-list-container" :style="{ transform: getTransform() }">
       <div v-for="(item, index) in visibleData" :key="item" class="nut-list-item">
@@ -13,7 +13,7 @@ import { reactive, toRefs, computed, ref, Ref, watch, ComputedRef } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { CachedPosition, CompareResult, binarySearch } from './type';
 import { useRect } from '@/packages/utils/useRect';
-const { componentName, create } = createComponent('list');
+const { create } = createComponent('list');
 const clientHeight = document.documentElement.clientHeight || document.body.clientHeight || 667;
 
 export default create({
@@ -68,13 +68,6 @@ export default create({
       return Math.min(state.originStartIndex + visibleCount.value + props.bufferSize, state.list.length);
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const visibleData: ComputedRef = computed(() => {
       return state.list.slice(state.start, end.value);
     });
@@ -223,7 +216,6 @@ export default create({
       actualContent,
       getTransform,
       visibleData,
-      classes,
       getContainerHeight,
       handleScrollEvent
     };
diff --git a/src/packages/__VUE/noticebar/index.taro.vue b/src/packages/__VUE/noticebar/index.taro.vue
index cff7da52bb..6ef0105b56 100644
--- a/src/packages/__VUE/noticebar/index.taro.vue
+++ b/src/packages/__VUE/noticebar/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-noticebar">
     <view
       v-show="showNoticebar"
       v-if="direction == 'across'"
@@ -82,7 +82,7 @@ import { toRefs, onMounted, onUnmounted, reactive, computed, onActivated, onDeac
 import { Notice, CircleClose } from '@nutui/icons-vue-taro';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
-const { componentName, create } = createComponent('noticebar');
+const { create } = createComponent('noticebar');
 import Taro from '@tarojs/taro';
 
 interface stateProps {
@@ -185,7 +185,6 @@ export default create({
       offsetWidth: 0,
       showNoticebar: true,
       animationClass: '',
-
       animate: false,
       scrollList: [],
       distance: 0,
@@ -196,13 +195,6 @@ export default create({
       id: Math.round(Math.random() * 100000)
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const isEllipsis = computed(() => {
       if (state.isCanScroll == null) {
         return false && !props.wrapable;
@@ -445,10 +437,8 @@ export default create({
     });
 
     return {
-      ...toRefs(props),
       ...toRefs(state),
       isEllipsis,
-      classes,
       barStyle,
       contentStyle,
       horseLampStyle,
diff --git a/src/packages/__VUE/noticebar/index.vue b/src/packages/__VUE/noticebar/index.vue
index 9d14e6f637..7fd338efd2 100644
--- a/src/packages/__VUE/noticebar/index.vue
+++ b/src/packages/__VUE/noticebar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-noticebar">
     <view
       v-show="showNoticebar"
       v-if="direction == 'across'"
@@ -92,7 +92,7 @@ import {
 } from 'vue';
 import { Notice, CircleClose } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('noticebar');
+const { create } = createComponent('noticebar');
 import { pxCheck } from '@/packages/utils/pxCheck';
 
 interface StateProps {
@@ -201,13 +201,6 @@ export default create({
       showNotica: true
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const isEllipsis = computed(() => {
       if (state.isCanScroll == null) {
         return props.wrapable;
@@ -433,10 +426,8 @@ export default create({
     });
 
     return {
-      ...toRefs(props),
       ...toRefs(state),
       isEllipsis,
-      classes,
       barStyle,
       contentStyle,
       horseLampStyle,
diff --git a/src/packages/__VUE/rate/index.taro.vue b/src/packages/__VUE/rate/index.taro.vue
index 7feedd94b6..470f3bab18 100644
--- a/src/packages/__VUE/rate/index.taro.vue
+++ b/src/packages/__VUE/rate/index.taro.vue
@@ -1,10 +1,10 @@
 <template src="./template.html"></template>
 <script lang="ts">
+import { ref } from 'vue';
 import { StarFillN } from '@nutui/icons-vue-taro';
-import { computed, ref } from 'vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
-const { create, componentName } = createComponent('rate');
+const { create } = createComponent('rate');
 export default create({
   props: {
     count: {
@@ -52,14 +52,8 @@ export default create({
   },
   components: { StarFillN },
   emits: ['update:modelValue', 'change'],
-  setup(props: any, { emit, slots }: any) {
+  setup(props, { emit, slots }) {
     const rateRefs = ref<HTMLElement[]>([]);
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
     const updateVal = (value: number) => {
       emit('update:modelValue', value);
       emit('change', value);
@@ -79,7 +73,6 @@ export default create({
     };
     const refRandomId = Math.random().toString(36).slice(-8);
     return {
-      classes,
       onClick,
       pxCheck,
       rateRefs,
diff --git a/src/packages/__VUE/rate/index.vue b/src/packages/__VUE/rate/index.vue
index 388fde40bf..f57a1b5646 100644
--- a/src/packages/__VUE/rate/index.vue
+++ b/src/packages/__VUE/rate/index.vue
@@ -1,11 +1,11 @@
 <template src="./template.html"></template>
 <script lang="ts">
-import { computed, Ref, ref } from 'vue';
+import { Ref, ref } from 'vue';
 import { StarFillN } 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');
+const { create } = createComponent('rate');
 export default create({
   props: {
     count: {
@@ -57,14 +57,8 @@ export default create({
   },
   components: { StarFillN },
   emits: ['update:modelValue', 'change'],
-  setup(props: any, { emit, slots }: any) {
+  setup(props, { emit, slots }) {
     const rateRefs = ref<HTMLElement[]>([]);
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
     const updateVal = (value: number) => {
       emit('update:modelValue', value);
       emit('change', value);
@@ -116,7 +110,6 @@ export default create({
     };
     const refRandomId = Math.random().toString(36).slice(-8);
     return {
-      classes,
       ...touchMethods,
       onClick,
       pxCheck,
diff --git a/src/packages/__VUE/rate/template.html b/src/packages/__VUE/rate/template.html
index 8ec76857c5..0dcc954759 100644
--- a/src/packages/__VUE/rate/template.html
+++ b/src/packages/__VUE/rate/template.html
@@ -1,4 +1,4 @@
-<view :class="classes" @touchstart="onTouchStart" @touchmove="onTouchMove">
+<view class="nut-rate" @touchstart="onTouchStart" @touchmove="onTouchMove">
   <view class="nut-rate-item" v-for="n in Number(count)" :key="n" ref="rateRefs" :id="'rateRefs-' + refRandomId + n"
     :style="n < Number(count) ? { marginRight: pxCheck(spacing) } : {}">
     <view class="nut-rate-item__icon--full">
diff --git a/src/packages/__VUE/sidenavbar/index.taro.vue b/src/packages/__VUE/sidenavbar/index.taro.vue
index 8bec0536f7..8ac0498cda 100644
--- a/src/packages/__VUE/sidenavbar/index.taro.vue
+++ b/src/packages/__VUE/sidenavbar/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-side-navbar">
     <view class="nut-side-navbar__content">
       <view ref="list" class="nut-side-navbar__content__list">
         <slot></slot>
@@ -8,9 +8,9 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, onMounted, reactive, ref, toRefs, Ref } from 'vue';
+import { onMounted, reactive, ref, toRefs, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('side-navbar');
+const { create } = createComponent('side-navbar');
 export default create({
   props: {
     offset: {
@@ -24,13 +24,6 @@ export default create({
       count: 1
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const setPaddingLeft = (nodeList: any[], level = 1) => {
       for (let i = 0; i < nodeList.length; i++) {
         let item = nodeList[i];
@@ -62,8 +55,7 @@ export default create({
 
     return {
       ...toRefs(state),
-      list,
-      classes
+      list
     };
   }
 });
diff --git a/src/packages/__VUE/sidenavbar/index.vue b/src/packages/__VUE/sidenavbar/index.vue
index c023c81f70..0a3e29b1dd 100644
--- a/src/packages/__VUE/sidenavbar/index.vue
+++ b/src/packages/__VUE/sidenavbar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-side-navbar">
     <view class="nut-side-navbar__content">
       <view ref="list" class="nut-side-navbar__content__list">
         <slot></slot>
@@ -8,9 +8,9 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, onMounted, reactive, ref, toRefs, Ref } from 'vue';
+import { onMounted, reactive, ref, toRefs, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('side-navbar');
+const { create } = createComponent('side-navbar');
 export default create({
   props: {
     offset: {
@@ -25,13 +25,6 @@ export default create({
       observer: null as MutationObserver | null
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const setPaddingLeft = (nodeList: any[], level = 1) => {
       for (let i = 0; i < nodeList.length; i++) {
         let item = nodeList[i];
@@ -74,8 +67,7 @@ export default create({
 
     return {
       ...toRefs(state),
-      list,
-      classes
+      list
     };
   }
 });
diff --git a/src/packages/__VUE/sidenavbaritem/index.taro.vue b/src/packages/__VUE/sidenavbaritem/index.taro.vue
index c2072ad88e..58331789ac 100644
--- a/src/packages/__VUE/sidenavbaritem/index.taro.vue
+++ b/src/packages/__VUE/sidenavbaritem/index.taro.vue
@@ -1,14 +1,13 @@
 <template>
-  <view :class="classes" :ikey="ikey" @click.stop="handleClick">
+  <view class="nut-side-navbar-item" :ikey="ikey" @click.stop="handleClick">
     <span class="nut-side-navbar-item__title">
       {{ title }}
     </span>
   </view>
 </template>
 <script lang="ts">
-import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('side-navbar-item');
+const { create } = createComponent('side-navbar-item');
 export default create({
   props: {
     title: {
@@ -21,20 +20,12 @@ export default create({
     }
   },
   emits: ['click'],
-  setup: (props: any, context: any) => {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
+  setup: (props, { emit }) => {
     const handleClick = () => {
-      context.emit('click');
+      emit('click');
     };
 
     return {
-      classes,
       handleClick
     };
   }
diff --git a/src/packages/__VUE/sidenavbaritem/index.vue b/src/packages/__VUE/sidenavbaritem/index.vue
index c2072ad88e..58331789ac 100644
--- a/src/packages/__VUE/sidenavbaritem/index.vue
+++ b/src/packages/__VUE/sidenavbaritem/index.vue
@@ -1,14 +1,13 @@
 <template>
-  <view :class="classes" :ikey="ikey" @click.stop="handleClick">
+  <view class="nut-side-navbar-item" :ikey="ikey" @click.stop="handleClick">
     <span class="nut-side-navbar-item__title">
       {{ title }}
     </span>
   </view>
 </template>
 <script lang="ts">
-import { computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('side-navbar-item');
+const { create } = createComponent('side-navbar-item');
 export default create({
   props: {
     title: {
@@ -21,20 +20,12 @@ export default create({
     }
   },
   emits: ['click'],
-  setup: (props: any, context: any) => {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
+  setup: (props, { emit }) => {
     const handleClick = () => {
-      context.emit('click');
+      emit('click');
     };
 
     return {
-      classes,
       handleClick
     };
   }
diff --git a/src/packages/__VUE/subsidenavbar/index.taro.vue b/src/packages/__VUE/subsidenavbar/index.taro.vue
index 3a0ce2333b..77efba229f 100644
--- a/src/packages/__VUE/subsidenavbar/index.taro.vue
+++ b/src/packages/__VUE/subsidenavbar/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" :ikey="ikey">
+  <view class="nut-sub-side-navbar" :ikey="ikey">
     <view class="nut-sub-side-navbar__title" @click.stop="handleClick">
       <span class="nut-sub-side-navbar__title__text">{{ title }}</span>
       <span class="nut-sub-side-navbar__title__icon">
@@ -21,7 +21,7 @@
 import { computed, onMounted, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { ArrowDown2, ArrowUp2 } from '@nutui/icons-vue-taro';
-const { componentName, create } = createComponent('sub-side-navbar');
+const { create } = createComponent('sub-side-navbar');
 export default create({
   props: {
     title: {
@@ -39,23 +39,17 @@ export default create({
   },
   components: { ArrowDown2, ArrowUp2 },
   emits: ['titleClick'],
-  setup: (props: any, context: any) => {
+  setup: (props, { emit }) => {
     const state = reactive({
       direction: ''
     });
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
     const style = computed(() => {
       return {
         height: !state.direction ? 'auto' : '0px'
       };
     });
     const handleClick = () => {
-      context.emit('titleClick');
+      emit('titleClick');
       state.direction = !state.direction ? 'up' : '';
     };
     onMounted(() => {
@@ -63,7 +57,6 @@ export default create({
     });
     return {
       ...toRefs(state),
-      classes,
       style,
       handleClick
     };
diff --git a/src/packages/__VUE/subsidenavbar/index.vue b/src/packages/__VUE/subsidenavbar/index.vue
index 81e6be13f8..ead4c19423 100644
--- a/src/packages/__VUE/subsidenavbar/index.vue
+++ b/src/packages/__VUE/subsidenavbar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" :ikey="ikey">
+  <view class="nut-sub-side-navbar" :ikey="ikey">
     <view class="nut-sub-side-navbar__title" @click.stop="handleClick">
       <span class="nut-sub-side-navbar__title__text">{{ title }}</span>
       <span class="nut-sub-side-navbar__title__icon">
@@ -21,7 +21,7 @@
 import { computed, onMounted, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { ArrowDown2, ArrowUp2 } from '@nutui/icons-vue';
-const { componentName, create } = createComponent('sub-side-navbar');
+const { create } = createComponent('sub-side-navbar');
 export default create({
   props: {
     title: {
@@ -39,23 +39,17 @@ export default create({
   },
   components: { ArrowDown2, ArrowUp2 },
   emits: ['titleClick'],
-  setup: (props: any, context: any) => {
+  setup: (props, { emit }) => {
     const state = reactive({
       direction: ''
     });
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
     const style = computed(() => {
       return {
         height: !state.direction ? 'auto' : '0px'
       };
     });
     const handleClick = () => {
-      context.emit('titleClick');
+      emit('titleClick');
       state.direction = !state.direction ? 'up' : '';
     };
     onMounted(() => {
@@ -63,7 +57,6 @@ export default create({
     });
     return {
       ...toRefs(state),
-      classes,
       style,
       handleClick
     };
diff --git a/src/packages/__VUE/swiper/index.taro.vue b/src/packages/__VUE/swiper/index.taro.vue
index 4f456a29ea..8936cdda3a 100644
--- a/src/packages/__VUE/swiper/index.taro.vue
+++ b/src/packages/__VUE/swiper/index.taro.vue
@@ -2,7 +2,7 @@
   <view
     :id="'container-' + refRandomId"
     ref="container"
-    :class="classes"
+    class="nut-swiper"
     :catch-move="isPreventDefault"
     @touchstart="onTouchStart"
     @touchmove="onTouchMove"
@@ -120,13 +120,6 @@ export default create({
 
     const touch = useTouch();
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const isVertical = computed(() => props.direction === 'vertical');
 
     const classesInner = computed(() => {
@@ -469,7 +462,6 @@ export default create({
     return {
       state,
       refRandomId,
-      classes,
       classesPagination,
       classesInner,
       container,
diff --git a/src/packages/__VUE/swiper/index.vue b/src/packages/__VUE/swiper/index.vue
index 2283d11f1f..16318efee5 100644
--- a/src/packages/__VUE/swiper/index.vue
+++ b/src/packages/__VUE/swiper/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view
     ref="container"
-    :class="classes"
+    class="nut-swiper"
     @touchstart="onTouchStart"
     @touchmove="onTouchMove"
     @touchend="onTouchEnd"
@@ -116,13 +116,6 @@ export default create({
 
     const touch = useTouch();
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const isVertical = computed(() => props.direction === 'vertical');
 
     const classesInner = computed(() => {
@@ -220,8 +213,6 @@ export default create({
         targetOffset = clamp(targetOffset, minOffset.value, 0);
       }
 
-      // console.log(offset, currentPosition, targetOffset);
-
       return targetOffset;
     };
 
@@ -451,7 +442,6 @@ export default create({
 
     return {
       state,
-      classes,
       classesInner,
       classesPagination,
       container,
diff --git a/src/packages/__VUE/swiperitem/index.taro.vue b/src/packages/__VUE/swiperitem/index.taro.vue
index aa2f182c58..d40f9d47a8 100644
--- a/src/packages/__VUE/swiperitem/index.taro.vue
+++ b/src/packages/__VUE/swiperitem/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" :style="style">
+  <view class="nut-swiper-item" :style="style">
     <slot></slot>
   </view>
 </template>
@@ -9,7 +9,7 @@ import { computed, reactive, inject, getCurrentInstance, onUnmounted, ComputedRe
 import { createComponent } from '@/packages/utils/create';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import { IStyle } from './type';
-const { create, componentName } = createComponent('swiper-item');
+const { create } = createComponent('swiper-item');
 
 export default create({
   setup() {
@@ -19,13 +19,6 @@ export default create({
       offset: 0
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const style: ComputedRef = computed(() => {
       const style: IStyle = {};
       const direction = parent?.props.direction;
@@ -51,8 +44,7 @@ export default create({
     useExpose({ setOffset });
 
     return {
-      style,
-      classes
+      style
     };
   }
 });
diff --git a/src/packages/__VUE/swiperitem/index.vue b/src/packages/__VUE/swiperitem/index.vue
index aa2f182c58..d40f9d47a8 100644
--- a/src/packages/__VUE/swiperitem/index.vue
+++ b/src/packages/__VUE/swiperitem/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes" :style="style">
+  <view class="nut-swiper-item" :style="style">
     <slot></slot>
   </view>
 </template>
@@ -9,7 +9,7 @@ import { computed, reactive, inject, getCurrentInstance, onUnmounted, ComputedRe
 import { createComponent } from '@/packages/utils/create';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import { IStyle } from './type';
-const { create, componentName } = createComponent('swiper-item');
+const { create } = createComponent('swiper-item');
 
 export default create({
   setup() {
@@ -19,13 +19,6 @@ export default create({
       offset: 0
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const style: ComputedRef = computed(() => {
       const style: IStyle = {};
       const direction = parent?.props.direction;
@@ -51,8 +44,7 @@ export default create({
     useExpose({ setOffset });
 
     return {
-      style,
-      classes
+      style
     };
   }
 });
diff --git a/src/packages/__VUE/table/index.taro.vue b/src/packages/__VUE/table/index.taro.vue
index e294194d5e..1a172c7306 100644
--- a/src/packages/__VUE/table/index.taro.vue
+++ b/src/packages/__VUE/table/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-table">
     <view class="nut-table__main" :class="{ 'nut-table__main--striped': striped }">
       <view class="nut-table__main__head">
         <view class="nut-table__main__head__tr">
@@ -50,9 +50,9 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, PropType, reactive, toRefs, watch } from 'vue';
+import { PropType, reactive, toRefs, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('table');
+const { create, translate } = createComponent('table');
 import RenderColumn from './renderColumn';
 import { DownArrow } from '@nutui/icons-vue-taro';
 import { TableColumnProps } from './types';
@@ -68,15 +68,11 @@ export default create({
     },
     columns: {
       type: Array as PropType<TableColumnProps[]>,
-      default: () => {
-        return [];
-      }
+      default: () => []
     },
     data: {
-      type: Object,
-      default: () => {
-        return {};
-      }
+      type: Object as PropType<any>,
+      default: () => ({})
     },
     summary: {
       type: Function,
@@ -88,16 +84,10 @@ export default create({
     }
   },
   emits: ['sorter'],
-  setup(props: any, { emit }: any) {
+  setup(props: any, { emit }) {
     const state = reactive({
       curData: props.data
     });
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
 
     const cellClasses = (item: TableColumnProps) => {
       return {
@@ -147,7 +137,6 @@ export default create({
 
     return {
       ...toRefs(state),
-      classes,
       cellClasses,
       getColumnItem,
       getColumnItemStyle,
diff --git a/src/packages/__VUE/table/index.vue b/src/packages/__VUE/table/index.vue
index 1360cd3028..91a3dd43c1 100644
--- a/src/packages/__VUE/table/index.vue
+++ b/src/packages/__VUE/table/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-table">
     <view class="nut-table__main" :class="{ 'nut-table__main--striped': striped }">
       <view class="nut-table__main__head">
         <view class="nut-table__main__head__tr">
@@ -49,11 +49,10 @@
     </view>
   </view>
 </template>
-
 <script lang="ts">
-import { computed, PropType, reactive, toRefs, watch } from 'vue';
+import { PropType, reactive, toRefs, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('table');
+const { create, translate } = createComponent('table');
 import RenderColumn from './renderColumn';
 import { DownArrow } from '@nutui/icons-vue';
 import { TableColumnProps } from './types';
@@ -69,15 +68,11 @@ export default create({
     },
     columns: {
       type: Array as PropType<TableColumnProps[]>,
-      default: () => {
-        return [];
-      }
+      default: () => []
     },
     data: {
-      type: Object,
-      default: () => {
-        return {};
-      }
+      type: Object as PropType<any>,
+      default: () => ({})
     },
     summary: {
       type: Function,
@@ -89,16 +84,10 @@ export default create({
     }
   },
   emits: ['sorter'],
-  setup(props: any, { emit }: any) {
+  setup(props: any, { emit }) {
     const state = reactive({
       curData: props.data
     });
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
 
     const cellClasses = (item: TableColumnProps) => {
       return {
@@ -148,7 +137,6 @@ export default create({
 
     return {
       ...toRefs(state),
-      classes,
       cellClasses,
       getColumnItem,
       getColumnItemStyle,
diff --git a/src/packages/__VUE/timedetail/index.taro.vue b/src/packages/__VUE/timedetail/index.taro.vue
index 2e7ca23a9a..e32c49dda7 100644
--- a/src/packages/__VUE/timedetail/index.taro.vue
+++ b/src/packages/__VUE/timedetail/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-time-detail">
     <view class="nut-time-detail__detail nut-time-detail__detail--moring">
       <view class="nut-time-detail__detail__list">
         <view v-for="item in renderData" :key="item" :class="getClass(item)" @click="handleTime(item)">{{ item }}</view>
@@ -9,21 +9,19 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, inject, computed } from 'vue';
+import { reactive, toRefs, inject, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('time-detail');
+const { create } = createComponent('time-detail');
 export default create({
   name: 'timedetail',
   props: {
     times: {
-      type: Array,
-      default: () => {
-        return [];
-      }
+      type: Array as PropType<any[]>,
+      default: () => []
     }
   },
   emits: ['select'],
-  setup: (props: any, context: any) => {
+  setup: (props, { emit }) => {
     const currentKey = inject('currentKey');
     const currentTime = inject('currentTime');
 
@@ -32,13 +30,6 @@ export default create({
       currentTime: currentTime as any[]
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const getClass = (item: string) => {
       let find = state.currentTime.find((item: any) => item.key == state.currentKey);
       if (find) {
@@ -54,11 +45,10 @@ export default create({
     });
 
     const handleTime = (time: string) => {
-      context.emit('select', time);
+      emit('select', time);
     };
 
     return {
-      classes,
       ...toRefs(state),
       getClass,
       renderData,
diff --git a/src/packages/__VUE/timedetail/index.vue b/src/packages/__VUE/timedetail/index.vue
index 2e7ca23a9a..e32c49dda7 100644
--- a/src/packages/__VUE/timedetail/index.vue
+++ b/src/packages/__VUE/timedetail/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-time-detail">
     <view class="nut-time-detail__detail nut-time-detail__detail--moring">
       <view class="nut-time-detail__detail__list">
         <view v-for="item in renderData" :key="item" :class="getClass(item)" @click="handleTime(item)">{{ item }}</view>
@@ -9,21 +9,19 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, inject, computed } from 'vue';
+import { reactive, toRefs, inject, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('time-detail');
+const { create } = createComponent('time-detail');
 export default create({
   name: 'timedetail',
   props: {
     times: {
-      type: Array,
-      default: () => {
-        return [];
-      }
+      type: Array as PropType<any[]>,
+      default: () => []
     }
   },
   emits: ['select'],
-  setup: (props: any, context: any) => {
+  setup: (props, { emit }) => {
     const currentKey = inject('currentKey');
     const currentTime = inject('currentTime');
 
@@ -32,13 +30,6 @@ export default create({
       currentTime: currentTime as any[]
     });
 
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const getClass = (item: string) => {
       let find = state.currentTime.find((item: any) => item.key == state.currentKey);
       if (find) {
@@ -54,11 +45,10 @@ export default create({
     });
 
     const handleTime = (time: string) => {
-      context.emit('select', time);
+      emit('select', time);
     };
 
     return {
-      classes,
       ...toRefs(state),
       getClass,
       renderData,
diff --git a/src/packages/__VUE/timeselect/index.taro.vue b/src/packages/__VUE/timeselect/index.taro.vue
index 6db5c75776..dc1d38bada 100644
--- a/src/packages/__VUE/timeselect/index.taro.vue
+++ b/src/packages/__VUE/timeselect/index.taro.vue
@@ -10,7 +10,7 @@
     @click-overlay="close"
     @click-close-icon="close"
   >
-    <view :class="classes">
+    <view class="nut-time-select">
       <view class="nut-time-select__title">
         <view class="nut-time-select__title__fixed">
           <span v-if="!$slots.title">{{ title || translate('pickupTime') }}</span>
@@ -32,7 +32,7 @@
 import { computed, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Popup from '../popup/index.taro.vue';
-const { componentName, create, translate } = createComponent('time-select');
+const { create, translate } = createComponent('time-select');
 export default create({
   components: {
     [Popup.name]: Popup
@@ -60,24 +60,13 @@ export default create({
         return [];
       }
     },
-    muti: {
-      type: [Boolean],
-      default: false
-    },
     lockScroll: {
       type: [Boolean],
       default: true
     }
   },
   emits: ['update:visible', 'select'],
-  setup: (props: any, context: any) => {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
+  setup: (props, { emit }) => {
     const popStyle = computed(() => {
       return {
         width: '100%',
@@ -89,19 +78,15 @@ export default create({
 
     const currentTime = computed(() => props.currentTime);
 
-    const muti = computed(() => props.muti);
-
     const close = () => {
-      context.emit('update:visible', false);
-      context.emit('select', currentTime.value);
+      emit('update:visible', false);
+      emit('select', currentTime.value);
     };
 
     provide('currentKey', currentKey);
     provide('currentTime', currentTime);
-    provide('muti', muti);
 
     return {
-      classes,
       popStyle,
       close,
       translate
diff --git a/src/packages/__VUE/timeselect/index.vue b/src/packages/__VUE/timeselect/index.vue
index ad4a3cd8e6..e2e6991132 100644
--- a/src/packages/__VUE/timeselect/index.vue
+++ b/src/packages/__VUE/timeselect/index.vue
@@ -10,7 +10,7 @@
     @click-overlay="close"
     @click-close-icon="close"
   >
-    <view :class="classes">
+    <view class="nut-time-select">
       <view class="nut-time-select__title">
         <view class="nut-time-select__title__fixed">
           <span v-if="!$slots.title">{{ title || translate('pickupTime') }}</span>
@@ -32,7 +32,7 @@
 import { computed, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Popup from '../popup/index.vue';
-const { componentName, create, translate } = createComponent('time-select');
+const { create, translate } = createComponent('time-select');
 export default create({
   components: {
     [Popup.name]: Popup
@@ -70,14 +70,7 @@ export default create({
     }
   },
   emits: ['update:visible', 'select'],
-  setup: (props: any, context: any) => {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
+  setup: (props, { emit }) => {
     const popStyle = computed(() => {
       return {
         width: '100%',
@@ -90,17 +83,15 @@ export default create({
     const currentTime = computed(() => props.currentTime);
 
     const close = () => {
-      context.emit('update:visible', false);
-      context.emit('select', currentTime.value);
+      emit('update:visible', false);
+      emit('select', currentTime.value);
     };
 
     provide('currentKey', currentKey);
     provide('currentTime', currentTime);
 
     return {
-      classes,
       popStyle,
-      props,
       close,
       translate
     };
diff --git a/src/packages/__VUE/trendarrow/index.taro.vue b/src/packages/__VUE/trendarrow/index.taro.vue
index 1e8768e7e7..0843a4b242 100644
--- a/src/packages/__VUE/trendarrow/index.taro.vue
+++ b/src/packages/__VUE/trendarrow/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-trend-arrow">
     <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
       calcRate
     }}</span>
@@ -19,7 +19,7 @@ import { reactive, toRefs, computed } from 'vue';
 import { myFixed } from '@/packages/utils/util';
 import { createComponent } from '@/packages/utils/create';
 import { TriangleUp, TriangleDown } from '@nutui/icons-vue-taro';
-const { componentName, create } = createComponent('trend-arrow');
+const { create } = createComponent('trend-arrow');
 
 export default create({
   components: { TriangleUp, TriangleDown },
@@ -65,12 +65,6 @@ export default create({
     const state = reactive({
       rateTrend: props.rate > 0 ? true : false
     });
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
     const calcRate = computed(() => {
       const { rate, digits, showSign, showZero } = props;
       state.rateTrend = rate > 0 ? true : false;
@@ -92,7 +86,7 @@ export default create({
       };
       return style;
     });
-    return { ...toRefs(state), classes, calcRate, calcStyle };
+    return { ...toRefs(state), calcRate, calcStyle };
   }
 });
 </script>
diff --git a/src/packages/__VUE/trendarrow/index.vue b/src/packages/__VUE/trendarrow/index.vue
index b01c604940..b5197df2cc 100644
--- a/src/packages/__VUE/trendarrow/index.vue
+++ b/src/packages/__VUE/trendarrow/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-trend-arrow">
     <span v-if="!arrowLeft" class="nut-trend-arrow-icon-before nut-trend-arrow-rate" :style="calcStyle">{{
       calcRate
     }}</span>
@@ -19,7 +19,7 @@ import { reactive, toRefs, computed } from 'vue';
 import { myFixed } from '@/packages/utils/util';
 import { createComponent } from '@/packages/utils/create';
 import { TriangleUp, TriangleDown } from '@nutui/icons-vue';
-const { componentName, create } = createComponent('trend-arrow');
+const { create } = createComponent('trend-arrow');
 
 export default create({
   components: { TriangleUp, TriangleDown },
@@ -65,12 +65,6 @@ export default create({
     const state = reactive({
       rateTrend: props.rate > 0 ? true : false
     });
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
     const calcRate = computed(() => {
       const { rate, digits, showSign, showZero } = props;
       state.rateTrend = rate > 0 ? true : false;
@@ -92,7 +86,7 @@ export default create({
       };
       return style;
     });
-    return { ...toRefs(state), classes, calcRate, calcStyle };
+    return { ...toRefs(state), calcRate, calcStyle };
   }
 });
 </script>