黄金糕
狮子头
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.cn.md b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.cn.md
index 597c9dd893..e3f56f0dc2 100644
--- a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.cn.md
+++ b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.cn.md
@@ -4,4 +4,4 @@ title: Dropdown 下拉菜单
# Dropdown 下拉菜单
-Dropdown 下拉菜单。
+> 可以配置菜单列表，点击或悬浮时下拉，支持多级菜单
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.en.md b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.en.md
index 29dcedd76f..c5b99a8a63 100644
--- a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.en.md
+++ b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.en.md
@@ -4,4 +4,4 @@ title: Dropdown drop-down list
# Dropdown drop-down list
-Dropdown drop-down list.
+> Can configure menu list, drop down when clicked or hovered, supports multi-level menus
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
index c788de95b7..057917f4eb 100644
--- a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
+++ b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
@@ -5,17 +5,47 @@ export default {
{
'demoId': 'basic-usage',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
- 'desc': { 'zh-CN': '基本用法
\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 属性设置 菜单 或者 菜单项 为禁用状态。
\n',
+ 'en-US': 'The Use thedisabledattribute to set the menu or menu item to a disabled state.
\n'
+ },
+ 'codeFiles': ['disabled.vue']
+ },
+ {
+ 'demoId': 'size',
+ 'name': { 'zh-CN': '尺寸', 'en-US': 'Size' },
+ 'desc': {
+ 'zh-CN':
+ '通过 size 属性可配置其他尺寸，可选值：medium / small / mini。
\n',
+ 'en-US':
+ 'Use thesizeattribute to configure other sizes, with optional values:medium/small/mini.
\n'
+ },
+ 'codeFiles': ['size.vue']
+ },
+ {
+ 'demoId': 'show-icon',
+ 'name': { 'zh-CN': '隐藏图标', 'en-US': 'Show icons' },
+ 'desc': {
+ 'zh-CN': '通过 show-icon 属性设置触发源的图标显示或隐藏，默认显示，设置为 false 时隐藏。
\n',
+ 'en-US':
+ 'Additional sizes: medium, small, mini, configured by setting the size property.
\n'
+ },
+ 'codeFiles': ['show-icon.vue']
+ },
{
'demoId': 'split-button',
- 'name': { 'zh-CN': '触发对象', 'en-US': 'Trigger object' },
+ 'name': { 'zh-CN': '按钮类型', 'en-US': 'Button type' },
'desc': {
'zh-CN':
- '配置split-button属性，可以使用内置按钮触发下拉菜单,同时可以通过type属性配置按钮状态，用法同Button组件
\n',
+ '通过 split-button 属性，设置下拉菜单显示为按钮类型。仅按钮类型时，支持 type 属性设置按钮状态。
\n',
'en-US':
- '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
\n'
+ '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.
\n'
},
'codeFiles': ['split-button.vue']
},
@@ -23,70 +53,63 @@ export default {
'demoId': 'trigger',
'name': { 'zh-CN': '触发方式', 'en-US': 'Trigger Mode' },
'desc': {
- 'zh-CN': '可以配置 click 激活或者 hover 激活
\n',
- 'en-US': 'You can configure click or hover to activate
\n'
+ 'zh-CN':
+ '通过 trigger 属性设置触发下拉的方式，默认为 hover。可选值为: click / hover 。
\n',
+ 'en-US':
+ 'By setting thetriggerattribute to trigger a drop-down, the default ishover. The optional values are:click/hover.
\n'
},
'codeFiles': ['trigger.vue']
},
{
- 'demoId': 'visible-arrow',
- 'name': { 'zh-CN': '显示箭头', 'en-US': 'Display Arrow' },
+ 'demoId': 'tip',
+ 'name': { 'zh-CN': '提示信息', 'en-US': 'Prompt' },
'desc': {
- 'zh-CN': '可以配置 visible-arrow 为true ,显示箭头，默认不显示
\n',
+ 'zh-CN': '通过 tip 属性设置提示信息，tip-position 属性设置提示信息的位置。
\n',
'en-US':
- 'You can set visible-arrow to true to display the arrow. By default, the arrow is not displayed.
\n'
+ 'Set the prompt information through the
tipattribute, and set the position of the prompt information through thetip positionattribute.
\n'
},
- 'codeFiles': ['visible-arrow.vue']
+ 'codeFiles': ['tip.vue']
},
{
- 'demoId': 'title',
- 'name': { 'zh-CN': '自定义文本', 'en-US': 'Custom Text' },
+ 'demoId': 'visible-arrow',
+ 'name': { 'zh-CN': '显示箭头', 'en-US': 'Display Arrow' },
'desc': {
- 'zh-CN': 'Dropdown 可以通过title 属性去自定义显示文本
\n',
- 'en-US': 'Dropdown can use the title attribute to customize the display text
\n'
+ 'zh-CN':
+ '通过 visible-arrow 属性设置下拉弹框是否显示箭头，默认不显示。visible-arrow 为 true 时显示箭头。
\n',
+ 'en-US':
+ '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.
\n'
},
- 'codeFiles': ['title.vue']
+ 'codeFiles': ['visible-arrow.vue']
},
{
'demoId': 'hide-on-click',
- 'name': { 'zh-CN': '菜单隐藏方式', 'en-US': 'Menu hiding mode' },
+ 'name': { 'zh-CN': '点击后收起', 'en-US': 'Click to collapse' },
'desc': {
'zh-CN':
- '下拉菜单默认在点击菜单项后会被隐藏，将 hide-on-click 属性默认为 false 可以关闭此功能。
\n',
+ '通过 hide-on-click 属性设置点击菜单项后是否收起菜单弹框。默认为 true，点击后收起。
\n',
'en-US':
- 'The 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.
\n'
+ '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.
\n'
},
'codeFiles': ['hide-on-click.vue']
},
{
- 'demoId': 'disabled',
- 'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
- 'desc': {
- 'zh-CN': 'Dropdown、DropdownItem 两个组件分别可以通过 disabled 属性设置禁用状态。
\n',
- 'en-US':
- 'The Dropdown and DropdownItem components can be disabled through the disabled attribute.
\n'
- },
- 'codeFiles': ['disabled.vue']
- },
- {
- 'demoId': 'size',
- 'name': { 'zh-CN': '不同尺寸', 'en-US': 'Different Sizes' },
+ 'demoId': 'title',
+ 'name': { 'zh-CN': '触发源文本', 'en-US': 'Trigger Source Text' },
'desc': {
- 'zh-CN':
- '额外的尺寸：medium、small、mini，通过设置 size 属性来配置它们。
\n',
+ 'zh-CN': '通过 title 属性设置触发源的文本，默认为 下拉菜单。
\n',
'en-US':
- 'Additional sizes: medium, small, mini, configured by setting the size property.
\n'
+ 'Set the text of the trigger source through thetitleattribute, which defaults to thedrop-down menu.
\n'
},
- 'codeFiles': ['size.vue']
+ 'codeFiles': ['title.vue']
},
{
'demoId': 'options',
- 'name': { 'zh-CN': '使用配置式', 'en-US': 'Use Profile' },
+ 'name': { 'zh-CN': '配置式', 'en-US': 'Configuration' },
'desc': {
'zh-CN':
- 'Dropdown 可以通过menu-options属性配置 DropdownMenu 的属性，title配置触发源的名称
DropdownMenu 可以通过options属性配置 DropdownItem 的属性，text-field 结合 options 使用，可以指定菜单文案显示的字段。text-field 默认为label
\n',
+ 'menu-options属性：只使用 tiny-dropdown 组件配置式时使用。
\noptions属性：使用 tiny-dropdown-menu 组件配置式时使用。
\ntext-field属性：指定菜单文案显示的字段，默认为 label。
\ntitle属性：设置触发源的文本。
\n',
'en-US':
- '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
\n'
+ 'menu optionsProperties: Used only when using the tiny dropdown component configuration
\noptionsProperties: Used when using the tiny dropdown menu component configuration
\ntext fieldAttribute: specifies the field displayed in the menu copy, which defaults to label
\ntitleProperty: Set the text of the trigger source
\n'
},
'codeFiles': ['options.vue']
},
@@ -94,7 +117,7 @@ export default {
'demoId': 'multi-level',
'name': { 'zh-CN': '多级菜单', 'en-US': 'Multi-Level Menu' },
'desc': {
- 'zh-CN': 'Dropdown 可以通过children 字段设置菜单的子节点
\n',
+ 'zh-CN': '通过 children 字段定义多级菜单的子节点，仅配置式时生效。
\n',
'en-US': 'Dropdown can set the subnodes of a menu through the children field
\n'
},
'codeFiles': ['multi-level.vue']
@@ -102,46 +125,37 @@ export default {
{
'demoId': 'inherit-width',
'name': {
- 'zh-CN': '弹框最小宽度与触发源一致',
- 'en-US': 'The minimum width of the dialog box is the same as that of the trigger source.'
+ 'zh-CN': '继承宽度',
+ 'en-US': 'Inherit Width'
},
'desc': {
- 'zh-CN': 'Dropdown 可以通过inherit-width属性配置 DropdownMenu 的最小宽度继承触发源的宽度
\n',
+ 'zh-CN': '通过 inherit-width 属性设置下拉弹框的最小宽度继承触发源的宽度。
\n',
'en-US':
- 'Dropdown can use the inherit-width attribute to configure the minimum width of DropdownMenu to inherit the width of the trigger source
\n'
+ 'Inherit the width of the trigger source by setting the minimum width of the drop-down pop-up box through theinherit widthattribute.
\n'
},
'codeFiles': ['inherit-width.vue']
},
- {
- 'demoId': 'tip',
- 'name': { 'zh-CN': '提示信息', 'en-US': 'Prompt' },
- 'desc': {
- 'zh-CN':
- 'DropdownItem 可以通过 tip 设置提示信息，tip-position设置提示信息的位置
\n',
- 'en-US':
- 'DropdownItem can use tip to set the prompt information and tip-position to set the position of the prompt information
\n'
- },
- 'codeFiles': ['tip.vue']
- },
{
'demoId': 'events',
- 'name': { 'zh-CN': '内置事件', 'en-US': 'Internal Event' },
+ 'name': { 'zh-CN': '事件', 'en-US': 'Events' },
'desc': {
'zh-CN':
- '内置事件包含：button-click、item-click、visible-change 事件。
\n',
+ 'button-click：按钮类型时，监听左侧按钮点击事件。
item-click：监听点击菜单项事件。
visible-change：监听下拉弹框显示隐藏发生变化。
\n',
'en-US':
- 'The built-in events include the button-click, item-click, and visible-change events.
\n'
+ 'button-click: When the button type is selected, listen for the left button click event.
\nitem-click: Listens for menu item click events
\ncode>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 插槽去自定义显示内容
\n',
- 'en-US': 'Dropdown can be customized through the default slot
\n'
+ 'zh-CN':
+ '通过 default 插槽自定义触发源文本区域。suffix-icon 插槽自定义触发源图标区域。
\n',
+ 'en-US':
+ 'Customize the trigger source text area through thedefaultslot.
\nCustomize the trigger source icon area through thesuffix iconslot.
\n'
},
- 'codeFiles': ['slot-default.vue']
+ 'codeFiles': ['slots.vue']
}
],
apis: [
@@ -150,164 +164,177 @@ export default {
'type': 'component',
'properties': [
{
- 'name': 'type',
- 'type': 'string',
- 'defaultValue': '',
- 'desc': {
- 'zh-CN': '菜单按钮类型，同 Button 组件(只在split-button为 true 的情况下有效)。',
- 'en-US':
- 'Menu button type, which is the same as the Button component. (Valid only if split-button is true).'
- },
- 'demoId': 'split-button'
- },
- {
- 'name': 'size',
- 'type': 'string',
- 'defaultValue': '',
+ 'name': 'disabled',
+ 'type': 'boolean',
+ 'defaultValue': 'false',
'desc': {
- 'zh-CN': '菜单尺寸，在split-button为 true 的情况下也对触发按钮生效。可选值（medium / small / mini）',
- 'en-US':
- 'Menu size. When split-button is set to true, this parameter is also valid for triggering a button. Available values (medium / small / mini)'
+ 'zh-CN': '是否禁用',
+ 'en-US': 'Is it disabled'
},
- 'demoId': 'size'
+ 'demoId': 'disabled'
},
{
- 'name': 'split-button',
+ 'name': 'hide-on-click',
'type': 'boolean',
- 'defaultValue': 'false',
+ 'defaultValue': 'true',
'desc': {
- 'zh-CN': '下拉触发元素呈现为按钮组。默认值：false',
- 'en-US': 'The drop-down trigger element is displayed as a button group. Default value: false'
+ 'zh-CN': '点击菜单项后是否收起菜单。默认点击后收起',
+ 'en-US': 'Whether to collapse the menu after clicking on the menu item. Collapse after clicking by default'
},
- 'demoId': 'split-button'
+ 'demoId': 'hide-on-click'
},
{
- 'name': 'trigger',
- 'type': 'string',
- 'defaultValue': 'hover',
+ 'name': 'hide-timeout',
+ 'type': 'number',
+ 'defaultValue': '150',
'desc': {
- 'zh-CN': '触发下拉的行为。可选值（hover, click），默认值：hover',
- 'en-US': 'Trigger drop-down behavior. The value can be hover or click. The default value is hover'
+ 'zh-CN': '延时多久收起下拉菜单，单位毫秒。注意：仅在 trigger 为 hover 时有效',
+ 'en-US':
+ 'How long is the delay in retracting the pull-down menu, in milliseconds. Note: Only valid when trigger is hover'
},
'demoId': 'trigger'
},
{
- 'name': 'hide-on-click',
+ 'name': 'inherit-width',
'type': 'boolean',
- 'defaultValue': 'true',
+ 'defaultValue': 'false',
'desc': {
- 'zh-CN': '是否在点击菜单项后隐藏菜单。默认为 true。',
- 'en-US': 'Indicates whether to hide a menu after a menu item is clicked. The default value is true.'
+ 'zh-CN': '下拉弹框的最小宽度是否继承触发源的宽度，默认不继承',
+ 'en-US':
+ 'Whether the minimum width of the dropdown pop-up inherit the width of the trigger source.It is not inherited by default'
},
- 'demoId': 'hide-on-click'
+ 'demoId': 'inherit-width'
},
{
- 'name': 'show-timeout',
- 'type': 'number',
- 'defaultValue': '',
+ 'name': 'menu-options',
+ 'type': 'IMenuOption',
+ 'typeAnchorName': 'IMenuOption',
+ 'defaultValue': `
+{
+ 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': '下拉列表，通常是 组件。',
- 'en-US': 'drop-down list, usually the component.'
+ 'zh-CN': '自定义下拉列表区域，通常使用 tiny-dropdown-menu 组件',
+ 'en-US': 'Customize the dropdown list area, usually using the tiny dropdown menu component'
},
'demoId': 'basic-usage'
}
- ],
- 'dropdownMenuattrs': [
+ ]
+ },
+ {
+ 'name': 'dropdownMenu',
+ 'type': 'component',
+ 'properties': [
+ {
+ 'name': 'options',
+ 'type': 'IItem []',
+ 'typeAnchorName': 'IItem',
+ 'defaultValue': '[]',
+ 'desc': {
+ 'zh-CN': '通过配置式设置菜单项的属性',
+ 'en-US': 'Setting menu item properties through configuration'
+ },
+ 'demoId': 'options'
+ },
{
'name': 'placement',
'type': 'string',
- 'defaultValue': '',
+ 'defaultValue': 'bottom-end',
'desc': {
- 'zh-CN': '菜单弹出位置。可选值（top/top-start/top-end/bottom/bottom-start/bottom-end），默认：bottom-end',
+ 'zh-CN': '菜单弹出位置。可选值: top / top-start / top-end / bottom / bottom-start / bottom-end',
'en-US':
- 'Menu pop-up position. The value can be (top/top-start/top-end/bottom/bottom-start/bottom-end). The default value is bottom-end'
+ 'Menu pop-up location. Optional values: top / top-start / top-end/bottom / bottom-start / bottom-end'
},
'demoId': 'basic-usage'
},
@@ -351,82 +392,127 @@ export default {
'name': 'popper-class',
'type': '',
'defaultValue': '',
- 'desc': { 'zh-CN': '设置弹出下拉自定义样式。', 'en-US': 'Set the pop-up drop-down style.' },
- 'demoId': 'basic-usage'
- },
- {
- 'name': 'options',
- 'type': 'Array',
- 'defaultValue': '[]',
'desc': {
- 'zh-CN': '通过配置式设置菜单项的属性',
- 'en-US': 'Setting the properties of a menu item using a profile'
+ 'zh-CN': '下拉弹框的类名，用于自定义样式',
+ 'en-US': 'The class name of the dropdown pop-up box, used for customizing styles'
},
- 'demoId': 'options'
+ 'demoId': 'basic-usage'
},
{
'name': 'text-field',
'type': 'string',
'defaultValue': 'label',
'desc': {
- 'zh-CN': '结合options 属性使用，指定菜单项的显示文案的字段，默认字段为 label',
- 'en-US':
- 'Used together with the options attribute to specify the copywriting field of a menu item. The default field is label.'
+ 'zh-CN': '菜单项文本的字段,结合 options 属性使用',
+ 'en-US': 'The field of menu item text, used in conjunction with the options attribute'
},
'demoId': 'options'
}
],
- 'dropdownMenu-slots': [
+ 'slots': [
{
'name': 'default',
'type': '',
'defaultValue': '',
'desc': {
- 'zh-CN': '下拉列表选项通常是 组件。',
- 'en-US': 'The drop-down list is usually a component.'
+ 'zh-CN': '下拉弹框区域，通常使用 tiny-dropdown-item 组件',
+ 'en-US': 'Dropdown the pop-up area, usually using the tiny-dropdown item component'
},
'demoId': 'basic-usage'
}
- ],
- 'dropdownItemattrs': [
+ ]
+ },
+ {
+ 'name': 'dropdownItem',
+ 'type': 'component',
+ 'properties': [
{
'name': 'disabled',
'type': 'boolean',
'defaultValue': 'false',
- 'desc': { 'zh-CN': '禁用。默认：false', 'en-US': 'Disabled. Default value: false' },
+ 'desc': { 'zh-CN': '是否禁用', 'en-US': 'Is it disabled' },
'demoId': 'disabled'
},
{
'name': 'divided',
'type': 'boolean',
'defaultValue': 'false',
- 'desc': { 'zh-CN': '显示分割线。默认值：false', 'en-US': 'Displays the split line. Default value: false' },
- 'demoId': 'hide-on-click'
+ 'desc': { 'zh-CN': '是否显示分割线', 'en-US': 'Show split lines' },
+ 'demoId': 'events'
},
{
'name': 'icon',
- 'type': 'object',
+ 'type': '',
'defaultValue': '',
- 'desc': { 'zh-CN': '内嵌图标。', 'en-US': 'Embedded icon.' },
- 'demoId': 'trigger'
+ 'desc': { 'zh-CN': '内嵌图标', 'en-US': 'Embedded icon' },
+ 'demoId': 'events'
+ },
+ {
+ 'name': 'item-data',
+ 'type': 'IItemData',
+ 'typeAnchorName': 'IItemData',
+ 'defaultValue': '',
+ 'desc': { 'zh-CN': '菜单项的配置信息', 'en-US': 'Configuration information for menu items' },
+ 'demoId': 'events'
},
{
'name': 'label',
'type': 'string',
'defaultValue': '',
- 'desc': { 'zh-CN': '菜单项的显示值', 'en-US': 'Display value of a menu item' },
- 'demoId': 'basic-usage'
+ 'desc': { 'zh-CN': '菜单项的文本', 'en-US': 'Text for menu items' },
+ 'demoId': 'events'
}
],
- 'dropdownItem-slots': [
+ 'slots': [
{
'name': 'default',
'type': '',
'defaultValue': '',
- 'desc': { 'zh-CN': '下拉列表选项内容。', 'en-US': 'The options in the drop-down list box are displayed.' },
+ 'desc': { 'zh-CN': '菜单项文本区域', 'en-US': 'Menu item text area' },
'demoId': 'basic-usage'
}
]
}
+ ],
+ types: [
+ {
+ name: 'IMenuOption',
+ type: 'interface',
+ code: `
+interface IMenuOption {
+ "options": IItemData[]
+ "textField"?: string
+ "popper-class"?: string
+ "placement"?: top | top-start | top-end | bottom | bottom-start | bottom-end
+}
+`
+ },
+ {
+ name: 'IItemClickParam',
+ type: 'interface',
+ code: `
+interface IMenuOption {
+ "itemData": IItemData
+ // dropdownItem 组件的实例
+ "vm": {
+ "selected": boolean
+ "textField: string
+ "tipPosition: string
+ "$el": HTMLElement
+ }
+}
+`
+ },
+ {
+ name: 'IItemData',
+ type: 'interface',
+ code: `
+interface IItemData {
+ "label"?: string
+ "disabled"?: boolean
+ "divided"?: boolean
+}
+`
+ }
]
}
diff --git a/examples/sites/demos/pc/app/select/multiple-limit-composition-api.vue b/examples/sites/demos/pc/app/select/multiple-limit-composition-api.vue
index 088485d94c..fde79a3bfa 100644
--- a/examples/sites/demos/pc/app/select/multiple-limit-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/multiple-limit-composition-api.vue
@@ -15,5 +15,5 @@ const options = ref([
{ value: '选项4', label: '龙须面' },
{ value: '选项5', label: '北京烤鸭' }
])
-const value = ref('')
+const value = ref([])
diff --git a/examples/sites/demos/pc/app/select/multiple-limit.vue b/examples/sites/demos/pc/app/select/multiple-limit.vue
index fb89b10030..328e2354fb 100644
--- a/examples/sites/demos/pc/app/select/multiple-limit.vue
+++ b/examples/sites/demos/pc/app/select/multiple-limit.vue
@@ -21,7 +21,7 @@ export default {
{ value: '选项4', label: '龙须面' },
{ value: '选项5', label: '北京烤鸭' }
],
- value: ''
+ value: []
}
}
}
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 7914637df1..582ed03d2f 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -77,7 +77,13 @@
-
+
|
|
@@ -313,6 +319,17 @@ export default defineComponent({
} else {
router.push(`#${demoId}`)
}
+ },
+ handleApiClick: (ev) => {
+ if (ev.target.tagName === 'A') {
+ ev.preventDefault()
+ const href = ev.target.getAttribute('href')
+ const hash = $split(href, '#', -1)
+ router.push(href)
+ state.singleDemo = state.currJson.demos.find((d) => d.demoId === hash)
+
+ scrollByHash(hash)
+ }
if (apiModeState.demoMode === 'single') {
state.singleDemo = state.currJson.demos.find((d) => d.demoId === demoId)
}
diff --git a/packages/renderless/src/common/deps/dom.ts b/packages/renderless/src/common/deps/dom.ts
index 01ef654e83..f1f3040a22 100644
--- a/packages/renderless/src/common/deps/dom.ts
+++ b/packages/renderless/src/common/deps/dom.ts
@@ -11,6 +11,7 @@
*/
import { hasOwn, isObject, isNull } from '../type'
+import globalConfig from '../global'
export const isServer = typeof window === 'undefined'
const SPECIAL_CHARS_REGEXP = /([:\-_]+(.))/g
@@ -235,8 +236,9 @@ export const isVNode = (node: any) => node !== null && isObject(node) && hasOwn.
* @returns visibleWidth ： 可视区宽度（不含滚动条）
*/
export const getDomNode = () => {
- let documentElement = document.documentElement
- let bodyElem = document.body
+ const viewportWindow = globalConfig.viewportWindow || window
+ let documentElement = viewportWindow.document.documentElement
+ let bodyElem = viewportWindow.document.body
return {
scrollTop: documentElement.scrollTop || bodyElem.scrollTop,
diff --git a/packages/renderless/src/common/deps/popper.ts b/packages/renderless/src/common/deps/popper.ts
index fca779f853..e3c21fad23 100644
--- a/packages/renderless/src/common/deps/popper.ts
+++ b/packages/renderless/src/common/deps/popper.ts
@@ -12,6 +12,7 @@
import { on, off } from './dom'
import PopupManager from './popup-manager'
+import globalConfig from '../global'
import { typeOf } from '../type'
const positions = ['left', 'right', 'top', 'bottom']
@@ -752,7 +753,8 @@ class Popper {
let scrollTop = isFixed ? 0 : getScrollTopValue(scrollParent)
let scrollLeft = isFixed ? 0 : getScrollLeftValue(scrollParent)
- const viewportWindow = PopupManager.viewportWindow || window
+ // PopupManager.viewportWindow是为了兼容之前已经采用此方法兼容微前端的用户，后续需要采用globalConfig.viewportWindow
+ const viewportWindow = globalConfig.viewportWindow || PopupManager.viewportWindow || window
boundaries = {
top: 0 - (offsetParentRect.top - scrollTop),
right: viewportWindow.document.documentElement.clientWidth - (offsetParentRect.left - scrollLeft),
diff --git a/packages/renderless/src/common/deps/vue-popper.ts b/packages/renderless/src/common/deps/vue-popper.ts
index 2e93b0ab76..aa5b6d2382 100644
--- a/packages/renderless/src/common/deps/vue-popper.ts
+++ b/packages/renderless/src/common/deps/vue-popper.ts
@@ -184,7 +184,7 @@ export default (options: IPopperInputParams) => {
return
}
if (val) {
- updatePopper()
+ nextTick(updatePopper)
}
props.trigger === 'manual' && emit('update:modelValue', val)
}
diff --git a/packages/renderless/src/common/global.ts b/packages/renderless/src/common/global.ts
new file mode 100644
index 0000000000..a73e754491
--- /dev/null
+++ b/packages/renderless/src/common/global.ts
@@ -0,0 +1,7 @@
+const globalConfig = {
+ viewportWindow: null // 获取真实视口的window，解决在微前端中某些bug
+}
+
+export const getViewportWindow = () => globalConfig.viewportWindow || window
+
+export default globalConfig
diff --git a/packages/renderless/src/dialog-select/index.ts b/packages/renderless/src/dialog-select/index.ts
index 3984ef8a1c..a971efbfe8 100644
--- a/packages/renderless/src/dialog-select/index.ts
+++ b/packages/renderless/src/dialog-select/index.ts
@@ -300,7 +300,7 @@ const getTreeRadio = (vm) => {
const currentRadio = vm.$refs.multiTree.state.currentRadio
const plainNode = find(plainNodes, (plainNode) => plainNode.node.id === currentRadio.value)
- return [plainNode.node.data]
+ return plainNode?.node ? [plainNode.node.data] : []
}
export const multiTreeCheck =
diff --git a/packages/renderless/src/dropdown/index.ts b/packages/renderless/src/dropdown/index.ts
index 7690c26a6e..dc6fe09437 100644
--- a/packages/renderless/src/dropdown/index.ts
+++ b/packages/renderless/src/dropdown/index.ts
@@ -224,7 +224,7 @@ export const handleMenuItemClick =
}
if (!disabled) {
- const data = { itemData, vm, disabled }
+ const data = { itemData, vm }
emit('item-click', data)
}
}
diff --git a/packages/renderless/src/grid/utils/dom.ts b/packages/renderless/src/grid/utils/dom.ts
index d795d4c237..ed7d501510 100644
--- a/packages/renderless/src/grid/utils/dom.ts
+++ b/packages/renderless/src/grid/utils/dom.ts
@@ -24,7 +24,7 @@
*/
import { getRowid } from './common'
-import { hasClass } from '../../common/deps/dom'
+import { hasClass, getDomNode } from '../../common/deps/dom'
import { getActualTarget } from '../../common/event'
import { arrayIndexOf } from '../static'
@@ -150,18 +150,6 @@ export const colToVisible = ($table, column, move) => {
})
}
-export const getDomNode = () => {
- const documentElement = document.documentElement
- const bodyElement = document.body
-
- return {
- scrollTop: documentElement.scrollTop || bodyElement.scrollTop,
- scrollLeft: documentElement.scrollLeft || bodyElement.scrollLeft,
- visibleHeight: documentElement.clientHeight || bodyElement.clientHeight,
- visibleWidth: documentElement.clientWidth || bodyElement.clientWidth
- }
-}
-
export const getEventTargetNode = (event, container, queryCls) => {
let targetEl
let target = getActualTarget(event)
@@ -284,3 +272,5 @@ export const getCell = ($table, { row, column }) =>
)
})
})
+
+export { getDomNode }
diff --git a/packages/renderless/src/image-viewer/index.ts b/packages/renderless/src/image-viewer/index.ts
index fb763453cd..b1248d6459 100644
--- a/packages/renderless/src/image-viewer/index.ts
+++ b/packages/renderless/src/image-viewer/index.ts
@@ -438,7 +438,7 @@ export const handleVisible =
state.transform.deg = 0
setTimeout(() => {
- if (props.startPosition !== 0) {
+ if (props.startPosition > 0) {
state.index = (props.startPosition - 1 + state.urlList.length) % state.urlList.length
state.imageTransform = state.index * state.imageItemWidth
state.imageTransformSize = -state.index * state.imageItemWidth
@@ -481,7 +481,7 @@ export const getImageWidth =
state.imageAllWidth = state.urlList.length * imageW
if (mode !== 'mobile-first') {
- if (props.startPosition !== 0) {
+ if (props.startPosition > 0) {
state.index = props.startPosition
state.imageTransition = 0
diff --git a/packages/renderless/src/image-viewer/vue.ts b/packages/renderless/src/image-viewer/vue.ts
index 6a48185990..8cd51475ab 100644
--- a/packages/renderless/src/image-viewer/vue.ts
+++ b/packages/renderless/src/image-viewer/vue.ts
@@ -91,7 +91,7 @@ const initState = ({ reactive, computed, api, mode, props, constants, inject })
infinite: true,
loading: false,
transform: { scale: 1, deg: 0, offsetX: 0, offsetY: 0, objfit: 'contain', enableTransition: false },
- urlList: inject('urlList', null) || props.urlList,
+ urlList: props.urlList || inject('urlList', null),
mode: constants.MODE.CONTAIN,
previewVisible: props.previewVisible,
fullScreen: props.imageFullCurrent,
diff --git a/packages/renderless/src/modal/index.ts b/packages/renderless/src/modal/index.ts
index 8675595d3b..1249946109 100644
--- a/packages/renderless/src/modal/index.ts
+++ b/packages/renderless/src/modal/index.ts
@@ -14,6 +14,8 @@ import { KEY_CODE } from '../common'
import { on, off, addClass, hasClass, removeClass } from '../common/deps/dom'
import PopupManager from '../common/deps/popup-manager'
import { getDomNode } from '../common/deps/dom'
+import { getViewportWindow } from '../common/global'
+
import type {
IModalProps,
IModalRenderlessParams,
@@ -237,9 +239,13 @@ export const open =
if (!isMobileFirstMode) {
let modalBoxElem = api.getBox()
- let clientVisibleWidth = document.documentElement.clientWidth || document.body.clientWidth
+ const viewportWindow = getViewportWindow()
+
+ let clientVisibleWidth =
+ viewportWindow.document.documentElement.clientWidth || viewportWindow.document.body.clientWidth
- let clientVisibleHeight = document.documentElement.clientHeight || document.body.clientHeight
+ let clientVisibleHeight =
+ viewportWindow.document.documentElement.clientHeight || viewportWindow.document.body.clientHeight
modalBoxElem.style.left = `${clientVisibleWidth / 2 - modalBoxElem.offsetWidth / 2}px`
diff --git a/packages/renderless/src/popover/vue.ts b/packages/renderless/src/popover/vue.ts
index 80bc3315a7..0517266395 100644
--- a/packages/renderless/src/popover/vue.ts
+++ b/packages/renderless/src/popover/vue.ts
@@ -113,8 +113,7 @@ const initWatch = ({
if (props.disabled) {
return
}
- // mobile-first时，需要更新一下，arrow的位置才正确
- if (mode === 'mobile-first' && val) {
+ if (val) {
nextTick(() => updatePopper())
}
// 隐藏时，只冒一下事件，并没有调用doDestory();
diff --git a/packages/renderless/src/select/index.ts b/packages/renderless/src/select/index.ts
index 4399877807..4d68ebac18 100644
--- a/packages/renderless/src/select/index.ts
+++ b/packages/renderless/src/select/index.ts
@@ -1226,10 +1226,12 @@ export const toVisible =
}
export const toHide =
- ({ constants, state, props, vm, api }) =>
+ ({ constants, state, props, vm, api, nextTick }) =>
() => {
state.selectEmitter.emit(constants.COMPONENT_NAME.SelectDropdown)
- state.selectEmitter.emit(constants.EVENT_NAME.updatePopper)
+ nextTick(() => {
+ state.selectEmitter.emit(constants.EVENT_NAME.updatePopper)
+ })
if (state.filterOrSearch) {
state.query =
diff --git a/packages/renderless/src/select/vue.ts b/packages/renderless/src/select/vue.ts
index d86457ae87..162125c3bf 100644
--- a/packages/renderless/src/select/vue.ts
+++ b/packages/renderless/src/select/vue.ts
@@ -270,7 +270,7 @@ const addApi = ({ api, props, state, emit, constants, parent, nextTick, dispatch
handleFocus: handleFocus({ api, emit, props, state }),
deleteTag: deleteTag({ api, constants, emit, props, vm, nextTick, state }),
watchValue: watchValue({ api, constants, dispatch, props, vm, state }),
- toHide: toHide({ constants, state, props, vm, api }),
+ toHide: toHide({ constants, state, props, vm, api, nextTick }),
toVisible: toVisible({ constants, state, props, vm, api, nextTick }),
setSelected: setSelected({ api, constants, nextTick, props, vm, state }),
selectOption: selectOption({ api, state, props }),
diff --git a/packages/renderless/src/time-line/index.ts b/packages/renderless/src/time-line/index.ts
index 8c76db5f36..93a6770abf 100644
--- a/packages/renderless/src/time-line/index.ts
+++ b/packages/renderless/src/time-line/index.ts
@@ -125,3 +125,11 @@ export const computedWrapperClass =
return wrapperClass
}
+
+export const toggleFold =
+ ({ props }) =>
+ (node: ITimelineItem): boolean => {
+ const isFold = !props.data[node.index].fold
+ props.data[node.index].fold = isFold
+ return isFold
+ }
\ No newline at end of file
diff --git a/packages/renderless/src/time-line/vue.ts b/packages/renderless/src/time-line/vue.ts
index ccdd0b105c..97d36b75c6 100644
--- a/packages/renderless/src/time-line/vue.ts
+++ b/packages/renderless/src/time-line/vue.ts
@@ -21,7 +21,8 @@ import {
changeStatus,
computedStackNodes,
computedSpace,
- computedWrapperClass
+ computedWrapperClass,
+ toggleFold
} from './index'
import type {
ITimelineApi,
@@ -32,7 +33,7 @@ import type {
ITimelineItem
} from '@/types'
-export const api = ['state', 'handleClick', 'getStatusCls', 'getStatus', 'getDate', 'changeStatus']
+export const api = ['state', 'handleClick', 'getStatusCls', 'getStatus', 'getDate', 'changeStatus', 'toggleFold']
export const renderless = (
props: ITimelineProps,
@@ -64,7 +65,8 @@ export const renderless = (
getStatusCls: getStatusCls({ constants, state }),
computedStackNodes: computedStackNodes({ state, constants }),
changeStatus: changeStatus({ state }),
- computedWrapperClass: computedWrapperClass({ props })
+ computedWrapperClass: computedWrapperClass({ props }),
+ toggleFold: toggleFold({ props })
})
provide('nodesInject', { timelineItems: state.timelineItems, nodes: state.nodes, props })
diff --git a/packages/renderless/src/tree/index.ts b/packages/renderless/src/tree/index.ts
index 68b91973bf..c9150134ef 100644
--- a/packages/renderless/src/tree/index.ts
+++ b/packages/renderless/src/tree/index.ts
@@ -268,6 +268,27 @@ export const dragEnd =
dragState.showDropIndicator = false
}
+const afterLoadHandler =
+ ({ state, emit, props, api }) =>
+ (params) => {
+ const { lazy, afterLoad, showRadio } = props
+ state.loaded = true
+ if (lazy) {
+ if (state.root) {
+ state.root.childNodes = [...state.root.childNodes]
+ }
+
+ if (showRadio) {
+ api.setCurrentRadio()
+ }
+ }
+ emit('load-data', params)
+
+ if (typeof afterLoad === 'function') {
+ afterLoad(params)
+ }
+ }
+
export const initTreeStore =
({ api, props, state, emit }) =>
() => {
@@ -280,12 +301,7 @@ export const initTreeStore =
lazy,
props: props.props,
load,
- afterLoad(params) {
- !state.loaded && (state.loaded = true)
- lazy && state.root && (state.root.childNodes = [...state.root.childNodes])
- emit('load-data', params)
- afterLoad && afterLoad(params)
- },
+ afterLoad: afterLoadHandler({ api, emit, props, state }),
currentNodeKey,
checkStrictly,
checkDescendants,
diff --git a/packages/renderless/types/dropdown-item.type.ts b/packages/renderless/types/dropdown-item.type.ts
index c54c29e241..11f9ec4ce6 100644
--- a/packages/renderless/types/dropdown-item.type.ts
+++ b/packages/renderless/types/dropdown-item.type.ts
@@ -27,9 +27,7 @@ import type {
export type IDropdownItemVm = ComponentPublicInstance & {
type: string
toggle: (value: boolean, options?: object) => void
- state: {
- showPopup: boolean
- }
+ state: IDropdownItemState
} & IDropdownItemProps
export type IDropdownItemProps = ExtractPropTypes
diff --git a/packages/renderless/types/time-line.type.ts b/packages/renderless/types/time-line.type.ts
index 7e2ed53339..195945b544 100644
--- a/packages/renderless/types/time-line.type.ts
+++ b/packages/renderless/types/time-line.type.ts
@@ -12,6 +12,7 @@
import type { ExtractPropTypes } from 'vue'
import { timelineProps, $constants } from '@/time-line/src'
+import { toggleFold } from 'src/time-line'
import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type'
import type { ITimelineItem } from './timeline-item.type'
@@ -47,6 +48,7 @@ export interface ITimelineApi {
computedStackNodes: () => ITimelineItem[]
changeStatus: () => boolean
computedWrapperClass: () => ITimelineCustomCls
+ toggleFold: ReturnType
}
export type ITimelineRenderlessParams = ISharedRenderlessFunctionParams & {
diff --git a/packages/renderless/types/timeline-item.type.ts b/packages/renderless/types/timeline-item.type.ts
index 72999d735f..594ba375b2 100644
--- a/packages/renderless/types/timeline-item.type.ts
+++ b/packages/renderless/types/timeline-item.type.ts
@@ -71,6 +71,7 @@ export interface ITimelineItem {
error: boolean
disabled: boolean
type: TimelineItemType
+ fold?: boolean
}
export interface ITimelineInject {
diff --git a/packages/theme/src/dropdown-item/index.less b/packages/theme/src/dropdown-item/index.less
index 2906bb0260..b866b2e4e9 100644
--- a/packages/theme/src/dropdown-item/index.less
+++ b/packages/theme/src/dropdown-item/index.less
@@ -61,6 +61,13 @@
.@{dropdown-item-prefix-cls}__content {
display: flex;
align-items: center;
+ width: 100%;
+
+ .@{dropdown-item-prefix-cls}__label {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
.@{svg-prefix-cls} {
margin-right: 4px;
diff --git a/packages/theme/src/dropdown/index.less b/packages/theme/src/dropdown/index.less
index 63a155f1bb..b55e311ffd 100644
--- a/packages/theme/src/dropdown/index.less
+++ b/packages/theme/src/dropdown/index.less
@@ -51,19 +51,20 @@
fill: var(--ti-button-normal-text-color);
}
- &:not(.@{dropdown-prefix-cls}__caret-button):hover {
+ &:not(.@{dropdown-prefix-cls}__caret-button):not(.is-disabled):hover {
color: var(--ti-dropdown-text-color-hover);
.@{svg-prefix-cls} {
fill: var(--ti-dropdown-icon-color-hover);
}
+ }
- &[disabled] {
- color: var(--ti-dropdown-text-color-disabled);
+ &.is-disabled {
+ cursor: not-allowed;
+ color: var(--ti-dropdown-text-color-disabled);
- .@{svg-prefix-cls} {
- fill: var(--ti-dropdown-text-color-disabled);
- }
+ .@{svg-prefix-cls} {
+ fill: var(--ti-dropdown-text-color-disabled);
}
}
}
@@ -91,6 +92,10 @@
.@{dropdown-prefix-cls}__title-button {
padding-left: var(--ti-dropdown-title-button-padding-left);
padding-right: var(--ti-dropdown-title-button-padding-right);
+
+ &.is-disabled.tiny-button--default:hover {
+ z-index: 0;
+ }
}
.@{dropdown-prefix-cls}__caret-button {
@@ -117,7 +122,7 @@
background: var(--ti-dropdown-caret-line-bg-color-default);
}
- &.@{css-prefix}button--default:hover:before {
+ &.@{css-prefix}button--default:hover:not(.is-disabled):before {
background-color: var(--ti-dropdown-caret-line-bg-color-default-hover);
}
@@ -137,15 +142,6 @@
outline-width: 0;
}
- [disabled] {
- cursor: not-allowed;
- color: var(--ti-dropdown-text-color-disabled);
-
- svg {
- fill: var(--ti-dropdown-text-color-disabled);
- }
- }
-
&:hover {
cursor: pointer;
}
diff --git a/packages/theme/src/form-item/index.less b/packages/theme/src/form-item/index.less
index 19856cdab6..7f334312c4 100644
--- a/packages/theme/src/form-item/index.less
+++ b/packages/theme/src/form-item/index.less
@@ -241,6 +241,8 @@
&.is-error {
.@{input-prefix-cls}__inner,
.@{input-prefix-cls}__inner:focus,
+ .@{textarea-prefix-cls},
+ .@{textarea-prefix-cls}:focus,
.@{textarea-prefix-cls}__inner,
.@{textarea-prefix-cls}__inner:focus {
border-color: var(--ti-form-item-error-border-color);
diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less
index 0f7b0773a9..3a8d1969ce 100644
--- a/packages/theme/src/tree-menu/vars.less
+++ b/packages/theme/src/tree-menu/vars.less
@@ -38,5 +38,5 @@
// 节点序号字号
--tree-menu-node-number-font-size: var(--ti-common-font-size-base);
// 活跃节点竖线与文本的间距
- --tree-menu-node-vertical-line-margin-right: var(--ti-common-size-5x);
+ --tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x);
}
diff --git a/packages/theme/src/tree/index.less b/packages/theme/src/tree/index.less
index a233989a47..731ba95eb1 100644
--- a/packages/theme/src/tree/index.less
+++ b/packages/theme/src/tree/index.less
@@ -313,11 +313,6 @@
}
}
- &.is-root {
- .@{tree-node-prefix-cls}__content-box {
- padding-left: 0;
- }
- }
&.is-leaf:not(.is-root) {
.@{tree-node-prefix-cls}__content {
@@ -354,7 +349,7 @@
}
}
- & label.@{css-prefix}checkbox {
+ & label.@{css-prefix}checkbox, .@{css-prefix}radio {
margin: 0 calc(var(--ti-tree-node-label-margin-left) / 2);
}
@@ -478,8 +473,6 @@
}
.@{radio-prefix-cls} {
- margin-right: 0;
-
.@{radio-prefix-cls}__label {
display: none;
}
diff --git a/packages/vue/src/dropdown-item/src/pc.vue b/packages/vue/src/dropdown-item/src/pc.vue
index f1ba53b6e3..a80a7c8e99 100644
--- a/packages/vue/src/dropdown-item/src/pc.vue
+++ b/packages/vue/src/dropdown-item/src/pc.vue
@@ -35,9 +35,11 @@