fix: button color
parent
a710ffc8c3
commit
d15e75bb3f
|
@ -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 || {}" />
|
||||
|
|
|
@ -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 },
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue