ant-design-vue/components/skeleton/Input.tsx
Garret MH a2f7d6d062
feat: Vue 3 Migration Build support (#5973), close #5765
closes vueComponent/ant-design-vue#5765

Add `compatConfig: { MODE: 3 }` to all component definitions to signal to `@vue/compat` not to use any Vue 2 compatibility features.
2022-09-26 21:33:41 +08:00

38 lines
1.1 KiB
Vue

import type { PropType } from 'vue';
import { computed, defineComponent } from 'vue';
import classNames from '../_util/classNames';
import useConfigInject from '../_util/hooks/useConfigInject';
import type { SkeletonElementProps } from './Element';
import Element, { skeletonElementProps } from './Element';
import omit from '../_util/omit';
export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
size?: 'large' | 'small' | 'default';
}
const SkeletonInput = defineComponent({
compatConfig: { MODE: 3 },
name: 'ASkeletonInput',
props: {
...omit(skeletonElementProps(), ['shape']),
size: String as PropType<'large' | 'small' | 'default'>,
},
setup(props) {
const { prefixCls } = useConfigInject('skeleton', props);
const cls = computed(() =>
classNames(prefixCls.value, `${prefixCls.value}-element`, {
[`${prefixCls.value}-active`]: props.active,
}),
);
return () => {
return (
<div class={cls.value}>
<Element {...props} prefixCls={`${prefixCls.value}-input`} />
</div>
);
};
},
});
export default SkeletonInput;