场景1：下拉菜单禁用
+场景2：按钮类型禁用
+场景3：菜单项禁用
+场景1：下拉菜单禁用
+场景2：按钮类型禁用
+场景3：菜单项禁用
+场景1：按钮类型 + 循环 tiny-dropdown-item
+ +场景2：配置式
+场景1：按钮类型 + 循环 tiny-dropdown-item
+场景2：配置式
+点击后不收起菜单弹框:
+点击后不收起菜单弹框:
+默认
+场景1：默认
设置inherit-width
+场景2：设置inherit-width
+默认
+场景1：默认
设置inherit-width
+场景2：设置inherit-width
+场景1：使用 menu-options 属性定义 children
+场景2：使用 options 属性定义 children
场景1：使用 menu-options 属性定义 children
+场景2：使用 options 属性定义 children
场景1：使用 menu-options 属性配置 tiny-dropdown
+场景2：使用 menu-options 和 title 属性配置 tiny-dropdown
+场景3：使用 menu-options 和 text-field 属性配置 tiny-dropdown
+场景4：使用 options 属性配置 tiny-dropdown-menu
场景5：使用 options 和 text-field 属性配置 tiny-dropdown-menu
场景1：使用 menu-options 属性配置 tiny-dropdown
+场景2：使用 menu-options 和 title 属性配置 tiny-dropdown
+场景3：使用 menu-options 和 text-field 属性配置 tiny-dropdown
+场景4：使用 options 属性配置 tiny-dropdown-menu
场景5：使用 options 和 text-field 属性配置 tiny-dropdown-menu
默认：
其他尺寸：
默认：
其他尺寸：
场景1：配置式设置提示信息
场景2：使用 tip 和 tip-position 属性设置提示信息
hover 激活
-click 激活
-场景1： 默认悬浮时触发下拉
+场景2： 设置点击时触发下拉
+hover 激活
-click 激活
-场景1： 默认悬浮时触发下拉
+场景2： 设置点击时触发下拉
+基本用法
\n', 'en-US': 'Basic Usage
\n' }, + 'desc': { 'zh-CN': '\n', 'en-US': '\n' }, 'codeFiles': ['basic-usage.vue'] }, + { + 'demoId': 'disabled', + 'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' }, + 'desc': { + 'zh-CN': '通过 disabled 属性设置 菜单 或者 菜单项 为禁用状态。
Use thedisabledattribute to set the menu or menu item to a disabled state.
通过 size 属性可配置其他尺寸，可选值：medium / small / mini。
Use thesizeattribute to configure other sizes, with optional values:medium/small/mini.
通过 show-icon 属性设置触发源的图标显示或隐藏，默认显示，设置为 false 时隐藏。
Additional sizes: medium, small, mini, configured by setting the size property.
配置split-button属性，可以使用内置按钮触发下拉菜单,同时可以通过type属性配置按钮状态，用法同Button组件
通过 split-button 属性，设置下拉菜单显示为按钮类型。仅按钮类型时，支持 type 属性设置按钮状态。
Configure the split-button attribute. You can use the built-in button to trigger the drop-down menu. In addition, you can use the type attribute to configure the button status. The usage is the same as that of the Button component
Set the drop-down menu to display as a button type through thesplit buttonattribute. When only button types are used, thetypeattribute setting button status is supported.
可以配置 click 激活或者 hover 激活
You can configure click or hover to activate
通过 trigger 属性设置触发下拉的方式，默认为 hover。可选值为: click / hover 。
By setting thetriggerattribute to trigger a drop-down, the default ishover. The optional values are:click/hover.
可以配置 visible-arrow 为true ,显示箭头，默认不显示
tip 属性设置提示信息，tip-position 属性设置提示信息的位置。
You can set visible-arrow to true to display the arrow. By default, the arrow is not displayed.
Set the prompt information through the
tipattribute, and set the position of the prompt information through thetip positionattribute.
Dropdown 可以通过title 属性去自定义显示文本
Dropdown can use the title attribute to customize the display text
通过 visible-arrow 属性设置下拉弹框是否显示箭头，默认不显示。visible-arrow 为 true 时显示箭头。
Use the visible arrow attribute to set whether the drop-down pop-up box displays an arrow, which is not displayed by default< Show arrows when code>visible arrowis true.
下拉菜单默认在点击菜单项后会被隐藏，将 hide-on-click 属性默认为 false 可以关闭此功能。
通过 hide-on-click 属性设置点击菜单项后是否收起菜单弹框。默认为 true，点击后收起。
drop-down menu is hidden by default after a menu item is clicked. You can disable this function by setting hide-on-click to false.
Use the hide on click attribute to set whether to collapse the menu pop-up after clicking on the menu item. The default is true, and it will be collapsed after clicking.
Dropdown、DropdownItem 两个组件分别可以通过 disabled 属性设置禁用状态。
Dropdown and DropdownItem components can be disabled through the disabled attribute.
额外的尺寸：medium、small、mini，通过设置 size 属性来配置它们。
通过 title 属性设置触发源的文本，默认为 下拉菜单。
Additional sizes: medium, small, mini, configured by setting the size property.
Set the text of the trigger source through thetitleattribute, which defaults to thedrop-down menu.
Dropdown 可以通过menu-options属性配置 DropdownMenu 的属性，title配置触发源的名称
DropdownMenu 可以通过options属性配置 DropdownItem 的属性，text-field 结合 options 使用，可以指定菜单文案显示的字段。text-field 默认为label
menu-options属性：只使用 tiny-dropdown 组件配置式时使用。
options属性：使用 tiny-dropdown-menu 组件配置式时使用。
text-field属性：指定菜单文案显示的字段，默认为 label。
title属性：设置触发源的文本。
DropdownYou can configure the attributes of DropdownMenu through the menu-options attribute. titleConfigure the name of the trigger source
DropdownMenu You can configure the attributes of DropdownItem through the options attribute. text-field is used together with options to specify the fields displayed in the menu copywriting. text-field The default value is label
menu optionsProperties: Used only when using the tiny dropdown component configuration
optionsProperties: Used when using the tiny dropdown menu component configuration
text fieldAttribute: specifies the field displayed in the menu copy, which defaults to label
titleProperty: Set the text of the trigger source
Dropdown 可以通过children 字段设置菜单的子节点
通过 children 字段定义多级菜单的子节点，仅配置式时生效。
Dropdown can set the subnodes of a menu through the children field
Dropdown 可以通过inherit-width属性配置 DropdownMenu 的最小宽度继承触发源的宽度
通过 inherit-width 属性设置下拉弹框的最小宽度继承触发源的宽度。
Dropdown can use the inherit-width attribute to configure the minimum width of DropdownMenu to inherit the width of the trigger source
Inherit the width of the trigger source by setting the minimum width of the drop-down pop-up box through theinherit widthattribute.
DropdownItem 可以通过 tip 设置提示信息，tip-position设置提示信息的位置
DropdownItem can use tip to set the prompt information and tip-position to set the position of the prompt information
内置事件包含：button-click、item-click、visible-change 事件。
button-click：按钮类型时，监听左侧按钮点击事件。
item-click：监听点击菜单项事件。
visible-change：监听下拉弹框显示隐藏发生变化。
The built-in events include the button-click, item-click, and visible-change events.
button-click: When the button type is selected, listen for the left button click event.
item-click: Listens for menu item click events
code>visible-change: Listens for changes in the display and hiding of dropdown pop ups.
\n' }, 'codeFiles': ['events.vue'] }, { - 'demoId': 'slot-default', - 'name': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' }, + 'demoId': 'slots', + 'name': { 'zh-CN': '插槽', 'en-US': 'Slots' }, 'desc': { - 'zh-CN': 'Dropdown 可以通过default 插槽去自定义显示内容
Dropdown can be customized through the default slot
通过 default 插槽自定义触发源文本区域。suffix-icon 插槽自定义触发源图标区域。
Customize the trigger source text area through thedefaultslot.
Customize the trigger source icon area through thesuffix iconslot.
+{
+ options:[],
+ textField:"label",
+ popperClass:"",
+ placement:"bottom-end"
+}
+`,
'desc': {
- 'zh-CN': '展开下拉菜单的延时（仅在 trigger 为 hover 时有效）。默认：250 毫秒',
- 'en-US':
- 'Delay for expanding the drop-down list. This parameter is valid only when trigger is hover. Default value: 250 ms'
+ 'zh-CN': '配置式且只使用 tiny-dropdown 组件时使用',
+ 'en-US': 'Used when configuring and only using the tiny dropdown component'
},
- 'demoId': 'trigger'
+ 'demoId': 'options'
},
{
- 'name': 'hide-timeout',
+ 'name': 'show-timeout',
'type': 'number',
- 'defaultValue': '',
+ 'defaultValue': '250',
'desc': {
- 'zh-CN': '收起下拉菜单的延时（仅在 trigger 为 hover 时有效）。默认：150 毫秒',
+ 'zh-CN': '延时多久展开下拉菜单，单位毫秒。注意：仅在 trigger 为 hover 时有效',
'en-US':
- 'Delay for collapsing the drop-down list. This parameter is valid only when trigger is hover. Default value: 150 ms'
+ 'How long is the delay to expand the drop-down menu, in milliseconds. Note: Only valid when trigger is hover'
},
'demoId': 'trigger'
},
{
- 'name': 'tabindex',
- 'type': 'number',
- 'defaultValue': '',
- 'desc': { 'zh-CN': 'Dropdown 组件的 tabindex。', 'en-US': 'tabindex of the Dropdown component.' },
- 'demoId': 'basic-usage'
- },
- {
- 'name': 'disabled',
+ 'name': 'split-button',
'type': 'boolean',
'defaultValue': 'false',
'desc': {
- 'zh-CN': '是否禁用。默认值：false',
- 'en-US': 'Whether to disable the function. Default value: false'
+ 'zh-CN': '下拉触发元素呈现为按钮',
+ 'en-US': 'Dropdown trigger elements are presented as button groups'
},
- 'demoId': 'disabled'
+ 'demoId': 'split-button'
},
{
- 'name': 'menu-options',
- 'type': 'object',
- 'defaultValue': '{"options":[],"textField":"label","popper-class":"","placement":"bottom-end"}',
- 'desc': { 'zh-CN': '配置式配置 DropdownMenu 属性', 'en-US': 'Configuring DropdownMenu in Profiles' },
- 'demoId': 'options'
+ 'name': 'size',
+ 'type': 'string',
+ 'defaultValue': '',
+ 'desc': {
+ 'zh-CN': '菜单尺寸，可选值： medium / small / mini。注意：只在 split-button为 true 的情况下生效',
+ 'en-US': 'Menu size, optional values: medium/small/mini. Note: Only takes effect when split-button is true'
+ },
+ 'demoId': 'size'
},
{
- 'name': 'visible-arrow',
- 'type': 'boolean',
- 'defaultValue': 'false',
+ 'name': 'type',
+ 'type': 'string',
+ 'defaultValue': '',
'desc': {
- 'zh-CN': '是否显示箭头。默认值不显示',
- 'en-US': 'Indicates whether to display arrows. The default value is not displayed'
+ 'zh-CN':
+ '按钮类型，可选值: primary / success / warning / danger / info / text。注意：只在split-button为 true 的情况下有效',
+ 'en-US':
+ 'Button type, optional values: primary/success/warning/danger/info/text. Note: Only valid if split button is true'
},
- 'demoId': 'visible-arrow'
+ 'demoId': 'split-button'
},
{
'name': 'title',
'type': 'string',
'defaultValue': '下拉菜单',
'desc': {
- 'zh-CN': '不使用默认插槽时，title属性可以配置菜单标题',
- 'en-US': 'When the default slot is not used, the menu title can be configured in the title attribute.'
+ 'zh-CN': '自定义触发源的文本',
+ 'en-US': 'Text for custom trigger source'
},
'demoId': 'options'
},
{
- 'name': 'inherit-width',
+ 'name': 'trigger',
+ 'type': 'string',
+ 'defaultValue': 'hover',
+ 'desc': {
+ 'zh-CN': '触发下拉的方式。可选值：hover / click',
+ 'en-US': 'Trigger the dropdown method. Optional values: hover / click'
+ },
+ 'demoId': 'trigger'
+ },
+ {
+ 'name': 'tabindex',
+ 'type': 'number',
+ 'defaultValue': '0',
+ 'desc': {
+ 'zh-CN': '初始化触发元素的原生属性 tabindex',
+ 'en-US': 'Initialize the native attribute tabindex of the triggering element'
+ },
+ 'demoId': ''
+ },
+ {
+ 'name': 'visible-arrow',
'type': 'boolean',
'defaultValue': 'false',
'desc': {
- 'zh-CN': '默认为false,设置true时，弹框的最小宽度继承触发源的宽度',
- 'en-US':
- 'The default value is false. When this parameter is set to true, the minimum width of the dialog box inherits the width of the trigger source.'
+ 'zh-CN': '下拉弹框是否显示箭头，默认不显示',
+ 'en-US': 'Indicates whether to display arrows. The default value is not displayed'
},
- 'demoId': 'inherit-width'
+ 'demoId': 'visible-arrow'
}
],
'events': [
{
'name': 'button-click',
- 'type': 'Function',
+ 'type': 'Function() => void',
'defaultValue': 'Function',
'desc': {
- 'zh-CN': 'split-button 为 true 时，点击左侧按钮的事件回调。',
- 'en-US': 'When split-button is set to true, click the callback function of the button on the left.'
+ 'zh-CN': '监听左侧按钮点击事件，仅 split-button 为 true 时生效',
+ 'en-US': 'Listen for the left button click event, only effective when split-button is true'
},
'demoId': 'events'
},
{
'name': 'item-click',
- 'type': 'Function',
- 'defaultValue': 'Function(data:object)',
+ 'type': 'Function(data:IItemClickParam) => void',
+ 'defaultValue': '',
'desc': {
- 'zh-CN':
- '点击菜单项触发的事件回调。返回数据data为object类型，对象包含字段 itemData 和 vm 字段，itemData 为当前选中项的数据（仅配置式时生效），vm 为当前选中项的实例',
- 'en-US': 'Callback triggered by clicking a menu item.'
+ 'zh-CN': '监听点击菜单项事件',
+ 'en-US': 'Listen for menu item click events'
},
'demoId': 'events'
},
{
'name': 'visible-change',
- 'type': 'Function',
- 'defaultValue': 'Function(status:boolean)',
+ 'type': 'Function(status:boolean) => void',
+ 'defaultValue': '',
'desc': {
- 'zh-CN': '下拉框显示/隐藏时触发。回调参数 status 为 boolean 类型，true 表示显示，false 表示隐藏',
- 'en-US': 'This event is triggered when the drop-down list box is displayed or hidden.'
+ 'zh-CN': '监听下拉框的显示或隐藏状态',
+ 'en-US': 'Monitor the display or hidden status of the dropdown box'
},
'demoId': 'events'
}
@@ -318,9 +345,8 @@ export default {
'type': '',
'defaultValue': '',
'desc': {
- 'zh-CN': '触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件。',
- 'en-US':
- 'Element that triggers the display of the drop-down list. Note: The value must be an element or component.'
+ 'zh-CN': '自定义触发源文本区域。 注意： 必须是一个元素或者或者组件',
+ 'en-US': 'Customize the trigger source text area. Note: must be an element or component'
},
'demoId': 'basic-usage'
},
@@ -329,21 +355,36 @@ export default {
'type': '',
'defaultValue': '',
'desc': {
- 'zh-CN': '下拉列表，通常是