Skip to content

Commit 5ecc45a

Browse files
3octaves3octaves
committed
fix(frontend): 修复dropdownmenu下的button点击区域问题 #10392 
1 parent bba548c commit 5ecc45a

File tree

17 files changed

+118
-154
lines changed

17 files changed

+118
-154
lines changed

‎dbm-ui/frontend/src/components/more-action-extend/Index.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
type="down-shape" />
1919
</div>
2020
<template #content>
21-
<BkDropdownMenu>
21+
<BkDropdownMenu class="dropdown-menu-with-button">
2222
<slot />
2323
</BkDropdownMenu>
2424
</template>

‎dbm-ui/frontend/src/styles/common.less

+12
Original file line numberDiff line numberDiff line change
@@ -558,3 +558,15 @@
558558
margin-left: 4px;
559559
}
560560
}
561+
562+
.dropdown-menu-with-button {
563+
.bk-dropdown-item {
564+
padding: 0 !important;
565+
566+
.bk-button {
567+
height: 100%;
568+
width: 100%;
569+
padding: 0 16px;
570+
}
571+
}
572+
}

‎dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/Index.vue

+1-14
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
type="up-big " />
3333
</BkButton>
3434
<template #content>
35-
<BkDropdownMenu class="cluster-batch-operation-popover">
35+
<BkDropdownMenu class="dropdown-menu-with-button">
3636
<Component
3737
:is="content"
3838
v-model:side-slider-show="sideSliderShow"
@@ -138,19 +138,6 @@
138138
};
139139
</script>
140140

141-
<style lang="less">
142-
.cluster-batch-operation-popover {
143-
.bk-dropdown-item {
144-
padding: 0;
145-
146-
.opration-button {
147-
width: 100%;
148-
padding: 0 16px;
149-
}
150-
}
151-
}
152-
</style>
153-
154141
<style lang="less" scoped>
155142
.cluster-batch-operation {
156143
.cluster-batch-operation-icon {

‎dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/components/mongo-replica-set/Index.vue

+12-16
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<template>
2-
<BkDropdownItem
3-
v-db-console="'mongodb.replicaSetList.batchAuthorize'"
4-
@click="clusterAuthorizeShow = true">
2+
<BkDropdownItem v-db-console="'mongodb.replicaSetList.batchAuthorize'">
53
<BkButton
64
v-bk-tooltips="{
75
disabled: !batchAuthorizeDisabled,
@@ -10,7 +8,8 @@
108
}"
119
class="opration-button"
1210
:disabled="batchAuthorizeDisabled"
13-
text>
11+
text
12+
@click="clusterAuthorizeShow = true">
1413
{{ t('批量授权') }}
1514
</BkButton>
1615
</BkDropdownItem>
@@ -32,9 +31,7 @@
3231
{{ t('移除标签') }}
3332
</BkButton>
3433
</BkDropdownItem>
35-
<BkDropdownItem
36-
v-db-console="'mongodb.replicaSetList.disable'"
37-
@click="handleDisableCluster(selected)">
34+
<BkDropdownItem v-db-console="'mongodb.replicaSetList.disable'">
3835
<BkButton
3936
v-bk-tooltips="{
4037
disabled: !batchDisabledDisabled,
@@ -43,13 +40,12 @@
4340
}"
4441
class="opration-button"
4542
:disabled="batchDisabledDisabled"
46-
text>
43+
text
44+
@click="handleDisableCluster(selected)">
4745
{{ t('禁用') }}
4846
</BkButton>
4947
</BkDropdownItem>
50-
<BkDropdownItem
51-
v-db-console="'mongodb.replicaSetList.enable'"
52-
@click="handleEnableCluster(selected)">
48+
<BkDropdownItem v-db-console="'mongodb.replicaSetList.enable'">
5349
<BkButton
5450
v-bk-tooltips="{
5551
disabled: !batchEnableDisabled,
@@ -58,13 +54,12 @@
5854
}"
5955
class="opration-button"
6056
:disabled="batchEnableDisabled"
61-
text>
57+
text
58+
@click="handleEnableCluster(selected)">
6259
{{ t('启用') }}
6360
</BkButton>
6461
</BkDropdownItem>
65-
<BkDropdownItem
66-
v-db-console="'mongodb.replicaSetList.delete'"
67-
@click="handleDeleteCluster(selected)">
62+
<BkDropdownItem v-db-console="'mongodb.replicaSetList.delete'">
6863
<BkButton
6964
v-bk-tooltips="{
7065
disabled: !batchDeleteDisabled,
@@ -73,7 +68,8 @@
7368
}"
7469
class="opration-button"
7570
:disabled="batchDeleteDisabled"
76-
text>
71+
text
72+
@click="handleDeleteCluster(selected)">
7773
{{ t('删除') }}
7874
</BkButton>
7975
</BkDropdownItem>

