From d15e75bb3f6ab3de3b945facc268fc6bb2040947 Mon Sep 17 00:00:00 2001 From: xingyu <xingyu4j@vip.qq.com> Date: Tue, 26 Sep 2023 10:02:52 +0800 Subject: [PATCH] fix: button color --- src/components/Button/src/BasicButton.vue | 27 +++++++++++++++++++---- src/components/Button/src/props.ts | 6 ++++- src/views/base/login/LoginForm.vue | 10 +++++++-- 3 files changed, 36 insertions(+), 7 deletions(-) diff --git a/src/components/Button/src/BasicButton.vue b/src/components/Button/src/BasicButton.vue index c3490fde..9072c56a 100644 --- a/src/components/Button/src/BasicButton.vue +++ b/src/components/Button/src/BasicButton.vue @@ -1,13 +1,14 @@ <script lang="ts" setup> -import { Button } from 'ant-design-vue' +import { Button, theme } from 'ant-design-vue' import { computed, unref } from 'vue' import { buttonProps } from './props' -import { Icon } from '@/components/Icon' import { useAttrs } from '@/hooks/core/useAttrs' +import { Icon } from '@/components/Icon' defineOptions({ name: 'AButton', extends: Button, indeterminate: false }) - const props = defineProps(buttonProps) +const { useToken } = theme +const { token } = useToken() // get component class const attrs = useAttrs({ excludeDefaultKeys: false }) const getButtonClass = computed(() => { @@ -24,7 +25,25 @@ const getBindValue = computed(() => ({ ...unref(attrs), ...props })) </script> <template> - <Button v-bind="getBindValue" :style="{ backgroundColor: color }" :class="getButtonClass" @click="onClick"> + <Button + v-bind="getBindValue" :style="{ + backgroundColor: color + ? ( + color === 'primary' + ? token.colorPrimary + : ( + color === 'error' + ? token.colorError + : ( + color === 'warning' + ? token.colorWarning + : (color === 'success' ? token.colorSuccess : '') + ) + ) + ) + : '', + }" :class="getButtonClass" @click="onClick" + > <template #default="data"> <Icon v-if="preIcon" :icon="preIcon" :size="iconSize" /> <slot v-bind="data || {}" /> diff --git a/src/components/Button/src/props.ts b/src/components/Button/src/props.ts index a50d8f4c..d2a9a5ba 100644 --- a/src/components/Button/src/props.ts +++ b/src/components/Button/src/props.ts @@ -1,6 +1,10 @@ +const validColors = ['primary', 'error', 'warning', 'success', ''] as const +type ButtonColorType = (typeof validColors)[number] + export const buttonProps = { color: { - type: String, + type: String as PropType<ButtonColorType>, + validator: v => validColors.includes(v), default: '', }, loading: { type: Boolean }, diff --git a/src/views/base/login/LoginForm.vue b/src/views/base/login/LoginForm.vue index 358665f1..1e53d162 100644 --- a/src/views/base/login/LoginForm.vue +++ b/src/views/base/login/LoginForm.vue @@ -112,7 +112,10 @@ async function handleLogin(params) { <template> <LoginFormTitle v-show="getShow" class="enter-x" /> - <Form v-show="getShow" ref="formRef" class="enter-x p-4" :model="formData" :rules="getFormRules" @keypress.enter="handleLogin"> + <Form + v-show="getShow" ref="formRef" class="enter-x p-4" :model="formData" :rules="getFormRules" + @keypress.enter="handleLogin" + > <FormItem name="tenantName" class="enter-x"> <Input v-if="tenantEnable === 'true'" @@ -123,7 +126,10 @@ async function handleLogin(params) { /> </FormItem> <FormItem name="username" class="enter-x"> - <Input v-model:value="formData.username" size="large" :placeholder="t('sys.login.userName')" class="fix-auto-fill" /> + <Input + v-model:value="formData.username" size="large" :placeholder="t('sys.login.userName')" + class="fix-auto-fill" + /> </FormItem> <FormItem name="password" class="enter-x"> <InputPassword