feat: 新增带全选的下拉菜单

This commit is contained in:
Xu Zhimeng 2025-01-10 11:35:00 +08:00
parent 1417c101bf
commit 4d4ae0f58d
2 changed files with 74 additions and 0 deletions

View File

@ -0,0 +1,72 @@
<template>
<a-select v-bind="$attrs" v-model="innerValue" mode="multiple" allow-clear :options="options">
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 4px 0" />
<div style="padding: 4px 12px; cursor: pointer" @mousedown="(e) => e.preventDefault()">
<a-checkbox v-model="isSelectAll" :disabled="!options.length">
<span @click.prevent="isSelectAll = !isSelectAll"> ALL </span>
</a-checkbox>
</div>
</div>
</a-select>
</template>
<script>
export default {
props: {
value: {
type: [Array, Number],
default: () => [],
},
options: {
type: Array,
required: true,
},
},
components: {
VNodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes,
},
},
computed: {
innerValue: {
set(val) {
this.$emit('input', val)
},
get() {
return this.value
},
},
isSelectAll: {
set(val) {
if (val) {
this.$emit(
'input',
this.options.map((item) => item.value)
)
} else {
this.$emit('input', [])
}
},
get() {
return !!this.options.length && this.value.length === this.options.length
},
},
},
}
</script>
<style lang="less" scoped>
.ant-select {
width: 100%;
}
.ant-select-dropdown-content {
position: relative;
background: #03353f;
}
</style>

View File

@ -547,6 +547,8 @@ input[type='number']::-webkit-outer-spin-button {
.ant-select-dropdown-content {
border: 1px solid @borderColor;
overflow: visible !important;
transform: translateZ(0);
&::before {
position: absolute;
top: -6px;