fix: button color

pull/37/head
xingyu 2023-09-26 10:02:52 +08:00
parent a710ffc8c3
commit d15e75bb3f
3 changed files with 36 additions and 7 deletions

View File

@ -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 || {}" />

View File

@ -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 },

View File

@ -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