github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: image preview class error #4231

refactor-list
tangjinzhou 2021-06-19 22:13:13 +08:00
parent 8996db2adf
commit edcc8b7107
2 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/image/PreviewGroup.tsx
View File

@ -1,5 +1,5 @@
import PreviewGroup from '../vc-image/src/PreviewGroup'; import PreviewGroup from '../vc-image/src/PreviewGroup';
import { defineComponent, inject } from 'vue'; import { computed, defineComponent, inject } from 'vue';
import { defaultConfigProvider } from '../config-provider'; import { defaultConfigProvider } from '../config-provider';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
@ -9,13 +9,14 @@ const InternalPreviewGroup = defineComponent({
props: { previewPrefixCls: PropTypes.string }, props: { previewPrefixCls: PropTypes.string },
setup(props, { attrs, slots }) { setup(props, { attrs, slots }) {
const configProvider = inject('configProvider', defaultConfigProvider); const configProvider = inject('configProvider', defaultConfigProvider);
const prefixCls = computed(() =>
configProvider.getPrefixCls('image-preview', props.previewPrefixCls),
);
return () => { return () => {
const { getPrefixCls } = configProvider;
const prefixCls = getPrefixCls('image-preview', props.previewPrefixCls);
return ( return (
<PreviewGroup <PreviewGroup
previewPrefixCls={prefixCls}
{...{ ...attrs, ...props }} {...{ ...attrs, ...props }}
previewPrefixCls={prefixCls.value}
v-slots={slots} v-slots={slots}
></PreviewGroup> ></PreviewGroup>
); );

18
components/image/index.tsx
View File

@ -1,7 +1,7 @@
import { App, defineComponent, ExtractPropTypes, ImgHTMLAttributes, inject, Plugin } from 'vue'; import { App, defineComponent, ExtractPropTypes, ImgHTMLAttributes, Plugin } from 'vue';
import { defaultConfigProvider } from '../config-provider';
import ImageInternal from '../vc-image'; import ImageInternal from '../vc-image';
import { imageProps } from '../vc-image/src/Image'; import { imageProps } from '../vc-image/src/Image';
import useConfigInject from '../_util/hooks/useConfigInject';
import PreviewGroup from './PreviewGroup'; import PreviewGroup from './PreviewGroup';
export type ImageProps = Partial< export type ImageProps = Partial<
@ -11,13 +11,15 @@ const Image = defineComponent<ImageProps>({
name: 'AImage', name: 'AImage',
inheritAttrs: false, inheritAttrs: false,
props: imageProps as any, props: imageProps as any,
setup(props, ctx) { setup(props, { slots, attrs }) {
const { slots, attrs } = ctx; const { prefixCls } = useConfigInject('image', props);
const configProvider = inject('configProvider', defaultConfigProvider);
return () => { return () => {
const { getPrefixCls } = configProvider; return (
const prefixCls = getPrefixCls('image', props.prefixCls); <ImageInternal
return <ImageInternal {...{ ...attrs, ...props, prefixCls }} v-slots={slots}></ImageInternal>; {...{ ...attrs, ...props, prefixCls: prefixCls.value }}
v-slots={slots}
></ImageInternal>
);
}; };
}, },
}); });