Skip to content

Commit 74ab0e2

Browse files
HeJiaYue520HeJiaYue520
committed
docs: 新增 Conversations 的是否始终展示更多按钮，同步更新中英文文档
1 parent ac8c178 commit 74ab0e2

File tree

9 files changed

+377
-62
lines changed

9 files changed

+377
-62
lines changed

‎apps/docs/.eslintrc-auto-import.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
"ComputedRef": true,
66
"DirectiveBinding": true,
77
"EffectScope": true,
8-
"ElButton": true,
98
"ElMessage": true,
10-
"ElTooltip": true,
119
"ExtractDefaultPropTypes": true,
1210
"ExtractPropTypes": true,
1311
"ExtractPublicPropTypes": true,
@@ -69,6 +67,7 @@
6967
"useId": true,
7068
"useModel": true,
7169
"useSlots": true,
70+
"useTemplateRef": true,
7271
"watch": true,
7372
"watchEffect": true,
7473
"watchPostEffect": true,

‎apps/docs/en/components/conversations/demos/built-in-menu-type.vue‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<docs>
2+
---
3+
title: Dropdown Menu Button Display Style
4+
---
5+
6+
Use the `showBuiltInMenuType` property to set whether to always display the built-in menu button.
7+
8+
The optional values for the `showBuiltInMenuType` property are:
9+
10+
- `hover`: Show built-in menu button on mouse hover (default)
11+
- `always`: Always show built-in menu button
12+
</docs>
13+
14+
<script setup lang="ts">
15+
import type {
16+
ConversationItem,
17+
ConversationMenuCommand
18+
} from 'vue-element-plus-x/types/Conversations';
19+
20+
const menuTestItems = ref([
21+
{
22+
key: 'm1',
23+
label:
24+
'Menu Test Item 1 - Long Text Effect Demo Text Length Overflow Effect Test'.repeat(
25+
2
26+
)
27+
},
28+
{
29+
key: 'm2',
30+
label: 'Menu Test Item 2',
31+
disabled: true
32+
},
33+
{
34+
key: 'm3',
35+
label: 'Menu Test Item 3'
36+
},
37+
{
38+
key: 'm4',
39+
label: 'Menu Test Item 4'
40+
},
41+
{
42+
key: 'm5',
43+
label: 'Menu Test Item 5'
44+
},
45+
{
46+
key: 'm6',
47+
label: 'Menu Test Item 6'
48+
},
49+
{
50+
key: 'm7',
51+
label: 'Menu Test Item 7'
52+
},
53+
{
54+
key: 'm8',
55+
label: 'Menu Test Item 8'
56+
},
57+
{
58+
key: 'm9',
59+
label: 'Menu Test Item 9'
60+
},
61+
{
62+
key: 'm10',
63+
label: 'Menu Test Item 10'
64+
},
65+
{
66+
key: 'm11',
67+
label: 'Menu Test Item 11'
68+
},
69+
{
70+
key: 'm12',
71+
label: 'Menu Test Item 12'
72+
},
73+
{
74+
key: 'm13',
75+
label: 'Menu Test Item 13'
76+
},
77+
{
78+
key: 'm14',
79+
label: 'Menu Test Item 14'
80+
}
81+
]);
82+
83+
const activeKey4 = ref('m1');
84+
85+
// Built-in menu click method
86+
function handleMenuCommand(
87+
command: ConversationMenuCommand,
88+
item: ConversationItem
89+
) {
90+
console.log('Built-in menu click event:', command, item);
91+
// Check if directly modifying item works
92+
if (command === 'delete') {
93+
const index = menuTestItems.value.findIndex(
94+
itemSelf => itemSelf.key === item.key
95+
);
96+
97+
if (index !== -1) {
98+
menuTestItems.value.splice(index, 1);
99+
console.log('Deletion successful');
100+
ElMessage.success('Deletion successful');
101+
}
102+
}
103+
if (command === 'rename') {
104+
item.label = 'Modified';
105+
console.log('Renaming successful');
106+
ElMessage.success('Renaming successful');
107+
}
108+
}
109+
</script>
110+
111+
<template>
112+
<div style="display: flex; flex-direction: column; gap: 12px; height: 420px">
113+
<Conversations
114+
v-model:active="activeKey4"
115+
:items="menuTestItems"
116+
:label-max-width="200"
117+
:show-tooltip="true"
118+
row-key="key"
119+
tooltip-placement="right"
120+
:tooltip-offset="35"
121+
show-to-top-btn
122+
show-built-in-menu
123+
show-built-in-menu-type="always"
124+
@menu-command="handleMenuCommand"
125+
/>
126+
</div>
127+
</template>
128+
129+
<style scoped lang="less"></style>

