级联菜单 cascader 待优化
多级菜单
使用说明
简单引入
通过option传入菜单配置项，详情配置信息请参照下列代码（PS：value是菜单单元的核心值，必须传入！！！）
你可以通过pick事件获取到菜单改变选择的value和级数
Guide
Component
Resource
展开代码
<template>
<vi-cascader :options="options" @pick="lookPick"/>
</tempalte>
<script>
function lookPick(picks, step) {
console.log(picks, step)
}
const options = [
{
value: 'guide',
label: 'Guide',
children: [
{
value: 'disciplines',
label: 'Disciplines',
children: [
{
value: 'consistency',
label: 'Consistency'
},
{
value: 'feedback',
label: 'Feedback'
},
{
value: 'efficiency',
label: 'Efficiency'
},
{
value: 'controllability',
label: 'Controllability'
}
]
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'side nav',
label: 'Side Navigation'
},
{
value: 'top nav',
label: 'Top Navigation'
}
]
}
]
},
{
value: 'component',
label: 'Component',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout'
},
{
value: 'color',
label: 'Color'
},
{
value: 'typography',
label: 'Typography'
},
{
value: 'icon',
label: 'Icon'
},
{
value: 'button',
label: 'Button'
}
]
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio'
},
{
value: 'checkbox',
label: 'Checkbox'
},
{
value: 'input',
label: 'Input'
},
{
value: 'input-number',
label: 'InputNumber'
},
{
value: 'select',
label: 'Select'
},
{
value: 'cascader',
label: 'Cascader'
},
{
value: 'switch',
label: 'Switch'
},
{
value: 'slider',
label: 'Slider'
},
{
value: 'time-picker',
label: 'TimePicker'
},
{
value: 'date-picker',
label: 'DatePicker'
},
{
value: 'datetime-picker',
label: 'DateTimePicker'
},
{
value: 'upload',
label: 'Upload'
},
{
value: 'rate',
label: 'Rate'
},
{
value: 'form',
label: 'Form'
}
]
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table'
},
{
value: 'tag',
label: 'Tag'
},
{
value: 'progress',
label: 'Progress'
},
{
value: 'tree',
label: 'Tree'
},
{
value: 'pagination',
label: 'Pagination'
},
{
value: 'badge',
label: 'Badge'
}
]
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert'
},
{
value: 'loading',
label: 'Loading'
},
{
value: 'message',
label: 'Message'
},
{
value: 'message-box',
label: 'MessageBox'
},
{
value: 'notification',
label: 'Notification'
}
]
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'Menu'
},
{
value: 'tabs',
label: 'Tabs'
},
{
value: 'breadcrumb',
label: 'Breadcrumb'
},
{
value: 'dropdown',
label: 'Dropdown'
},
{
value: 'steps',
label: 'Steps'
}
]
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog'
},
{
value: 'tooltip',
label: 'Tooltip'
},
{
value: 'popover',
label: 'Popover'
},
{
value: 'card',
label: 'Card'
},
{
value: 'carousel',
label: 'Carousel'
},
{
value: 'collapse',
label: 'Collapse'
}
]
}
]
},
{
value: 'resource',
label: 'Resource',
children: [
{
value: 'axure',
label: 'Axure Components'
},
{
value: 'sketch',
label: 'Sketch Templates'
},
{
value: 'docs',
label: 'Design Documentation'
}
]
}
]
</script>
手动控制菜单选择
通过v-model传入modelValue数组，用于控制当前选中的菜单value
Guide
Component
Resource
展开代码
<template>
<vi-row gap="8px">
<vi-button @click="pick[0] = 'component'" style="margin-bottom: 8px;">选中一级Component</vi-button>
<vi-button @click="[pick[0], pick[1]] = ['component', 'form']" style="margin-bottom: 8px;">选中二级Form</vi-button>
</vi-row>
<vi-cascader :options="options" v-model="pick"/>
</tempalte>
<script>
const pick = reactive([])
</script>
样式
通过属性type修改菜单样式
Guide
Component
Resource
Guide
Component
Resource
展开代码
<template>
<vi-cascader type="default" :options="options"/>
<vi-cascader type="button" :options="options"/>
<vi-cascader type="plain" :options="options"/>
</tempalte>
额外
你也可以通过css变量自定义样式与颜色，详情见下方css变量表
自定义宽高度
你可以通过--vi-cascader-width --vi-cascader-max-width， --vi-cascader-min-width自定义每一层的宽度
高度同理可得
Guide
Component
Resource
展开代码
<template>
<vi-cascader :options="options" :modelValue="[]" style="--vi-cascader-width: 100px 150px 180px;--vi-cascader-max-width: 100px 150px 180px; --vi-cascader-min-width: 100px 150px 180px;"/>
</tempalte>
Props
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
插槽
| 插槽名 | 描述 | 有无默认内容 |
|---|---|---|
事件支持
| 事件名 | 描述 | 参数列表 |
|---|---|---|
可覆写css变量
| 变量名 | 描述 | 默认值 |
|---|---|---|