MenuFlyout

---

<fv-menuFlyout v-model="value" :options="options" placeholder="Pick a option">
</fv-menuFlyout>

menuFlyout-Disabled

---

<fv-menuFlyout v-model="value" :options="options" placeholder="Pick a option" disabled>
</fv-menuFlyout>

menuFlyout-Dark Theme

---

<fv-menuFlyout v-model="value" :options="options" placeholder="Pick a option" theme="dark">
</fv-menuFlyout>

Propoties

---

属性(attr)	类型(type)	必填(required)	默认值(default)	说明(statement)
value/v-model	Object	No	N/A	Combobox当前项绑定
options	Array	Yes	N/A	Combobox数据
borderWidth	Number	No	2
placeholder	String	No	Combobox
borderRadius	Number	No	3
background	[string(color)]	No	N/A
choosenBackground	[string(color)]	No	N/A
choosenSliderBackground	[string(color)]	No	N/A
inputForeground	[string(color)]	No	N/A
inputBackground	[string(color)]	No	N/A
titleForeground	[string(color)]	No	ChevronDown
dropDownIcon	String	No	N/A
dropDownIconForeground	[string(color)]	No	N/A
menuWidth	Number	No	200
menuMaxHeight	Number	No	350
rootTriggerMode	String	No	click	外层触发方式, click 点击触发, enter 移动触发
triggerMode	String	No	enter	内层触发方式, click 点击触发, enter 移动触发
wrapperNode	HTML Element	No	N/A	外层元素包括的滚动容器, 如果要考虑滚动同步, 则需要设置该属性
revealBorderColor	[string(color)]	No	N/A
revealBackgroundColor	[string(color)]	No	N/A
mobileMode	Boolean	No	false	是否开启移动端显示
isBoxShadow	Boolean	No	true
disabled	Boolean	No	N/A
theme	String	No	system	主题样式, 包含light, dark, system, custom几种样式

Events

---

事件名(Name)	参数类型(args)	说明(statement)
choose-item	value/object	Combobox choose item

Slot

---

1. Default

用户可自定义 MenuFlyout Item 内容

<slot :item="item">
    {{valueTrigger(item.type) !== 'divider' ? valueTrigger(item.text) : ''}}
</slot>

用户自定义样式时, 包含以下可选属性

• item: 当前组数据

<template v-slot:default="x">
  <i>{{x.item.text}}</i>
</template>

2. Input

用户可自定义 MenuFlyout Input 内容

• switchStatus: 切换状态函数

<slot name="input" :switch="switchStatus">
    <fv-text-box
        :model-value="computedValue"
        :placeholder="placeholder"
        :theme="$theme"
        readonly
        :background="inputBackground"
        :foreground="inputForeground"
        :border-radius="borderRadius"
        :icon="dropDownIcon"
        :icon-foreground="dropDownIconForeground"
        :reveal-background-color="revealBorderColor"
        :reveal-border-color="revealBackgroundColor"
        :reveal-border-width="borderWidth"
        :reveal-border="revealBorder"
        :is-box-shadow="isBoxShadow"
        :disabled="isDisabled"
        :cursor="'default'"
        @click="switchStatus"
        @mouseenter="switchStatus"
    ></fv-text-box>
</slot>

Data

---

1. options

options = [{key: '', text: '', type: '', disabled: ''}]

//e.g.//

options: [
    { key: "fruitsHeader", text: "Fruits", type: "header" },
    { key: "apple", text: "Apple", children: [
        { key: "A", text: "A" },
        { key: "B", text: "B" },
        { key: "Apple C", text: "Apple C", children: [
            { key: "A", text: "A" },
            { key: "B", text: "B" },
            { key: "Apple C-C", text: "Apple C-C", children: [
                { key: "A", text: "A" },
                { key: "B", text: "B" },
                { key: "Apple C-C-C", text: "Apple C-C-C" }
            ] }
        ] }
    ] },
    { key: "banana", text: "Banana" },
    { key: "orange", text: "Orange", disabled: true },
    { key: "grape", text: "Grape", children: [
        { key: "A", text: "A" },
        { key: "B", text: "B" },
        { key: "C", text: "C" }
    ] },
    { key: "divider_1", text: "-", type: "divider" },
    { key: "vegetablesHeader", text: "Vegetables", type: "header" },
    { key: "broccoli", text: "Broccoli" },
    { key: "carrot", text: "Carrot" },
    { key: "lettuce", text: "Lettuce" }
]

其中 text, disabled, type属性支持函数式声明.