‎apps/docs/en/components/conversations/index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222

2323
<demo src="./demos/built-in-menu.vue"></demo>
2424

25+
### Built-in Dropdown Menu Button Type
26+
27+
<demo src="./demos/built-in-menu-type.vue"></demo>
28+
2529
### Custom Menu Interaction
2630

2731
<demo src="./demos/custom-menu.vue"></demo>

‎apps/docs/zh/components/conversations/demos/built-in-menu-type.vue‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<docs>
2+
---
3+
title: 下拉菜单按钮展示风格
4+
---
5+
6+
使用 `showBuiltInMenuType` 属性，可以设置是否总是显示内置菜单按钮。
7+
8+
`showBuiltInMenuType` 属性的可选值有：
9+
10+
- `hover`：鼠标悬停时显示内置菜单按钮（默认）
11+
- `always`：总是显示内置菜单按钮
12+
</docs>
13+
14+
<script setup lang="ts">
15+
import type {
16+
ConversationItem,
17+
ConversationMenuCommand
18+
} from 'vue-element-plus-x/types/Conversations';
19+
20+
const menuTestItems = ref([
21+
{
22+
key: 'm1',
23+
label: '菜单测试项目 1 - 长文本效果演示文本长度溢出效果测试'.repeat(2)
24+
},
25+
{
26+
key: 'm2',
27+
label: '菜单测试项目 2',
28+
disabled: true
29+
},
30+
{
31+
key: 'm3',
32+
label: '菜单测试项目 3'
33+
},
34+
{
35+
key: 'm4',
36+
label: '菜单测试项目 4'
37+
},
38+
{
39+
key: 'm5',
40+
label: '菜单测试项目 5'
41+
},
42+
{
43+
key: 'm6',
44+
label: '菜单测试项目 6'
45+
},
46+
{
47+
key: 'm7',
48+
label: '菜单测试项目 7'
49+
},
50+
{
51+
key: 'm8',
52+
label: '菜单测试项目 8'
53+
},
54+
{
55+
key: 'm9',
56+
label: '菜单测试项目 9'
57+
},
58+
{
59+
key: 'm10',
60+
label: '菜单测试项目 10'
61+
},
62+
{
63+
key: 'm11',
64+
label: '菜单测试项目 11'
65+
},
66+
{
67+
key: 'm12',
68+
label: '菜单测试项目 12'
69+
},
70+
{
71+
key: 'm13',
72+
label: '菜单测试项目 13'
73+
},
74+
{
75+
key: 'm14',
76+
label: '菜单测试项目 14'
77+
}
78+
]);
79+
80+
const activeKey4 = ref('m1');
81+
82+
// 内置菜单点击方法
83+
function handleMenuCommand(
84+
command: ConversationMenuCommand,
85+
item: ConversationItem
86+
) {
87+
console.log('内置菜单点击事件：', command, item);
88+
// 直接修改 item 是否生效
89+
if (command === 'delete') {
90+
const index = menuTestItems.value.findIndex(
91+
itemSlef => itemSlef.key === item.key
92+
);
93+
94+
if (index !== -1) {
95+
menuTestItems.value.splice(index, 1);
96+
console.log('删除成功');
97+
ElMessage.success('删除成功');
98+
}
99+
}
100+
if (command === 'rename') {
101+
item.label = '已修改';
102+
console.log('重命名成功');
103+
ElMessage.success('重命名成功');
104+
}
105+
}
106+
</script>
107+
108+
<template>
109+
<div style="display: flex; flex-direction: column; gap: 12px; height: 420px">
110+
<Conversations
111+
v-model:active="activeKey4"
112+
:items="menuTestItems"
113+
:label-max-width="200"
114+
:show-tooltip="true"
115+
row-key="key"
116+
tooltip-placement="right"
117+
:tooltip-offset="35"
118+
show-to-top-btn
119+
show-built-in-menu
120+
show-built-in-menu-type="always"
121+
@menu-command="handleMenuCommand"
122+
/>
123+
</div>
124+
</template>
125+
126+
<style scoped lang="less"></style>

‎apps/docs/zh/components/conversations/index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222

2323
<demo src="./demos/built-in-menu.vue"></demo>
2424

25+
### 内置下拉菜单按钮展示风格
26+
27+
<demo src="./demos/built-in-menu-type.vue"></demo>
28+
2529
### 自定义菜单交互
2630

2731
<demo src="./demos/custom-menu.vue"></demo>

‎packages/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-element-plus-x",
33
"type": "module",
4-
"version": "1.3.4",
4+
"version": "1.3.5",
55
"license": "MIT",
66
"homepage": "https://element-plus-x.com",
77
"repository": {

0 commit comments

Comments
 (0)