liukai
/
fast-iot-web
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: button bg color

main
xingyu 2 years ago
parent
e0f5b4ff15
commit
f4b012eaaf
10 changed files with 52 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/components/Button/src/BasicButton.vue
  2. 6
      src/components/Button/src/props.ts
  3. 6
      src/components/CountDown/src/CountButton.vue
  4. 2
      src/components/CountDown/src/CountdownInput.vue
  5. 10
      src/views/base/login/ForgetPasswordForm.vue
  6. 38
      src/views/base/login/LoginForm.vue
  7. 10
      src/views/base/login/MobileForm.vue
  8. 6
      src/views/base/login/QrCodeForm.vue
  9. 10
      src/views/base/login/RegisterForm.vue
  10. 14
      src/views/base/login/SSOForm.vue

5
src/components/Button/src/BasicButton.vue
Unescape View File

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

6
src/components/Button/src/props.ts
Unescape View File

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

6
src/components/CountDown/src/CountButton.vue
Unescape View File

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

2
src/components/CountDown/src/CountdownInput.vue
Unescape View File

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

10
src/views/base/login/ForgetPasswordForm.vue
Unescape View File

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

38
src/views/base/login/LoginForm.vue
Unescape View File

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

10
src/views/base/login/MobileForm.vue
Unescape View File

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

6
src/views/base/login/QrCodeForm.vue
Unescape View File

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

10
src/views/base/login/RegisterForm.vue
Unescape View File

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

14
src/views/base/login/SSOForm.vue
Unescape View File

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