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 ts error

feat-css-var
tangjinzhou 2022-02-28 14:51:16 +08:00
parent ad42b92a79
commit 1eec85f77b
9 changed files with 176 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/grid/demo/flex.vue
View File

@ -21,7 +21,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw
<template>
<div id="components-grid-demo-flex">
<p>sub-element align left</p>
<a-row type="flex" justify="start">
<a-row justify="start">
<a-col :span="4">col-4</a-col>
<a-col :span="4">col-4</a-col>
<a-col :span="4">col-4</a-col>
@ -29,7 +29,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw
</a-row>
<p>sub-element align center</p>
<a-row type="flex" justify="center">
<a-row justify="center">
<a-col :span="4">col-4</a-col>
<a-col :span="4">col-4</a-col>
<a-col :span="4">col-4</a-col>
@ -37,7 +37,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw
</a-row>
<p>sub-element align right</p>
<a-row type="flex" justify="end">
<a-row justify="end">
<a-col :span="4">col-4</a-col>
<a-col :span="4">col-4</a-col>
<a-col :span="4">col-4</a-col>
@ -45,7 +45,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw
</a-row>
<p>sub-element monospaced arrangement</p>
<a-row type="flex" justify="space-between">
<a-row justify="space-between">
<a-col :span="4">col-4</a-col>
<a-col :span="4">col-4</a-col>
<a-col :span="4">col-4</a-col>
@ -53,7 +53,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw
</a-row>
<p>sub-element align full</p>
<a-row type="flex" justify="space-around">
<a-row justify="space-around">
<a-col :span="4">col-4</a-col>
<a-col :span="4">col-4</a-col>
<a-col :span="4">col-4</a-col>

0
components/image/demo/controlledPreview.vue → components/image/demo/controlled-preview.vue
View File

7
components/image/demo/index.vue
View File

@ -5,6 +5,7 @@
<placeholder />
<preview-group />
<controlled-preview />
<previewGroupVisibleVue />
</demo-sort>
</template>
@ -12,8 +13,9 @@
import Basic from './basic.vue';
import Fallback from './fallback.vue';
import Placeholder from './placeholder.vue';
import PreviewGroup from './previewGroup.vue';
import ControlledPreview from './controlledPreview.vue';
import PreviewGroup from './preview-group.vue';
import ControlledPreview from './controlled-preview.vue';
import previewGroupVisibleVue from './preview-group-visible.vue';
import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';
@ -27,6 +29,7 @@ export default defineComponent({
Placeholder,
PreviewGroup,
ControlledPreview,
previewGroupVisibleVue,
},
});
</script>

49
components/image/demo/preview-group-visible.vue Normal file
View File

@ -0,0 +1,49 @@
<docs>
---
order: 6
title:
zh-CN: 相册模式
en-US: Preview from one image
---
## zh-CN
从一张图片点开相册。
## en-US
Preview a collection from one image.
</docs>
<template>
<a-image
:preview="{ visible }"
:width="200"
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
@click="visible = true"
/>
<div style="display: none">
<a-image-preview-group :preview="{ visible, onVisibleChange: vis => (visible = vis) }">
<a-image
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
/>
<a-image
src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
/>
<a-image
src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp"
/>
</a-image-preview-group>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
visible: ref(false),
};
},
});
</script>

0
components/image/demo/previewGroup.vue → components/image/demo/preview-group.vue
View File

46
components/image/style/index.less
View File

