NpCellGroup

单元格组，通过 options 配置批量渲染 NpCell，支持分组标题。

基础用法

options 支持所有 np-cell 属性

浏览器不支持，请手动复制 group.vue

<script setup lang="ts">
import { ref } from 'vue'
import { NpCellGroup } from '../index'
import type { NpCellGroupOption } from '../index'

const options = ref<NpCellGroupOption[]>([
  { label: '通知提醒' },
  { label: '声音' },
  { label: '震动' },
])

const navOptions: NpCellGroupOption[] = [
  { label: '个人信息', arrow: true, hover: true },
  {
    label: '账号安全',
    arrow: true,
    hover: true,
    description: '账号安全设置',
  },
  { label: '隐私设置', arrow: true, hover: true, value: '已设置' },
]

const handleClick = (item: NpCellGroupOption) => {
  console.log('clicked:', item.label)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <NpCellGroup title="通知设置" :options="options" />
    <NpCellGroup title="账号" :options="navOptions" @click="handleClick" />
  </div>
</template>

Props

参数	说明	类型	默认值
title	分组标题	string	-
options	单元格配置列表	NpCellGroupOption[]	[]

NpCellGroupOption

参数	说明	类型	默认值
type	左侧控件类型	'checkbox' | 'radio' | 'switch'	-
checked	控件选中状态	boolean	false
icon	左侧图标	VNode | () => VNode	-
label	单元格标签	string | () => VNode	-
arrow	是否显示右侧箭头	boolean	false
onClick	点击时的回调函数	() => void	-

Events

事件名	说明	参数
click	点击某个单元格时触发	(item: NpCellGroupOption) => void