‎dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/components/mongo-sharded-cluster/Index.vue

+12-16
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<template>
2-
<BkDropdownItem
3-
v-db-console="'mongodb.sharedClusterList.batchAuthorize'"
4-
@click="clusterAuthorizeShow = true">
2+
<BkDropdownItem v-db-console="'mongodb.sharedClusterList.batchAuthorize'">
53
<BkButton
64
v-bk-tooltips="{
75
disabled: !batchAuthorizeDisabled,
@@ -10,7 +8,8 @@
108
}"
119
class="opration-button"
1210
:disabled="batchAuthorizeDisabled"
13-
text>
11+
text
12+
@click="clusterAuthorizeShow = true">
1413
{{ t('批量授权') }}
1514
</BkButton>
1615
</BkDropdownItem>
@@ -32,9 +31,7 @@
3231
{{ t('移除标签') }}
3332
</BkButton>
3433
</BkDropdownItem>
35-
<BkDropdownItem
36-
v-db-console="'mongodb.sharedClusterList.disable'"
37-
@click="handleDisableCluster(selected)">
34+
<BkDropdownItem v-db-console="'mongodb.sharedClusterList.disable'">
3835
<BkButton
3936
v-bk-tooltips="{
4037
disabled: !batchDisabledDisabled,
@@ -43,13 +40,12 @@
4340
}"
4441
class="opration-button"
4542
:disabled="batchDisabledDisabled"
46-
text>
43+
text
44+
@click="handleDisableCluster(selected)">
4745
{{ t('禁用') }}
4846
</BkButton>
4947
</BkDropdownItem>
50-
<BkDropdownItem
51-
v-db-console="'mongodb.sharedClusterList.enable'"
52-
@click="handleEnableCluster(selected)">
48+
<BkDropdownItem v-db-console="'mongodb.sharedClusterList.enable'">
5349
<BkButton
5450
v-bk-tooltips="{
5551
disabled: !batchEnableDisabled,
@@ -58,13 +54,12 @@
5854
}"
5955
class="opration-button"
6056
:disabled="batchEnableDisabled"
61-
text>
57+
text
58+
@click="handleEnableCluster(selected)">
6259
{{ t('启用') }}
6360
</BkButton>
6461
</BkDropdownItem>
65-
<BkDropdownItem
66-
v-db-console="'mongodb.sharedClusterList.delete'"
67-
@click="handleDeleteCluster(selected)">
62+
<BkDropdownItem v-db-console="'mongodb.sharedClusterList.delete'">
6863
<BkButton
6964
v-bk-tooltips="{
7065
disabled: !batchDeleteDisabled,
@@ -73,7 +68,8 @@
7368
}"
7469
class="opration-button"
7570
:disabled="batchDeleteDisabled"
76-
text>
71+
text
72+
@click="handleDeleteCluster(selected)">
7773
{{ t('删除') }}
7874
</BkButton>
7975
</BkDropdownItem>

‎dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/components/redis-ha/Index.vue

