mirror of
https://github.com/vbenjs/gf-vben-admin.git
synced 2025-02-03 03:32:59 +08:00
fix: fix darkModeSwitch switch failure
This commit is contained in:
parent
c5f2577f51
commit
34a80542de
@ -6,7 +6,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, computed } from 'vue';
|
import { defineComponent, computed, unref } from 'vue';
|
||||||
import { SvgIcon } from '/@/components/Icon';
|
import { SvgIcon } from '/@/components/Icon';
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
||||||
@ -26,7 +26,7 @@
|
|||||||
const getClass = computed(() => [
|
const getClass = computed(() => [
|
||||||
prefixCls,
|
prefixCls,
|
||||||
{
|
{
|
||||||
[`${prefixCls}--dark`]: isDark,
|
[`${prefixCls}--dark`]: unref(isDark),
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
@ -1,4 +1,6 @@
|
|||||||
import CountButton from './src/CountButton.vue';
|
import { withInstall } from '/@/utils';
|
||||||
import CountdownInput from './src/CountdownInput.vue';
|
import countButton from './src/CountButton.vue';
|
||||||
|
import countdownInput from './src/CountdownInput.vue';
|
||||||
|
|
||||||
export { CountdownInput, CountButton };
|
export const CountdownInput = withInstall(countdownInput);
|
||||||
|
export const CountButton = withInstall(countButton);
|
||||||
|
@ -1,42 +1,44 @@
|
|||||||
<template>
|
<template>
|
||||||
<Button v-bind="$attrs" :disabled="isStart" @click="handleStart" :loading="loading">
|
<Button v-bind="$attrs" :disabled="isStart" @click="handleStart" :loading="loading">
|
||||||
{{
|
{{ getButtonText }}
|
||||||
!isStart
|
|
||||||
? t('component.countdown.normalText')
|
|
||||||
: t('component.countdown.sendText', [currentCount])
|
|
||||||
}}
|
|
||||||
</Button>
|
</Button>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, ref, PropType, watchEffect } from 'vue';
|
import { defineComponent, ref, watchEffect, computed, unref } from 'vue';
|
||||||
|
|
||||||
import { Button } from 'ant-design-vue';
|
import { Button } from 'ant-design-vue';
|
||||||
|
|
||||||
import { useCountdown } from './useCountdown';
|
import { useCountdown } from './useCountdown';
|
||||||
import { isFunction } from '/@/utils/is';
|
import { isFunction } from '/@/utils/is';
|
||||||
import { useI18n } from '/@/hooks/web/useI18n';
|
import { useI18n } from '/@/hooks/web/useI18n';
|
||||||
import { propTypes } from '/@/utils/propTypes';
|
|
||||||
|
const props = {
|
||||||
|
value: { type: [Object, Number, String, Array] },
|
||||||
|
count: { type: Number, default: 60 },
|
||||||
|
beforeStartFunc: {
|
||||||
|
type: Function as PropType<() => Promise<boolean>>,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'CountButton',
|
name: 'CountButton',
|
||||||
components: { Button },
|
components: { Button },
|
||||||
props: {
|
props,
|
||||||
value: propTypes.any,
|
|
||||||
count: propTypes.number.def(60),
|
|
||||||
beforeStartFunc: {
|
|
||||||
type: Function as PropType<() => boolean>,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
|
|
||||||
const { currentCount, isStart, start, reset } = useCountdown(props.count);
|
const { currentCount, isStart, start, reset } = useCountdown(props.count);
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
const getButtonText = computed(() => {
|
||||||
|
return !unref(isStart)
|
||||||
|
? t('component.countdown.normalText')
|
||||||
|
: t('component.countdown.sendText', [unref(currentCount)]);
|
||||||
|
});
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
props.value === undefined && reset();
|
props.value === undefined && reset();
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description: Judge whether there is an external function before execution, and decide whether to start after execution
|
* @description: Judge whether there is an external function before execution, and decide whether to start after execution
|
||||||
*/
|
*/
|
||||||
@ -54,7 +56,7 @@
|
|||||||
start();
|
start();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return { handleStart, isStart, currentCount, loading, t };
|
return { handleStart, currentCount, loading, getButtonText, isStart };
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
@ -7,31 +7,30 @@
|
|||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, PropType } from 'vue';
|
import { defineComponent, PropType } from 'vue';
|
||||||
|
|
||||||
import { Input } from 'ant-design-vue';
|
import { Input } from 'ant-design-vue';
|
||||||
import CountButton from './CountButton.vue';
|
import CountButton from './CountButton.vue';
|
||||||
|
|
||||||
import { propTypes } from '/@/utils/propTypes';
|
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
|
|
||||||
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
|
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
|
||||||
|
|
||||||
|
const props = {
|
||||||
|
value: { type: String },
|
||||||
|
size: { type: String, validator: (v) => ['default', 'large', 'small'].includes(v) },
|
||||||
|
count: { type: Number, default: 60 },
|
||||||
|
sendCodeApi: {
|
||||||
|
type: Function as PropType<() => Promise<boolean>>,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'CountDownInput',
|
name: 'CountDownInput',
|
||||||
components: { [Input.name]: Input, CountButton },
|
components: { [Input.name]: Input, CountButton },
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
props: {
|
props,
|
||||||
value: propTypes.string,
|
|
||||||
size: propTypes.oneOf(['default', 'large', 'small']),
|
|
||||||
count: propTypes.number.def(60),
|
|
||||||
sendCodeApi: {
|
|
||||||
type: Function as PropType<() => boolean>,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const { prefixCls } = useDesign('countdown-input');
|
const { prefixCls } = useDesign('countdown-input');
|
||||||
const [state] = useRuleFormItem(props);
|
const [state] = useRuleFormItem(props);
|
||||||
|
|
||||||
return { prefixCls, state };
|
return { prefixCls, state };
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -1,16 +1,19 @@
|
|||||||
import Icon from './Icon/index';
|
import { Icon } from './Icon';
|
||||||
import { Button } from './Button';
|
import { Button } from './Button';
|
||||||
import {
|
import {
|
||||||
// Need
|
// Need
|
||||||
Button as AntButton,
|
Button as AntButton,
|
||||||
|
Input,
|
||||||
} from 'ant-design-vue';
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
import { App } from 'vue';
|
import { App } from 'vue';
|
||||||
|
|
||||||
const compList = [Icon, Button, AntButton.Group];
|
const compList = [Icon, AntButton.Group];
|
||||||
|
|
||||||
export function registerGlobComp(app: App) {
|
export function registerGlobComp(app: App) {
|
||||||
compList.forEach((comp: any) => {
|
compList.forEach((comp: any) => {
|
||||||
app.component(comp.name || comp.displayName, comp);
|
app.component(comp.name || comp.displayName, comp);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
app.use(Input).use(Button);
|
||||||
}
|
}
|
||||||
|
@ -80,26 +80,8 @@
|
|||||||
{
|
{
|
||||||
smooth: true,
|
smooth: true,
|
||||||
data: [
|
data: [
|
||||||
111,
|
111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444,
|
||||||
222,
|
22222, 11111, 4000, 2000, 500, 333, 222, 111,
|
||||||
4000,
|
|
||||||
18000,
|
|
||||||
33333,
|
|
||||||
55555,
|
|
||||||
66666,
|
|
||||||
33333,
|
|
||||||
14000,
|
|
||||||
36000,
|
|
||||||
66666,
|
|
||||||
44444,
|
|
||||||
22222,
|
|
||||||
11111,
|
|
||||||
4000,
|
|
||||||
2000,
|
|
||||||
500,
|
|
||||||
333,
|
|
||||||
222,
|
|
||||||
111,
|
|
||||||
],
|
],
|
||||||
type: 'line',
|
type: 'line',
|
||||||
areaStyle: {},
|
areaStyle: {},
|
||||||
@ -110,26 +92,8 @@
|
|||||||
{
|
{
|
||||||
smooth: true,
|
smooth: true,
|
||||||
data: [
|
data: [
|
||||||
33,
|
33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201,
|
||||||
66,
|
390, 198, 60, 30, 22, 11,
|
||||||
88,
|
|
||||||
333,
|
|
||||||
3333,
|
|
||||||
5000,
|
|
||||||
18000,
|
|
||||||
3000,
|
|
||||||
1200,
|
|
||||||
13000,
|
|
||||||
22000,
|
|
||||||
11000,
|
|
||||||
2221,
|
|
||||||
1201,
|
|
||||||
390,
|
|
||||||
198,
|
|
||||||
60,
|
|
||||||
30,
|
|
||||||
22,
|
|
||||||
11,
|
|
||||||
],
|
],
|
||||||
type: 'line',
|
type: 'line',
|
||||||
areaStyle: {},
|
areaStyle: {},
|
||||||
|
Loading…
Reference in New Issue
Block a user