CountdownInput.vue
1.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<template>
<AInput v-bind="$attrs" :class="prefixCls" :size="size">
<template #addonAfter>
<CountButton :size="size" :count="count" :beforeStartFunc="sendCodeApi" />
</template>
</AInput>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { Input } from 'ant-design-vue';
import CountButton from './CountButton.vue';
import { propTypes } from '/@/utils/propTypes';
import { useDesign } from '/@/hooks/web/useDesign';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
export default defineComponent({
name: 'CountDownInput',
components: { [Input.name]: Input, CountButton },
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) {
const { prefixCls } = useDesign('countdown-input');
const [state] = useRuleFormItem(props);
return { prefixCls, state };
},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-countdown-input';
.@{prefix-cls} {
.ant-input-group-addon {
padding-right: 0;
background-color: transparent;
border: none;
button {
font-size: 14px;
}
}
}
</style>