| 提交 | 用户 | age | ||
| 73c8e0 | 1 | <template> |
| cda0f9 | 2 | <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick"> |
| 73c8e0 | 3 | <template #default="data"> |
| cda0f9 | 4 | <Icon :icon="preIcon" v-if="preIcon" :size="iconSize" /> |
| 9edc28 | 5 | <slot v-bind="data"></slot> |
| cda0f9 | 6 | <Icon :icon="postIcon" v-if="postIcon" :size="iconSize" /> |
| 73c8e0 | 7 | </template> |
| V | 8 | </Button> |
| 9 | </template> | |
| 10 | <script lang="ts"> | |
| 11 | import { defineComponent, computed } from 'vue'; | |
| 12 | import { Button } from 'ant-design-vue'; | |
| acacb3 | 13 | import Icon from '/@/components/Icon/src/Icon.vue'; |
| b5046f | 14 | import { buttonProps } from './props'; |
| 73c8e0 | 15 | |
| V | 16 | export default defineComponent({ |
| 17 | name: 'AButton', | |
| 18 | components: { Button, Icon }, | |
| 9edc28 | 19 | inheritAttrs: false, |
| b5046f | 20 | props: buttonProps, |
| 73c8e0 | 21 | setup(props, { attrs }) { |
| cda0f9 | 22 | // get component class |
| V | 23 | const getButtonClass = computed(() => { |
| 73c8e0 | 24 | const { color, disabled } = props; |
| cda0f9 | 25 | return [ |
| V | 26 | { |
| 27 | [`ant-btn-${color}`]: !!color, | |
| 28 | [`is-disabled`]: disabled, | |
| 29 | }, | |
| 30 | attrs.class, | |
| 31 | ]; | |
| 73c8e0 | 32 | }); |
| V | 33 | |
| cda0f9 | 34 | // get inherit binding value |
| V | 35 | const getBindValue = computed(() => ({ ...attrs, ...props })); |
| 73c8e0 | 36 | |
| cda0f9 | 37 | return { getBindValue, getButtonClass }; |
| 73c8e0 | 38 | }, |
| V | 39 | }); |
| 40 | </script> | |
