fix: button bg color
xingyu
parent
e0f5b4ff15
commit
f4b012eaaf
|
|
@ -11,10 +11,9 @@ const props = defineProps(buttonProps)
|
|||
// get component class
|
||||
const attrs = useAttrs({ excludeDefaultKeys: false })
|
||||
const getButtonClass = computed(() => {
|
||||
const { color, disabled } = props
|
||||
const { disabled } = props
|
||||
return [
|
||||
{
|
||||
[`ant-btn-${color}`]: !!color,
|
||||
'is-disabled': disabled,
|
||||
},
|
||||
]
|
||||
|
|
@ -25,7 +24,7 @@ const getBindValue = computed(() => ({ ...unref(attrs), ...props }))
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Button v-bind="getBindValue" :class="getButtonClass" @click="onClick">
|
||||
<Button v-bind="getBindValue" :style="{ backgroundColor: color }" :class="getButtonClass" @click="onClick">
|
||||
<template #default="data">
|
||||
<Icon v-if="preIcon" :icon="preIcon" :size="iconSize" />
|
||||
<slot v-bind="data || {}" />
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
const validColors = ['primary', 'error', 'warning', 'success', ''] as const
|
||||
type ButtonColorType = (typeof validColors)[number]
|
||||
|
||||
export const buttonProps = {
|
||||
color: {
|
||||
type: String as PropType<ButtonColorType>,
|
||||
validator: v => validColors.includes(v),
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
loading: { type: Boolean },
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const props = defineProps({
|
|||
value: { type: [Object, Number, String, Array] },
|
||||
count: { type: Number, default: 60 },
|
||||
beforeStartFunc: {
|
||||
type: Function as PropType<() => Promise<boolean>>,
|
||||
type: Function as PropType<() => Promise<any>>,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
|
@ -38,7 +38,9 @@ async function handleStart() {
|
|||
loading.value = true
|
||||
try {
|
||||
const canStart = await beforeStartFunc()
|
||||
canStart && start()
|
||||
if (canStart)
|
||||
start()
|
||||
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const props = defineProps({
|
|||
size: { type: String, validator: (v: string) => ['default', 'large', 'small'].includes(v) },
|
||||
count: { type: Number, default: 60 },
|
||||
sendCodeApi: {
|
||||
type: Function as PropType<() => Promise<boolean>>,
|
||||
type: Function as PropType<() => Promise<any>>,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref, unref } from 'vue'
|
||||
import { Button, Form, Input } from 'ant-design-vue'
|
||||
import { Form, Input } from 'ant-design-vue'
|
||||
import LoginFormTitle from './LoginFormTitle.vue'
|
||||
import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
|
||||
import { CountdownInput } from '@/components/CountDown'
|
||||
|
|
@ -46,12 +46,12 @@ async function handleReset() {
|
|||
</FormItem>
|
||||
|
||||
<FormItem class="enter-x">
|
||||
<Button type="primary" size="large" block :loading="loading" @click="handleReset">
|
||||
<a-button type="primary" size="large" block :loading="loading" @click="handleReset">
|
||||
{{ t('common.resetText') }}
|
||||
</Button>
|
||||
<Button size="large" block class="mt-4" @click="handleBackLogin">
|
||||
</a-button>
|
||||
<a-button size="large" block class="mt-4" @click="handleBackLogin">
|
||||
{{ t('sys.login.backSignIn') }}
|
||||
</Button>
|
||||
</a-button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref, unref } from 'vue'
|
||||
|
||||
import { Button, Checkbox, Col, Divider, Form, Input, Row } from 'ant-design-vue'
|
||||
import { Checkbox, Col, Divider, Form, Input, Row } from 'ant-design-vue'
|
||||
import { AlipayCircleFilled, GithubFilled, WechatFilled } from '@ant-design/icons-vue'
|
||||
import LoginFormTitle from './LoginFormTitle.vue'
|
||||
|
||||
|
|
@ -147,31 +147,31 @@ async function handleLogin(params) {
|
|||
<Col :span="12">
|
||||
<FormItem :style="{ 'text-align': 'right' }">
|
||||
<!-- No logic, you need to deal with it yourself -->
|
||||
<Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
|
||||
<a-button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
|
||||
{{ t('sys.login.forgetPassword') }}
|
||||
</Button>
|
||||
</a-button>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<FormItem class="enter-x">
|
||||
<Button type="primary" size="large" block :loading="loading" @click="getCode">
|
||||
<a-button type="primary" size="large" block :loading="loading" @click="getCode">
|
||||
{{ t('sys.login.loginButton') }}
|
||||
</Button>
|
||||
<!-- <Button size="large" class="mt-4 enter-x" block @click="handleRegister">
|
||||
</a-button>
|
||||
<!-- <a-button size="large" class="mt-4 enter-x" block @click="handleRegister">
|
||||
{{ t('sys.login.registerButton') }}
|
||||
</Button> -->
|
||||
</a-button> -->
|
||||
</FormItem>
|
||||
<Row class="enter-x" :gutter="[16, 16]">
|
||||
<Col :md="8" :xs="24">
|
||||
<Button block @click="setLoginState(LoginStateEnum.MOBILE)">
|
||||
<a-button block @click="setLoginState(LoginStateEnum.MOBILE)">
|
||||
{{ t('sys.login.mobileSignInFormTitle') }}
|
||||
</Button>
|
||||
</a-button>
|
||||
</Col>
|
||||
<Col :md="8" :xs="24">
|
||||
<Button block @click="setLoginState(LoginStateEnum.QR_CODE)">
|
||||
<a-button block @click="setLoginState(LoginStateEnum.QR_CODE)">
|
||||
{{ t('sys.login.qrSignInFormTitle') }}
|
||||
</Button>
|
||||
</a-button>
|
||||
</Col>
|
||||
<Col :md="8" :xs="24">
|
||||
<a-button block @click="setLoginState(LoginStateEnum.REGISTER)">
|
||||
|
|
@ -197,18 +197,18 @@ async function handleLogin(params) {
|
|||
萌新必读
|
||||
</Divider>
|
||||
<div class="enter-x flex justify-evenly" :class="`${prefixCls}-sign-in-way`">
|
||||
<Button href="https://doc.iocoder.cn/" target="_blank">
|
||||
<a-button href="https://doc.iocoder.cn/" target="_blank">
|
||||
📚开发指南
|
||||
</Button>
|
||||
<Button href="https://doc.iocoder.cn/video/" target="_blank" style="padding-left: 10px">
|
||||
</a-button>
|
||||
<a-button href="https://doc.iocoder.cn/video/" target="_blank" class="pl-2">
|
||||
🔥视频教程
|
||||
</Button>
|
||||
<Button href="https://www.iocoder.cn/Interview/good-collection/" target="_blank" style="padding-left: 10px">
|
||||
</a-button>
|
||||
<a-button href="https://www.iocoder.cn/Interview/good-collection/" target="_blank" class="pl-2">
|
||||
⚡面试手册
|
||||
</Button>
|
||||
<Button href="http://static.yudao.iocoder.cn/mp/xinyu370.jpeg" target="_blank" style="padding-left: 10px">
|
||||
</a-button>
|
||||
<a-button href="http://static.yudao.iocoder.cn/mp/xinyu370.jpeg" target="_blank" class="pl-2">
|
||||
🤝外包咨询
|
||||
</Button>
|
||||
</a-button>
|
||||
</div>
|
||||
</Form>
|
||||
<Verify ref="verify" mode="pop" :captcha-type="captchaType" :img-size="{ width: '400px', height: '200px' }" @success="handleLogin" />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref, unref } from 'vue'
|
||||
import { Button, Form, Input } from 'ant-design-vue'
|
||||
import { Form, Input } from 'ant-design-vue'
|
||||
import LoginFormTitle from './LoginFormTitle.vue'
|
||||
import { LoginStateEnum, useFormRules, useFormValid, useLoginState } from './useLogin'
|
||||
import { CountdownInput } from '@/components/CountDown'
|
||||
|
|
@ -142,12 +142,12 @@ async function getSmsCode() {
|
|||
</FormItem>
|
||||
|
||||
<FormItem class="enter-x">
|
||||
<Button type="primary" size="large" block :loading="loading" @click="getCode">
|
||||
<a-button type="primary" size="large" block :loading="loading" @click="getCode">
|
||||
{{ t('sys.login.loginButton') }}
|
||||
</Button>
|
||||
<Button size="large" block class="mt-4" @click="handleBackLogin">
|
||||
</a-button>
|
||||
<a-button size="large" block class="mt-4" @click="handleBackLogin">
|
||||
{{ t('sys.login.backSignIn') }}
|
||||
</Button>
|
||||
</a-button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Verify ref="verify" mode="pop" :captcha-type="captchaType" :img-size="{ width: '400px', height: '200px' }" @success="handleLogin" />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, unref } from 'vue'
|
||||
import { Button, Divider, Popover, QRCode } from 'ant-design-vue'
|
||||
import { Divider, Popover, QRCode } from 'ant-design-vue'
|
||||
import LoginFormTitle from './LoginFormTitle.vue'
|
||||
import { LoginStateEnum, useLoginState } from './useLogin'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
|
@ -28,9 +28,9 @@ const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
|
|||
<Divider class="enter-x">
|
||||
{{ t('sys.login.scanSign') }}
|
||||
</Divider>
|
||||
<Button size="large" block class="enter-x mt-4" @click="handleBackLogin">
|
||||
<a-button size="large" block class="enter-x mt-4" @click="handleBackLogin">
|
||||
{{ t('sys.login.backSignIn') }}
|
||||
</Button>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref, unref } from 'vue'
|
||||
import { Button, Checkbox, Form, Input } from 'ant-design-vue'
|
||||
import { Checkbox, Form, Input } from 'ant-design-vue'
|
||||
import LoginFormTitle from './LoginFormTitle.vue'
|
||||
import { LoginStateEnum, useFormRules, useFormValid, useLoginState } from './useLogin'
|
||||
import { StrengthMeter } from '@/components/StrengthMeter'
|
||||
|
|
@ -69,12 +69,12 @@ async function handleRegister() {
|
|||
</Checkbox>
|
||||
</FormItem>
|
||||
|
||||
<Button type="primary" class="enter-x" size="large" block :loading="loading" @click="handleRegister">
|
||||
<a-button type="primary" class="enter-x" size="large" block :loading="loading" @click="handleRegister">
|
||||
{{ t('sys.login.registerButton') }}
|
||||
</Button>
|
||||
<Button size="large" block class="enter-x mt-4" @click="handleBackLogin">
|
||||
</a-button>
|
||||
<a-button size="large" block class="enter-x mt-4" @click="handleBackLogin">
|
||||
{{ t('sys.login.backSignIn') }}
|
||||
</Button>
|
||||
</a-button>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Button, Checkbox, Col, Form, Row } from 'ant-design-vue'
|
||||
import { Checkbox, Col, Form, Row } from 'ant-design-vue'
|
||||
|
||||
import { useFormValid, useLoginState } from './useLogin'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
|
@ -178,9 +178,9 @@ onMounted(() => {
|
|||
<FormItem>
|
||||
<!-- No logic, you need to deal with it yourself -->
|
||||
<Checkbox :checked="scope" size="small">
|
||||
<Button type="link" size="small">
|
||||
<a-button type="link" size="small">
|
||||
{{ formatScope(scope) }}
|
||||
</Button>
|
||||
</a-button>
|
||||
</Checkbox>
|
||||
</FormItem>
|
||||
</template>
|
||||
|
|
@ -188,12 +188,12 @@ onMounted(() => {
|
|||
</Row>
|
||||
|
||||
<FormItem class="enter-x">
|
||||
<Button type="primary" size="large" block :loading="loading" @click="handleAuthorize(true)">
|
||||
<a-button type="primary" size="large" block :loading="loading" @click="handleAuthorize(true)">
|
||||
{{ t('sys.login.loginButton') }}
|
||||
</Button>
|
||||
<Button size="large" class="enter-x mt-4" block @click="handleBackLogin">
|
||||
</a-button>
|
||||
<a-button size="large" class="enter-x mt-4" block @click="handleBackLogin">
|
||||
{{ t('common.cancelText') }}
|
||||
</Button>
|
||||
</a-button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue