uni-classification

介绍

1. 本组件为分类组件

2. 本组件数据为一次性传入，不支持分页

3. 本组件数据结构如下：

   [
      {
         "name": "女装",
         "foods": [
             {
               "name": "A字裙",
               "key": "1",
               "icon": "https://cdn.uviewui.com/uview/common/classify/1/1.jpg"
             },
             {
               "name": "T恤",
               "key": "2",
               "icon": "https://cdn.uviewui.com/uview/common/classify/1/2.jpg"
             }
         ]
      },
      {
         "name": "美食",
         "foods": [
             {
               "name": "火锅",
               "key": "15",
               "icon": "https://cdn.uviewui.com/uview/common/classify/2/1.jpg"
             },
             {
               "name": "糕点饼干",
               "key": "16",
               "icon": "https://cdn.uviewui.com/uview/common/classify/2/2.jpg"
             }
         ]
      }
   ]

平台差异说明

使用方式

安装

npm i uni-classification

引入

import Classify from 'uni-classification'

components: { Classify },

基本使用

<Classify
  :classifyData="classifyData"
  mode="multiple" // 多选
  max="10"
  childrenKeyName="foods"
  childValueKeyName="key"
/>

单选

<Classify
  :classifyData="classifyData"
  childrenKeyName="foods"
  childValueKeyName="key"
  @change="onChange"
/>

onChange(value, row) {
  console.log(value, row);
  uni.showToast({
    title: value,
    icon: 'none'
  })
}

自定义右侧子分类插槽

<Classify
  :classifyData="classifyData"
  class="classify"
  mode="multiple"
  max="10"
  childrenKeyName="foods"
  childValueKeyName="key"
>
  <template v-slot:classify-kids="{ row }">
    <view class="row-kids" :class="{ active: row.checked }">{{ row.name }}</view>
  </template>
</Classify>

样式

可通过::v-deep修改css

API

Props

Slot

Events