+9-12
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,7 @@
7777
{{ t('移除标签') }}
7878
</BkButton>
7979
</BkDropdownItem>
80-
<BkDropdownItem
81-
v-db-console="'redis.haClusterManage.disable'"
82-
@click="handleDisableCluster(selected)">
80+
<BkDropdownItem v-db-console="'redis.haClusterManage.disable'">
8381
<BkButton
8482
v-bk-tooltips="{
8583
disabled: !batchDisabledDisabled,
@@ -88,13 +86,12 @@
8886
}"
8987
class="opration-button"
9088
:disabled="batchDisabledDisabled"
91-
text>
89+
text
90+
@click="handleDisableCluster(selected)">
9291
{{ t('禁用') }}
9392
</BkButton>
9493
</BkDropdownItem>
95-
<BkDropdownItem
96-
v-db-console="'redis.haClusterManage.enable'"
97-
@click="handleEnableCluster(selected)">
94+
<BkDropdownItem v-db-console="'redis.haClusterManage.enable'">
9895
<BkButton
9996
v-bk-tooltips="{
10097
disabled: !batchEnableDisabled,
@@ -103,13 +100,12 @@
103100
}"
104101
class="opration-button"
105102
:disabled="batchEnableDisabled"
106-
text>
103+
text
104+
@click="handleEnableCluster(selected)">
107105
{{ t('启用') }}
108106
</BkButton>
109107
</BkDropdownItem>
110-
<BkDropdownItem
111-
v-db-console="'redis.haClusterManage.delete'"
112-
@click="handleDeleteCluster(selected)">
108+
<BkDropdownItem v-db-console="'redis.haClusterManage.delete'">
113109
<BkButton
114110
v-bk-tooltips="{
115111
disabled: !batchDeleteDisabled,
@@ -118,7 +114,8 @@
118114
}"
119115
class="opration-button"
120116
:disabled="batchDeleteDisabled"
121-
text>
117+
text
118+
@click="handleDeleteCluster(selected)">
122119
{{ t('删除') }}
123120
</BkButton>
124121
</BkDropdownItem>

‎dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/components/sqlserver-ha/Index.vue

+12-16
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<template>
2-
<BkDropdownItem
3-
v-db-console="'sqlserver.haClusterList.batchAuthorize'"
4-
@click="clusterAuthorizeShow = true">
2+
<BkDropdownItem v-db-console="'sqlserver.haClusterList.batchAuthorize'">
53
<BkButton
64
v-bk-tooltips="{
75
disabled: !batchAuthorizeDisabled,
@@ -10,7 +8,8 @@
108
}"
119
class="opration-button"
1210
:disabled="batchAuthorizeDisabled"
13-
text>
11+
text
12+
@click="clusterAuthorizeShow = true">
1413
{{ t('批量授权') }}
1514
</BkButton>
1615
</BkDropdownItem>
@@ -32,9 +31,7 @@
3231
{{ t('移除标签') }}
3332
</BkButton>
3433
</BkDropdownItem>
35-
<BkDropdownItem
36-
v-db-console="'sqlserver.haClusterList.disable'"
37-
@click="handleDisableCluster(selected)">
34+
<BkDropdownItem v-db-console="'sqlserver.haClusterList.disable'">
3835
<BkButton
3936
v-bk-tooltips="{
4037
disabled: !batchDisabledDisabled,
@@ -43,13 +40,12 @@
4340
}"
4441
class="opration-button"
4542
:disabled="batchDisabledDisabled"
46-
text>
43+
text
44+
@click="handleDisableCluster(selected)">
4745
{{ t('禁用') }}
4846
</BkButton>
4947
</BkDropdownItem>
50-
<BkDropdownItem
51-
v-db-console="'sqlserver.haClusterList.enable'"
52-
@click="handleEnableCluster(selected)">
48+
<BkDropdownItem v-db-console="'sqlserver.haClusterList.enable'">
5349
<BkButton
5450
v-bk-tooltips="{
5551
disabled: !batchEnableDisabled,
@@ -58,13 +54,12 @@
5854
}"
5955
class="opration-button"
6056
:disabled="batchEnableDisabled"
61-
text>
57+
text
58+
@click="handleEnableCluster(selected)">
6259
{{ t('启用') }}
6360
</BkButton>
6461
</BkDropdownItem>
65-
<BkDropdownItem
66-
v-db-console="'sqlserver.haClusterList.delete'"
67-
@click="handleDeleteCluster(selected)">
62+
<BkDropdownItem v-db-console="'sqlserver.haClusterList.delete'">
6863
<BkButton
6964
v-bk-tooltips="{
7065
disabled: !batchDeleteDisabled,
@@ -73,7 +68,8 @@
7368
}"
7469
class="opration-button"
7570
:disabled="batchDeleteDisabled"
76-
text>
71+
text
72+
@click="handleDeleteCluster(selected)">
7773
{{ t('删除') }}
7874
</BkButton>
7975
</BkDropdownItem>

0 commit comments

Comments
 (0)