init

uni_modules/nutui-uni/components/category/category.ts

@@ -0,0 +1,29 @@
+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 左侧导航栏数据列表
+   */
+  category: makeArrayProp<any>([]),
+}
+
+export type CategoryProps = ExtractPropTypes<typeof categoryProps>
+
+export const categoryEmits = {
+  [CHANGE_EVENT]: (index: number) => isNumber(index),
+}
+
+export type CategoryEmits = typeof categoryEmits

uni_modules/nutui-uni/components/category/category.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+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>
+
+<script lang="ts">
+const componentName = `${PREFIX}-category`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</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
+            :class="[checkIndex === index ? 'nut-category__cateListItemChecked' : 'nut-category__cateListItem']"
+            @click="getChildList(index)"
+          >
+            {{ item.catName }}
+          </div>
+        </div>
+      </div>
+
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

uni_modules/nutui-uni/components/category/index.scss

@@ -0,0 +1,64 @@
+.nut-theme-dark {
+  .nut-category {
+    &__cateList {
+      background: $dark-background2;
+    }
+
+    &__cateListLeft {
+      background: $dark-background4;
+    }
+
+    &__cateListItem {
+      color: $dark-color-gray;
+    }
+
+    &__cateListItemChecked {
+      color: $dark-color;
+      background: $dark-background2;
+
+      &::before {
+        background: $category-list-item-checked-img-bg-color;
+      }
+    }
+  }
+}
+
+.nut-category {
+  &__cateList {
+    display: flex;
+    background: $category-bg-color;
+  }
+
+  &__cateListLeft {
+    background: $category-list-left-bg-color;
+  }
+
+  &__cateListItemChecked,
+  &__cateListItem {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100px;
+    height: 50px;
+    font-size: 13px;
+    font-weight: normal;
+    color: $category-list-item-color;
+    transition: all 0.3s;
+  }
+
+  &__cateListItemChecked {
+    position: relative;
+    font-weight: 500;
+    background: $category-list-item-checked-color;
+    transition: all 0.3s;
+
+    &::before {
+      position: absolute;
+      left: 0;
+      width: 5px;
+      height: 18px;
+      content: "";
+      background: $category-list-item-checked-img-bg-color;
+    }
+  }
+}

uni_modules/nutui-uni/components/category/index.ts

@@ -0,0 +1 @@
+export * from './category'