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

feat: update progress

pull/2498/head
tangjinzhou 2020-06-26 10:08:47 +08:00
parent e623fc12cd
commit 1f09c6e41f
12 changed files with 141 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
antdv-demo

@ -1 +1 @@
Subproject commit 3506c191e7e5aa2981d46a594c9997536fe12446 Subproject commit c2e13cef53abb73e36ad7e506a9a03f1268fc3e8

21
components/progress/__tests__/__snapshots__/index.test.js.snap
View File

@ -2,14 +2,15 @@
exports[`Progress render format 1`] = ` exports[`Progress render format 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"> <div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path> a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="50%" class="ant-progress-text">50%</span></div> </svg><span class="ant-progress-text" title="50%">50%</span></div>
</div> </div>
`; `;
@ -19,8 +20,9 @@ exports[`Progress render negetive progress 1`] = `
<div class="ant-progress-outer"> <div class="ant-progress-outer">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 0%; height: 8px; border-radius: 100px;"></div> <div class="ant-progress-bg" style="width: 0%; height: 8px; border-radius: 100px;"></div>
<!---->
</div> </div>
</div><span title="0%" class="ant-progress-text">0%</span> </div><span class="ant-progress-text" title="0%">0%</span>
</div> </div>
</div> </div>
`; `;
@ -33,7 +35,7 @@ exports[`Progress render negetive successPercent 1`] = `
<div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div>
<div class="ant-progress-success-bg" style="width: 0%; height: 8px;"></div> <div class="ant-progress-success-bg" style="width: 0%; height: 8px;"></div>
</div> </div>
</div><span title="50%" class="ant-progress-text">50%</span> </div><span class="ant-progress-text" title="50%">50%</span>
</div> </div>
</div> </div>
`; `;
@ -46,7 +48,7 @@ exports[`Progress render negetive successPercent 2`] = `
<div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div>
<div class="ant-progress-success-bg" style="width: 10%; height: 8px;"></div> <div class="ant-progress-success-bg" style="width: 10%; height: 8px;"></div>
</div> </div>
</div><span title="50 10" class="ant-progress-text">50 10</span> </div><span class="ant-progress-text" title="50 10">50 10</span>
</div> </div>
</div> </div>
`; `;
@ -57,8 +59,9 @@ exports[`Progress render normal progress 1`] = `
<div class="ant-progress-outer"> <div class="ant-progress-outer">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 0%; height: 8px; border-radius: 100px;"></div> <div class="ant-progress-bg" style="width: 0%; height: 8px; border-radius: 100px;"></div>
<!---->
</div> </div>
</div><span title="0%" class="ant-progress-text">0%</span> </div><span class="ant-progress-text" title="0%">0%</span>
</div> </div>
</div> </div>
`; `;
@ -69,8 +72,9 @@ exports[`Progress render out-of-range progress 1`] = `
<div class="ant-progress-outer"> <div class="ant-progress-outer">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 100%; height: 8px; border-radius: 100px;"></div> <div class="ant-progress-bg" style="width: 100%; height: 8px; border-radius: 100px;"></div>
<!---->
</div> </div>
</div><span class="ant-progress-text"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span> </div><span class="ant-progress-text" title=""><span class="anticon anticon-check-circle" role="img" aria-label="check-circle"><svg class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span>
</div> </div>
</div> </div>
`; `;
@ -81,8 +85,9 @@ exports[`Progress render out-of-range progress with info 1`] = `
<div class="ant-progress-outer"> <div class="ant-progress-outer">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 100%; height: 8px; border-radius: 100px;"></div> <div class="ant-progress-bg" style="width: 100%; height: 8px; border-radius: 100px;"></div>
<!---->
</div> </div>
</div><span class="ant-progress-text"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span> </div><span class="ant-progress-text" title=""><span class="anticon anticon-check-circle" role="img" aria-label="check-circle"><svg class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span>
</div> </div>
</div> </div>
`; `;

16
components/progress/__tests__/index.test.js
View File

