fix: fix darkModeSwitch switch failure

This commit is contained in:
Vben 2021-06-09 22:36:30 +08:00
parent c5f2577f51
commit 34a80542de
6 changed files with 48 additions and 78 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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