50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<template>
|
|
<Button v-if="buttonProps" v-bind="buttonProps">
|
|
<template
|
|
v-for="(slot, slotName) in buttonProps.slots"
|
|
v-slot:[slotName]="slotProps"
|
|
>
|
|
<component :is="slot" v-bind="slotProps" />
|
|
</template>
|
|
</Button>
|
|
<Dropdown v-else-if="dropdownProps" v-bind="dropdownProps">
|
|
<ActionButton v-bind="dropdownProps.button" />
|
|
</Dropdown>
|
|
</template>
|
|
<script>
|
|
import { Button, Dropdown } from 'jingrow-ui';
|
|
import { icon } from '../utils/components';
|
|
|
|
export default {
|
|
name: 'ActionButton',
|
|
components: {
|
|
Button,
|
|
Dropdown
|
|
},
|
|
computed: {
|
|
buttonProps() {
|
|
if (!this.$attrs.label || this.$attrs.options) return null;
|
|
return this.$attrs;
|
|
},
|
|
|
|
dropdownProps() {
|
|
if (!this.$attrs.options) return null;
|
|
if (this.$attrs.condition) {
|
|
if (!this.$attrs.condition(this.$attrs.context)) return null;
|
|
}
|
|
return {
|
|
button: {
|
|
label: '选项',
|
|
variant: 'ghost',
|
|
slots: {
|
|
icon: icon('more-horizontal')
|
|
}
|
|
},
|
|
...this.$attrs,
|
|
label: this.$attrs.label,
|
|
options: this.$attrs.options
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script> |