refactor(category)!: 修改 div 为 view 标签 (#476)

hzlzsm · web-flow · commit f3c050b730c4 · 2025-07-07T11:47:49.000+08:00
diff --git a/packages/nutui/components/category/category.ts b/packages/nutui/components/category/category.ts
@@ -2,18 +2,12 @@ import type { ExtractPropTypes } from 'vue'
 import { CHANGE_EVENT } from '../_constants'
 import { commonProps, isNumber, makeArrayProp, makeStringProp } from '../_utils'
 
-export interface CategoryType {
-  catName?: string
-  [key: string]: any
-}
-
 export const categoryProps = {
   ...commonProps,
   /**
    * @description 分类模式：`classify`，`text`，`custom`
    */
   type: makeStringProp<'classify' | 'text' | 'custom'>('classify'),
-
   /**
    * @description 左侧导航栏数据列表
    */
diff --git a/packages/nutui/components/category/category.vue b/packages/nutui/components/category/category.vue
@@ -1,17 +1,22 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, defineComponent, ref } from 'vue'
 import { CHANGE_EVENT, PREFIX } from '../_constants'
 import { getMainClass } from '../_utils'
 import { categoryEmits, categoryProps } from './category'
 
 const props = defineProps(categoryProps)
+
 const emit = defineEmits(categoryEmits)
+
 const checkIndex = ref(0)
+
 const classes = computed(() => {
   return getMainClass(props, componentName)
 })
+
 function getChildList(index: any) {
   checkIndex.value = index
+
   emit(CHANGE_EVENT, index)
 }
 </script>
@@ -30,24 +35,24 @@ export default defineComponent({
 </script>
 
 <template>
-  <div :class="classes" :style="customStyle">
-    <div class="nut-category__cateList">
-      <div v-if="type === 'classify' || type === 'text'">
-        <div v-for="(item, index) in category" :key="index" class="nut-category__cateListLeft">
-          <div
+  <view :class="classes" :style="props.customStyle">
+    <view class="nut-category__cateList">
+      <view v-if="props.type === 'classify' || props.type === 'text'" class="nut-category__cateListBox">
+        <view v-for="(item, index) in props.category" :key="index" class="nut-category__cateListLeft">
+          <view
             :class="[checkIndex === index ? 'nut-category__cateListItemChecked' : 'nut-category__cateListItem']"
             @click="getChildList(index)"
           >
             {{ item.catName }}
-          </div>
-        </div>
-      </div>
+          </view>
+        </view>
+      </view>
 
       <slot />
-    </div>
-  </div>
+    </view>
+  </view>
 </template>
 
 <style lang="scss">
-@import './index';
+@import "./index";
 </style>
diff --git a/packages/nutui/components/category/index.scss b/packages/nutui/components/category/index.scss
@@ -29,6 +29,10 @@
     background: $category-bg-color;
   }
 
+  &__cateListBox {
+    flex-shrink: 0;
+  }
+
   &__cateListLeft {
     background: $category-list-left-bg-color;
   }
diff --git a/packages/nutui/components/categorypane/categorypane.ts b/packages/nutui/components/categorypane/categorypane.ts
@@ -1,27 +1,16 @@
 import type { ExtractPropTypes } from 'vue'
 import { commonProps, isString, makeArrayProp, makeStringProp } from '../_utils'
 
-export interface ChildType {
-  catName?: string
-  catType?: number
-  [key: string]: any
-}
-export interface CustomType {
-  catName?: string
-  [key: string]: any
-}
 export const categorypaneProps = {
   ...commonProps,
   /**
    * @description 分类模式：`classify`，`text`，`custom`
    */
   type: makeStringProp<'classify' | 'text' | 'custom'>('classify'),
-
   /**
    * @description 右侧展示当前分类数据
    */
   categoryChild: makeArrayProp<any>([]),
-
   /**
    * @description 自定义分类数据
    */
diff --git a/packages/nutui/components/categorypane/categorypane.vue b/packages/nutui/components/categorypane/categorypane.vue
@@ -1,14 +1,17 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, defineComponent } from 'vue'
 import { PREFIX } from '../_constants'
 import { getMainClass } from '../_utils'
 import { categorypaneEmits, categorypaneProps } from './categorypane'
 
 const props = defineProps(categorypaneProps)
+
 const emit = defineEmits(categorypaneEmits)
+
 const classes = computed(() => {
   return getMainClass(props, componentName)
 })
+
 function onChange(sku: string) {
   emit('onChange', sku)
 }
@@ -28,69 +31,73 @@ export default defineComponent({
 </script>
 
 <template>
-  <div :class="classes">
-    <div v-if="type === 'classify'" class="nut-category-pane__cateListRight">
+  <view :class="classes">
+    <view v-if="props.type === 'classify'" class="nut-category-pane__cateListRight">
       <slot />
-      <div v-for="(item, index) in categoryChild" :key="index">
-        <div class="nut-category-pane__childTitle">
+
+      <view v-for="(item, index) in props.categoryChild" :key="index" class="nut-category-pane__child">
+        <view class="nut-category-pane__childTitle">
           {{ item?.catName }}
-        </div>
+        </view>
 
-        <div v-if="item?.catType === 1" class="nut-category-pane__childItemList">
-          <div
+        <view v-if="item?.catType === 1" class="nut-category-pane__childItemList">
+          <view
             v-for="(sku, key) in item.childCateList"
             :key="key"
             class="nut-category-pane__childItem"
             @click="onChange(sku)"
           >
             <image class="nut-category-pane__childImg" :src="sku.backImg" />
-            <div class="nut-category-pane__skuImg">
+
+            <view class="nut-category-pane__skuImg">
               {{ sku?.catName }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
 
     <!-- text -->
-    <div v-if="type === 'text'" class="nut-category-pane__cateListRight">
+    <view v-if="props.type === 'text'" class="nut-category-pane__cateListRight">
       <slot />
-      <div v-for="(item, index) in categoryChild" :key="index">
-        <div class="nut-category-pane__childTitle">
+
+      <view v-for="(item, index) in props.categoryChild" :key="index" class="nut-category-pane__child">
+        <view class="nut-category-pane__childTitle">
           {{ item?.catName }}
-        </div>
+        </view>
 
-        <div v-if="item?.catType === 1" class="nut-category-pane__childItemList">
-          <div
+        <view v-if="item?.catType === 1" class="nut-category-pane__childItemList">
+          <view
             v-for="(sku, key) in item.childCateList"
             :key="key"
             class="nut-category-pane__childItem"
             @click="onChange(sku)"
           >
-            <div class="nut-category-pane__skuName">
+            <view class="nut-category-pane__skuName">
               {{ sku?.catName }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
 
     <!-- 自定义 -->
 
-    <div v-if="type === 'custom'" class="nut-category-pane__selfItemList">
+    <view v-if="props.type === 'custom'" class="nut-category-pane__selfItemList">
       <slot />
-      <div
-        v-for="(sku, key) in customCategory"
+
+      <view
+        v-for="(sku, key) in props.customCategory"
         :key="key"
         class="nut-category-pane__skuName"
         @click="onChange(sku)"
       >
         {{ sku?.catName }}
-      </div>
-    </div>
-  </div>
+      </view>
+    </view>
+  </view>
 </template>
 
 <style lang="scss">
-@import './index';
+@import "./index";
 </style>

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,10 @@`
`29`	`29`	`background: $category-bg-color;`
`30`	`30`	`}`
`31`	`31`
	`32`	`+ &__cateListBox {`
	`33`	`+ flex-shrink: 0;`
	`34`	`+ }`
	`35`	`+`
`32`	`36`	`&__cateListLeft {`
`33`	`37`	`background: $category-list-left-bg-color;`
`34`	`38`	`}`