AntDesignVue3 导航

Data: 2022-10-07 08:09:13Form: JournalClick: 11

# 导航

# 一、Pagination 分页

参数	描述	类型	默认值
total	数据总数	number	0
current(v-model)	当前页数	number
pageSize(v-model)	每页条数	number
hideOnSinglePage	只有一页时是否隐藏分页器	boolean	false
pageSizeOptions	指定每页可以显示多少条	string[]	['10', '20', '30', '40']
size	当为「small」时，是小尺寸分页	string
disabled	禁用分页	boolean

事件名称	描述	回调参数
change	页码改变的回调，参数是改变后的页码及每页条数	function(page, pageSize)
showSizeChange	pageSize 变化的回调	function(page, pageSize)

<template>
    # 1、a-pagination 分页标签
    <a-pagination />
    # 2、total 数据总数
    <a-pagination total="100" />
    # 3、current 当前页数
    <a-pagination total="100" v-model:current="current" />
    # 4、pageSize 每页条数
    <a-pagination total="100" v-model:pageSize="pageSize" />
    # 5、pageSizeOptions 指定每页可以显示多少条，pageSize设置为50，就不会出现10条一页了
    <a-pagination total="100" v-model:pageSize="pageSize" :pageSizeOptions="pageSizeOptions" />
    # 5、size 小尺寸分页
    <a-pagination total="100" v-model:pageSize="pageSize" :pageSizeOptions="pageSizeOptions" size="small" />
    # 6、disabled 禁用分页
    <a-pagination total="100" v-model:pageSize="pageSize" :pageSizeOptions="pageSizeOptions" disabled />
    
    # 7、change 事件：页码改变的回调，参数是改变后的页码及每页条数
    <a-pagination total="100" v-model:pageSize="pageSize" :pageSizeOptions="pageSizeOptions" @change="onChange" />
    # 8、showSizeChange 事件：pageSize 变化的回调
    <a-pagination total="100" v-model:pageSize="pageSize" :pageSizeOptions="pageSizeOptions" @showSizeChange="onChange" />
</template>
<script>
export default {
    setup() {
        const onChange = (page, pageSize) => {
            console.log("翻页事件");
            console.log(page);
            console.log(pageSize);
        };
        return {
            current: 5,
            pageSize: 10,
            pageSizeOptions: [50, 60, 70, 80],
            onChange
        };
    }
};
</script>

参数	描述	类型	默认值
mode	菜单类型，支持垂直、水平、和内嵌模式三种	vertical 、horizontal 、inline	vertical
theme	主题颜色	light、dark	light

事件名称	描述	回调参数
click	点击 MenuItem 调用此函数	`function({ item, key, keyPath })`
select	被选中时调用	`function({ item, key, selectedKeys })`

item参数	描述	类型	默认值
disabled	是否禁用	boolean	false
key	item 的唯一标志	string	light
title	设置收缩时展示的悬浮标题	string/slot
icon	菜单图标	slot

SubMenu参数	描述	类型	默认值
popupClassName	子菜单样式	string
disabled	是否禁用	boolean	false
key	item 的唯一标志	string	light
title	设置收缩时展示的悬浮标题	string/slot
expandIcon	自定义 Menu 展开收起图标	slot	箭头图标
icon	菜单图标	slot

<template>
    # 1、导航菜单
    <a-menu>
        <a-menu-item>菜单项</a-menu-item>
        <a-menu-item>菜单项</a-menu-item>
        <a-menu-item>菜单项</a-menu-item>
    </a-menu>
    # 2、mode 菜单类型：垂直、水平、内嵌
    <a-menu mode="vertical"></a-menu>
    <a-menu mode="horizontal"></a-menu>
    <a-menu mode="inline"></a-menu>
    # 3、theme 主题颜色：light、dark
    <a-menu theme="light"></a-menu>
    <a-menu theme="dark"></a-menu>

    <a-menu mode="vertical" theme="dark">
        # 4、key 唯一标志，点击效果
        <a-menu-item key="1">菜单项</a-menu-item>
        <a-menu-item key="2">菜单项</a-menu-item>
            # 5、disabled 禁用
            <a-menu-item key="3" disabled>菜单项</a-menu-item>
            # 6、icon 图标
            <a-menu-item key="4">
            <template #icon>
                <SettingOutlined />
            </template>
            菜单项
        </a-menu-item>
  
        # 7、a-sub-menu 子菜单
        # 7.1、title 标题
        # 7.2、key 唯一标识
        <a-sub-menu key="sub1" title="子菜单">
            <a-menu-item>子菜单项</a-menu-item>
            <a-menu-item>子菜单项</a-menu-item>
            <a-menu-item>子菜单项</a-menu-item>
                # 7.3、a-menu-item-group 分组
                <a-menu-item-group key="fenzu1" title="分组">
                <a-menu-item key="10">子菜单项</a-menu-item>
                <a-menu-item key="21">子菜单项</a-menu-item>
            </a-menu-item-group>
        </a-sub-menu>
    </a-menu>
</template>
<script>
import { SettingOutlined} from '@ant-design/icons-vue';
export default{
    components: {
        SettingOutlined
    }
}
</script>

我是 PHP 程序员

AntDesignVue3 导航

# 导航

# 二、Menu 导航菜单