@ -7,18 +7,51 @@
.@{image-prefix-cls} {
position: relative;
display: inline-block;
&-img {
display: block;
width: 100%;
height: auto;
&-placeholder {
background-color: @image-bg;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
background-repeat: no-repeat;
background-position: center center;
background-size: 30%;
}
}
&-mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
color: @text-color-inverse;
background: fade(@black, 50%);
cursor: pointer;
opacity: 0;
transition: opacity @animation-duration-slow;
&-info {
padding: 0 @padding-xss;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.@{iconfont-css-prefix} {
margin-inline-end: @margin-xss;
}
}
&:hover {
opacity: 1;
}
}
&-placeholder {
.box();
}
@ -43,9 +76,11 @@
transition: transform 0.3s @ease-out 0s;
user-select: none;
pointer-events: auto;
&-wrapper {
.box();
transition: transform 0.3s @ease-out 0s;
&::before {
display: inline-block;
width: 1px;
@ -59,6 +94,7 @@
&-moving {
.@{image-prefix-cls}-preview-img {
cursor: grabbing;
&-wrapper {
transition-duration: 0s;
}
@ -88,14 +124,17 @@
margin-left: @control-padding-horizontal;
padding: @control-padding-horizontal;
cursor: pointer;
&-disabled {
color: @image-preview-operation-disabled-color;
pointer-events: none;
}
&:last-of-type {
margin-left: 0;
}
}
&-icon {
font-size: @image-preview-operation-size;
}
@ -118,14 +157,15 @@
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
&-disabled {
color: @image-preview-operation-disabled-color;
cursor: not-allowed;
> .anticon {
> .@{iconfont-css-prefix} {
cursor: not-allowed;
}
}
> .anticon {
> .@{iconfont-css-prefix} {
font-size: 18px;
}
}

0
components/image/style/index.ts → components/image/style/index.tsx
View File

24
components/vc-image/src/Image.tsx
View File

@ -1,4 +1,4 @@
import type { ImgHTMLAttributes, CSSProperties } from 'vue';
import type { ImgHTMLAttributes, CSSProperties, PropType } from 'vue';
import { ref, watch, defineComponent, computed, onMounted } from 'vue';
import isNumber from 'lodash-es/isNumber';
import cn from '../../_util/classNames';
@ -29,21 +29,17 @@ export interface ImagePropsType extends Omit<ImgHTMLAttributes, 'placeholder' |
preview?: boolean | ImagePreviewType;
}
export const imageProps = {
src: PropTypes.string,
wrapperClassName: PropTypes.string,
src: String,
wrapperClassName: String,
wrapperStyle: PropTypes.style,
prefixCls: PropTypes.string,
previewPrefixCls: PropTypes.string,
prefixCls: String,
previewPrefixCls: String,
placeholder: PropTypes.any,
fallback: PropTypes.string,
preview: PropTypes.oneOfType([
PropTypes.looseBool,
PropTypes.shape({
visible: PropTypes.bool,
onVisibleChange: PropTypes.func,
getContainer: PropTypes.oneOfType([PropTypes.func, PropTypes.looseBool, PropTypes.string]),
}).loose,
]).def(true),
fallback: String,
preview: {
type: [Boolean, Object] as PropType<boolean | ImagePreviewType>,
default: true as boolean | ImagePreviewType,
},
};
type ImageStatus = 'normal' | 'error' | 'loading';

126
components/vc-image/src/Preview.tsx
View File

@ -240,73 +240,75 @@ const Preview = defineComponent({
removeListeners();
});
return () => (
<Dialog
{...attrs}
transitionName="zoom"
maskTransitionName="fade"
closable={false}
keyboard
prefixCls={props.prefixCls}
onClose={onClose}
afterClose={onAfterClose}
visible={props.visible}
wrapClassName={wrapClassName}
getContainer={props.getContainer}
>
<ul class={`${props.prefixCls}-operations`}>
{tools.map(({ icon: IconType, onClick, type, disabled }) => (
<li
class={classnames(toolClassName, {
[`${props.prefixCls}-operations-operation-disabled`]: disabled && disabled?.value,
})}
onClick={onClick}
key={type}
>
<IconType class={iconClassName} />
</li>
))}
</ul>
<div
class={`${props.prefixCls}-img-wrapper`}
style={{
transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
}}
return () => {
return (
<Dialog
{...attrs}
transitionName="zoom"
maskTransitionName="fade"
closable={false}
keyboard
prefixCls={props.prefixCls}
onClose={onClose}
afterClose={onAfterClose}
visible={props.visible}
wrapClassName={wrapClassName}
getContainer={props.getContainer}
>
<img
onMousedown={onMouseDown}
ref={imgRef}
class={`${props.prefixCls}-img`}
src={combinationSrc.value}
alt={props.alt}
<ul class={`${props.prefixCls}-operations`}>
{tools.map(({ icon: IconType, onClick, type, disabled }) => (
<li
class={classnames(toolClassName, {
[`${props.prefixCls}-operations-operation-disabled`]: disabled && disabled?.value,
})}
onClick={onClick}
key={type}
>
<IconType class={iconClassName} />
</li>
))}
</ul>
<div
class={`${props.prefixCls}-img-wrapper`}
style={{
transform: `scale3d(${scale.value}, ${scale.value}, 1) rotate(${rotate.value}deg)`,
transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
}}
/>
</div>
{showLeftOrRightSwitches.value && (
<div
class={classnames(`${props.prefixCls}-switch-left`, {
[`${props.prefixCls}-switch-left-disabled`]: currentPreviewIndex.value <= 0,
})}
onClick={onSwitchLeft}
>
<LeftOutlined />
<img
onMousedown={onMouseDown}
ref={imgRef}
class={`${props.prefixCls}-img`}
src={combinationSrc.value}
alt={props.alt}
style={{
transform: `scale3d(${scale.value}, ${scale.value}, 1) rotate(${rotate.value}deg)`,
}}
/>
</div>
)}
{showLeftOrRightSwitches.value && (
<div
class={classnames(`${props.prefixCls}-switch-right`, {
[`${props.prefixCls}-switch-right-disabled`]:
currentPreviewIndex.value >= previewGroupCount.value - 1,
})}
onClick={onSwitchRight}
>
<RightOutlined />
</div>
)}
</Dialog>
);
{showLeftOrRightSwitches.value && (
<div
class={classnames(`${props.prefixCls}-switch-left`, {
[`${props.prefixCls}-switch-left-disabled`]: currentPreviewIndex.value <= 0,
})}
onClick={onSwitchLeft}
>
<LeftOutlined />
</div>
)}
{showLeftOrRightSwitches.value && (
<div
class={classnames(`${props.prefixCls}-switch-right`, {
[`${props.prefixCls}-switch-right-disabled`]:
currentPreviewIndex.value >= previewGroupCount.value - 1,
})}
onClick={onSwitchRight}
>
<RightOutlined />
</div>
)}
</Dialog>
);
};
},
});