@ -5,7 +5,7 @@ import Progress from '..';
describe('Progress', () => { describe('Progress', () => {
it('successPercent should decide the progress status when it exists', async () => { it('successPercent should decide the progress status when it exists', async () => {
const wrapper = mount(Progress, { const wrapper = mount(Progress, {
propsData: { props: {
percent: 100, percent: 100,
successPercent: 50, successPercent: 50,
}, },
@ -28,7 +28,7 @@ describe('Progress', () => {
it('render out-of-range progress', async () => { it('render out-of-range progress', async () => {
const wrapper = mount(Progress, { const wrapper = mount(Progress, {
propsData: { props: {
percent: 120, percent: 120,
}, },
sync: false, sync: false,
@ -40,7 +40,7 @@ describe('Progress', () => {
it('render out-of-range progress with info', async () => { it('render out-of-range progress with info', async () => {
const wrapper = mount(Progress, { const wrapper = mount(Progress, {
propsData: { props: {
percent: 120, percent: 120,
showInfo: true, showInfo: true,
}, },
@ -53,7 +53,7 @@ describe('Progress', () => {
it('render negetive progress', async () => { it('render negetive progress', async () => {
const wrapper = mount(Progress, { const wrapper = mount(Progress, {
propsData: { props: {
percent: -20, percent: -20,
}, },
sync: false, sync: false,
@ -65,7 +65,7 @@ describe('Progress', () => {
it('render negetive successPercent', async () => { it('render negetive successPercent', async () => {
const wrapper = mount(Progress, { const wrapper = mount(Progress, {
propsData: { props: {
percent: 50, percent: 50,
successPercent: -20, successPercent: -20,
}, },
@ -78,7 +78,7 @@ describe('Progress', () => {
it('render negetive successPercent', async () => { it('render negetive successPercent', async () => {
const wrapper = mount(Progress, { const wrapper = mount(Progress, {
propsData: { props: {
percent: 50, percent: 50,
successPercent: 10, successPercent: 10,
format: (percent, successPercent) => `${percent} ${successPercent}`, format: (percent, successPercent) => `${percent} ${successPercent}`,
@ -92,7 +92,7 @@ describe('Progress', () => {
it('render format', async () => { it('render format', async () => {
const wrapper = mount(Progress, { const wrapper = mount(Progress, {
propsData: { props: {
percent: 50, percent: 50,
type: 'circle', type: 'circle',
strokeColor: 'red', strokeColor: 'red',
@ -105,7 +105,7 @@ describe('Progress', () => {
}); });
it('render normal progress', () => { it('render normal progress', () => {
const wrapper = mount(Progress, { propsData: { status: 'normal' } }); const wrapper = mount(Progress, { props: { status: 'normal' } });
expect(wrapper.html()).toMatchSnapshot(); expect(wrapper.html()).toMatchSnapshot();
}); });
}); });

88
components/progress/circle.jsx
View File

@ -21,54 +21,50 @@ function getStrokeColor({ progressStatus, successPercent, strokeColor }) {
return [statusColorMap.success, color]; return [statusColorMap.success, color];
} }
const Circle = { const Circle = (_, { attrs, slots }) => {
functional: true, const {
render(h, context) { prefixCls,
const { props, children } = context; width,
const { strokeWidth,
prefixCls, trailColor,
width, strokeLinecap,
strokeWidth, gapPosition,
trailColor, gapDegree,
strokeLinecap, type,
gapPosition, } = attrs;
gapDegree, const circleSize = width || 120;
type, const circleStyle = {
} = props; width: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
const circleSize = width || 120; height: typeof circleSize === 'number' ? `${circleSize}px` : circleSize,
const circleStyle = { fontSize: `${circleSize * 0.15 + 6}px`,
width: typeof circleSize === 'number' ? `${circleSize}px` : circleSize, };
height: typeof circleSize === 'number' ? `${circleSize}px` : circleSize, const circleWidth = strokeWidth || 6;
fontSize: circleSize * 0.15 + 6, const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
}; const gapDeg = gapDegree || (type === 'dashboard' && 75);
const circleWidth = strokeWidth || 6; const strokeColor = getStrokeColor(attrs);
const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top'; const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
const gapDeg = gapDegree || (type === 'dashboard' && 75);
const strokeColor = getStrokeColor(props);
const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
const wrapperClassName = { const wrapperClassName = {
[`${prefixCls}-inner`]: true, [`${prefixCls}-inner`]: true,
[`${prefixCls}-circle-gradient`]: isGradient, [`${prefixCls}-circle-gradient`]: isGradient,
}; };
return ( return (
<div class={wrapperClassName} style={circleStyle}> <div class={wrapperClassName} style={circleStyle}>
<VCCircle <VCCircle
percent={getPercentage(props)} percent={getPercentage(attrs)}
strokeWidth={circleWidth} strokeWidth={circleWidth}
trailWidth={circleWidth} trailWidth={circleWidth}
strokeColor={strokeColor} strokeColor={strokeColor}
strokeLinecap={strokeLinecap} strokeLinecap={strokeLinecap}
trailColor={trailColor} trailColor={trailColor}
prefixCls={prefixCls} prefixCls={prefixCls}
gapDegree={gapDeg} gapDegree={gapDeg}
gapPosition={gapPos} gapPosition={gapPos}
/> />
{children} {slots?.default()}
</div> </div>
); );
},
}; };
export default Circle; export default Circle;

6
components/progress/index.jsx
View File

@ -1,12 +1,10 @@
import Progress from './progress'; import Progress from './progress';
import Base from '../base';
export { ProgressProps } from './progress'; export { ProgressProps } from './progress';
/* istanbul ignore next */ /* istanbul ignore next */
Progress.install = function(Vue) { Progress.install = function(app) {
Vue.use(Base); app.component(Progress.name, Progress);
Vue.component(Progress.name, Progress);
}; };
export default Progress; export default Progress;

86
components/progress/line.jsx
View File

@ -50,55 +50,51 @@ export const handleGradient = strokeColor => {
return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` }; return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
}; };
const Line = { const Line = (_, { attrs, slots }) => {
functional: true, const {
render(h, context) { prefixCls,
const { props, children } = context; percent,
const { successPercent,
prefixCls, strokeWidth,
percent, size,
successPercent, strokeColor,
strokeWidth, strokeLinecap,
size, } = attrs;
strokeColor, let backgroundProps;
strokeLinecap, if (strokeColor && typeof strokeColor !== 'string') {
} = props; backgroundProps = handleGradient(strokeColor);
let backgroundProps; } else {
if (strokeColor && typeof strokeColor !== 'string') { backgroundProps = {
backgroundProps = handleGradient(strokeColor);
} else {
backgroundProps = {
background: strokeColor,
};
}
const percentStyle = {
width: `${validProgress(percent)}%`,
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
background: strokeColor, background: strokeColor,
borderRadius: strokeLinecap === 'square' ? 0 : '100px',
...backgroundProps,
}; };
const successPercentStyle = { }
width: `${validProgress(successPercent)}%`, const percentStyle = {
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`, width: `${validProgress(percent)}%`,
borderRadius: strokeLinecap === 'square' ? 0 : '', height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
}; background: strokeColor,
const successSegment = borderRadius: strokeLinecap === 'square' ? 0 : '100px',
successPercent !== undefined ? ( ...backgroundProps,
<div class={`${prefixCls}-success-bg`} style={successPercentStyle} /> };
) : null; const successPercentStyle = {
return ( width: `${validProgress(successPercent)}%`,
<div> height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
<div class={`${prefixCls}-outer`}> borderRadius: strokeLinecap === 'square' ? 0 : '',
<div class={`${prefixCls}-inner`}> };
<div class={`${prefixCls}-bg`} style={percentStyle} /> const successSegment =
{successSegment} successPercent !== undefined ? (
</div> <div class={`${prefixCls}-success-bg`} style={successPercentStyle} />
) : null;
return (
<div>
<div class={`${prefixCls}-outer`}>
<div class={`${prefixCls}-inner`}>
<div class={`${prefixCls}-bg`} style={percentStyle} />
{successSegment}
</div> </div>
{children}
</div> </div>
); {slots?.default()}
}, </div>
);
}; };
export default Line; export default Line;

29
components/progress/progress.jsx
View File

@ -1,6 +1,7 @@
import { inject } from 'vue';
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util'; import { getOptionProps, initDefaultProps } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import CheckOutlined from '@ant-design/icons-vue/CheckOutlined'; import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
@ -43,8 +44,10 @@ export default {
gapDegree: 0, gapDegree: 0,
strokeLinecap: 'round', strokeLinecap: 'round',
}), }),
inject: { setup() {
configProvider: { default: () => ConfigConsumerProps }, return {
configProvider: inject('configProvider', ConfigConsumerProps),
};
}, },
methods: { methods: {
getPercentNumber() { getPercentNumber() {
@ -67,12 +70,11 @@ export default {
if (!showInfo) return null; if (!showInfo) return null;
let text; let text;
const textFormatter = const textFormatter = format || this.$slots.format || (percentNumber => `${percentNumber}%`);
format || this.$scopedSlots.format || (percentNumber => `${percentNumber}%`);
const isLineType = type === 'line'; const isLineType = type === 'line';
if ( if (
format || format ||
this.$scopedSlots.format || this.$slots.format ||
(progressStatus !== 'exception' && progressStatus !== 'success') (progressStatus !== 'exception' && progressStatus !== 'success')
) { ) {
text = textFormatter(validProgress(percent), validProgress(successPercent)); text = textFormatter(validProgress(percent), validProgress(successPercent));
@ -101,19 +103,15 @@ export default {
// Render progress shape // Render progress shape
if (type === 'line') { if (type === 'line') {
const lineProps = { const lineProps = {
props: { ...props,
...props, prefixCls,
prefixCls,
},
}; };
progress = <Line {...lineProps}>{progressInfo}</Line>; progress = <Line {...lineProps}>{progressInfo}</Line>;
} else if (type === 'circle' || type === 'dashboard') { } else if (type === 'circle' || type === 'dashboard') {
const circleProps = { const circleProps = {
props: { ...props,
...props, prefixCls,
prefixCls, progressStatus,
progressStatus,
},
}; };
progress = <Circle {...circleProps}>{progressInfo}</Circle>; progress = <Circle {...circleProps}>{progressInfo}</Circle>;
} }
@ -126,7 +124,6 @@ export default {
}); });
const progressProps = { const progressProps = {
on: getListeners(this),
class: classString, class: classString,
}; };
return <div {...progressProps}>{progress}</div>; return <div {...progressProps}>{progress}</div>;

13
components/vc-progress/src/Circle.js
View File

@ -69,6 +69,7 @@ function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0,
} }
const Circle = { const Circle = {
name: 'Circle',
props: initDefaultProps(circlePropTypes, circleDefaultProps), props: initDefaultProps(circlePropTypes, circleDefaultProps),
created() { created() {
this.paths = {}; this.paths = {};
@ -148,13 +149,11 @@ const Circle = {
color => Object.prototype.toString.call(color) === '[object Object]', color => Object.prototype.toString.call(color) === '[object Object]',
); );
const pathFirst = { const pathFirst = {
attrs: { d: pathString,
d: pathString, stroke: trailColor,
stroke: trailColor, 'stroke-linecap': strokeLinecap,
'stroke-linecap': strokeLinecap, 'stroke-width': trailWidth || strokeWidth,
'stroke-width': trailWidth || strokeWidth, 'fill-opacity': '0',
'fill-opacity': '0',
},
class: `${prefixCls}-circle-trail`, class: `${prefixCls}-circle-trail`,
style: pathStyle, style: pathStyle,
}; };

25
components/vc-progress/src/Line.js
View File

@ -3,6 +3,7 @@ import enhancer from './enhancer';
import { propTypes, defaultProps } from './types'; import { propTypes, defaultProps } from './types';
const Line = { const Line = {
name: 'Line',
props: initDefaultProps(propTypes, defaultProps), props: initDefaultProps(propTypes, defaultProps),
created() { created() {
this.paths = {}; this.paths = {};
@ -34,13 +35,11 @@ const Line = {
let stackPtg = 0; let stackPtg = 0;
const pathFirst = { const pathFirst = {
attrs: { d: pathString,
d: pathString, 'stroke-linecap': strokeLinecap,
'stroke-linecap': strokeLinecap, stroke: trailColor,
stroke: trailColor, 'stroke-width': trailWidth || strokeWidth,
'stroke-width': trailWidth || strokeWidth, 'fill-opacity': '0',
'fill-opacity': '0',
},
class: `${prefixCls}-line-trail`, class: `${prefixCls}-line-trail`,
}; };
return ( return (
@ -65,13 +64,11 @@ const Line = {
const pathProps = { const pathProps = {
key: index, key: index,
attrs: { d: pathString,
d: pathString, 'stroke-linecap': strokeLinecap,
'stroke-linecap': strokeLinecap, stroke: color,
stroke: color, 'stroke-width': strokeWidth,
'stroke-width': strokeWidth, 'fill-opacity': '0',
'fill-opacity': '0',
},
class: `${prefixCls}-line-path`, class: `${prefixCls}-line-path`,
style: pathStyle, style: pathStyle,
}; };

2
components/vc-progress/src/enhancer.js
View File

@ -1,6 +1,6 @@
function enhancer(Component) { function enhancer(Component) {
return { return {
mixins: [Component], ...Component,
updated() { updated() {
const now = Date.now(); const now = Date.now();
let updated = false; let updated = false;

3
examples/App.vue
View File

@ -1,11 +1,10 @@
<template> <template>
<div> <div>
<a-button><span>按钮</span></a-button>
<demo /> <demo />
</div> </div>
</template> </template>
<script> <script>
import demo from '../antdv-demo/docs/upload/demo/drag'; import demo from '../antdv-demo/docs/progress/demo/index';
export default { export default {
components: { components: {

3
examples/index.js
View File

@ -1,7 +1,7 @@
import '@babel/polyfill'; import '@babel/polyfill';
import { createApp } from 'vue'; import { createApp } from 'vue';
import App from './App.vue'; import App from './App.vue';
import { Button, Upload, Icon, Modal, notification, message } from 'ant-design-vue'; import { Button, Upload, Icon, Modal, Progress, notification, message } from 'ant-design-vue';
import 'ant-design-vue/style.js'; import 'ant-design-vue/style.js';
const basic = { const basic = {
@ -22,4 +22,5 @@ app
.use(Button) .use(Button)
.use(Icon) .use(Icon)
.use(Modal) .use(Modal)
.use(Progress)
.mount('#app'); .mount('#app');