Skip to content

Commit 4bdb241

Browse files
tangjinzhoutangjinzhou
committed
fix: some component not support css scoped
1 parent 63e8747 commit 4bdb241

File tree

13 files changed

+102
-32
lines changed

13 files changed

+102
-32
lines changed

‎antdv-demo

‎components/_util/util.js

+9
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,13 @@ function resolvePropValue(options, props, key, value) {
4848
return value;
4949
}
5050

51+
export function getDataAndAriaProps(props) {
52+
return Object.keys(props).reduce((memo, key) => {
53+
if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-') {
54+
memo[key] = props[key];
55+
}
56+
return memo;
57+
}, {});
58+
}
59+
5160
export { isOn, cacheStringFunction, camelize, hyphenate, capitalize, resolvePropValue };

‎components/anchor/Anchor.jsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,6 @@ export default {
272272
$slots,
273273
getContainer,
274274
} = this;
275-
276275
const getPrefixCls = this.configProvider.getPrefixCls;
277276
const prefixCls = getPrefixCls('anchor', customizePrefixCls);
278277
this._sPrefixCls = prefixCls;
@@ -281,7 +280,7 @@ export default {
281280
visible: activeLink,
282281
});
283282

284-
const wrapperClass = classNames(this.$attrs.class, this.wrapperClass, `${prefixCls}-wrapper`);
283+
const wrapperClass = classNames(this.wrapperClass, `${prefixCls}-wrapper`);
285284

286285
const anchorClass = classNames(prefixCls, {
287286
fixed: !affix && !showInkInFixed,
@@ -290,9 +289,7 @@ export default {
290289
const wrapperStyle = {
291290
maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
292291
...this.wrapperStyle,
293-
...this.$attrs.style,
294292
};
295-
296293
const anchorContent = (
297294
<div class={wrapperClass} style={wrapperStyle}>
298295
<div class={anchorClass}>
@@ -307,7 +304,7 @@ export default {
307304
return !affix ? (
308305
anchorContent
309306
) : (
310-
<Affix offsetTop={offsetTop} target={getContainer}>
307+
<Affix {...this.$attrs} offsetTop={offsetTop} target={getContainer}>
311308
{anchorContent}
312309
</Affix>
313310
);

‎components/anchor/AnchorLink.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export default {
2323
registerLink: noop,
2424
unregisterLink: noop,
2525
scrollTo: noop,
26+
$data: {},
2627
}),
2728
antAnchorContext: inject('antAnchorContext', {}),
2829
configProvider: inject('configProvider', ConfigConsumerProps),
@@ -62,7 +63,7 @@ export default {
6263
const prefixCls = getPrefixCls('anchor', customizePrefixCls);
6364

6465
const title = getComponent(this, 'title');
65-
const active = this.antAnchor.activeLink === href;
66+
const active = this.antAnchor.$data.activeLink === href;
6667
const wrapperClassName = classNames(`${prefixCls}-link`, {
6768
[`${prefixCls}-link-active`]: active,
6869
});

‎components/carousel/index.jsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ const Carousel = {
153153
if (props.effect === 'fade') {
154154
props.fade = true;
155155
}
156-
156+
const { class: cls, style, ...restAttrs } = this.$attrs;
157157
const getPrefixCls = this.configProvider.getPrefixCls;
158158
let className = getPrefixCls('carousel', props.prefixCls);
159159
const dotsClass = 'slick-dots';
@@ -162,17 +162,19 @@ const Carousel = {
162162
props.dotsClass = classNames(`${dotsClass}`, `${dotsClass}-${dotPosition || 'bottom'}`, {
163163
[`${props.dotsClass}`]: !!props.dotsClass,
164164
});
165-
if (props.vertical) {
166-
className = `${className} ${className}-vertical`;
167-
}
165+
className = classNames({
166+
[cls]: !!cls,
167+
[className]: !!className,
168+
[`${className}-vertical`]: props.vertical,
169+
});
168170
const SlickCarouselProps = {
169171
...props,
170-
...this.$attrs,
172+
...restAttrs,
171173
nextArrow: getComponent(this, 'nextArrow'),
172174
prevArrow: getComponent(this, 'prevArrow'),
173175
};
174176
return (
175-
<div class={className}>
177+
<div class={className} style={style}>
176178
<SlickCarousel ref={this.saveSlick} {...SlickCarouselProps} vSlots={$slots}></SlickCarousel>
177179
</div>
178180
);

‎components/date-picker/RangePicker.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { hasProp, getOptionProps, initDefaultProps, getComponent } from '../_uti
1313
import BaseMixin from '../_util/BaseMixin';
1414
import { formatDate } from './utils';
1515
import InputIcon from './InputIcon';
16+
import { getDataAndAriaProps } from '../_util/util';
1617

1718
function getShowDateFromValue(value, mode) {
1819
const [start, end] = value;
@@ -413,6 +414,7 @@ export default {
413414
onBlur={onBlur}
414415
onMouseenter={this.onMouseEnter}
415416
onMouseleave={this.onMouseLeave}
417+
{...getDataAndAriaProps(props)}
416418
>
417419
<VcDatePicker {...vcDatePickerProps} vSlots={{ default: input, ...$slots }}></VcDatePicker>
418420
</span>

‎components/date-picker/WeekPicker.jsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import BaseMixin from '../_util/BaseMixin';
1010
import { WeekPickerProps } from './interface';
1111
import interopDefault from '../_util/interopDefault';
1212
import InputIcon from './InputIcon';
13+
import { getDataAndAriaProps } from '../_util/util';
1314

1415
function formatValue(value, format) {
1516
return (value && value.format(format)) || '';
@@ -207,7 +208,12 @@ export default {
207208
style: popupStyle,
208209
};
209210
return (
210-
<span class={classNames(className, pickerClass)} style={style} id={id}>
211+
<span
212+
class={classNames(className, pickerClass)}
213+
style={style}
214+
id={id}
215+
{...getDataAndAriaProps(props)}
216+
>
211217
<VcDatePicker {...vcDatePickerProps} vSlots={{ default: input, ...$slots }}></VcDatePicker>
212218
</span>
213219
);

‎components/date-picker/createPicker.js

+2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
} from '../_util/props-util';
1919
import { cloneElement } from '../_util/vnode';
2020
import { formatDate } from './utils';
21+
import { getDataAndAriaProps } from '../_util/util';
2122

2223
// export const PickerProps = {
2324
// value?: moment.Moment;
@@ -244,6 +245,7 @@ export default function createPicker(TheCalendar, props) {
244245
// tabindex={props.disabled ? -1 : 0}
245246
// onFocus={focus}
246247
// onBlur={blur}
248+
{...getDataAndAriaProps(this.$attrs)}
247249
onMouseenter={this.onMouseEnter}
248250
onMouseleave={this.onMouseLeave}
249251
>

‎components/drawer/index.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ const Drawer = {
213213
const handler = getComponent(this, 'handle') || false;
214214
const getPrefixCls = this.configProvider.getPrefixCls;
215215
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
216-
216+
const { class: className } = this.$attrs;
217217
const vcDrawerProps = {
218218
...this.$attrs,
219219
...omit(rest, [
@@ -241,6 +241,7 @@ const Drawer = {
241241
showMask: mask,
242242
placement,
243243
class: classnames({
244+
[className]: !!className,
244245
[wrapClassName]: !!wrapClassName,
245246
[haveMask]: !!haveMask,
246247
}),

‎components/vc-collapse/src/Collapse.jsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
import { cloneElement } from '../../_util/vnode';
1010
import openAnimationFactory from './openAnimationFactory';
1111
import { collapseProps } from './commonProps';
12+
import { getDataAndAriaProps } from '../../_util/util';
1213

1314
function _toArray(activeKey) {
1415
let currentActiveKey = activeKey;
@@ -131,7 +132,12 @@ export default {
131132
[className]: className,
132133
};
133134
return (
134-
<div class={collapseClassName} style={style} role={accordion ? 'tablist' : null}>
135+
<div
136+
class={collapseClassName}
137+
{...getDataAndAriaProps(this.$attrs)}
138+
style={style}
139+
role={accordion ? 'tablist' : null}
140+
>
135141
{this.getItems()}
136142
</div>
137143
);

‎components/vc-drawer/src/Drawer.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -381,7 +381,7 @@ const Drawer = {
381381
keyboard,
382382
maskClosable,
383383
} = this.$props;
384-
const { class: cls, style } = this.$attrs;
384+
const { class: cls, style, ...restAttrs } = this.$attrs;
385385
const children = getSlot(this);
386386
const wrapperClassname = classnames(prefixCls, {
387387
[`${prefixCls}-${placement}`]: true,
@@ -424,6 +424,7 @@ const Drawer = {
424424
});
425425
}
426426
const domContProps = {
427+
...restAttrs,
427428
class: wrapperClassname,
428429
onTransitionend: this.onWrapperTransitionEnd,
429430
onKeydown: open && keyboard ? this.onKeyDown : noop,

‎components/vc-select/Select.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import { SelectPropTypes } from './PropTypes';
4848
import contains from '../vc-util/Dom/contains';
4949
import { isIE, isEdge } from '../_util/env';
5050
import isValid from '../_util/isValid';
51+
import { getDataAndAriaProps } from '../_util/util';
5152

5253
const SELECT_EMPTY_VALUE_KEY = 'RC_SELECT_EMPTY_VALUE_KEY';
5354

@@ -1580,6 +1581,7 @@ const Select = {
15801581
ariaId={this.$data._ariaId}
15811582
>
15821583
<div
1584+
{...getDataAndAriaProps(this.$attrs)}
15831585
ref={chaining(this.saveRootRef, this.saveSelectionRef)}
15841586
style={style}
15851587
class={classnames(rootCls)}

‎examples/App.vue

+56-15
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,60 @@
11
<template>
22
<div>
3-
<demo />
3+
<a-affix class="red"></a-affix>
4+
<a-alert class="red"></a-alert>
5+
<a-anchor class="red">
6+
<a-anchor-link class="red" href="#components-anchor-demo-basic" title="Basic demo" />
7+
</a-anchor>
8+
<a-auto-complete :dataSource="[]" class="red"></a-auto-complete>
9+
<a-avatar class="red"></a-avatar>
10+
<a-back-top class="red">jjj</a-back-top>
11+
<a-badge class="red"></a-badge>
12+
<a-breadcrumb class="red">
13+
<a-breadcrumb-item class="red">Home</a-breadcrumb-item>
14+
</a-breadcrumb>
15+
<a-button class="red"></a-button>
16+
<a-calendar class="red"></a-calendar>
17+
<a-card class="red"></a-card>
18+
<a-carousel class="red">
19+
<div>
20+
<h3>1</h3>
21+
</div>
22+
</a-carousel>
23+
<a-checkbox class="red">Checkbox</a-checkbox>
24+
<a-checkbox-group class="red"></a-checkbox-group>
25+
<a-collapse class="red">
26+
<a-collapse-panel class="red" key="1" header="This is panel header 1">
27+
<p>{{ text }}</p>
28+
</a-collapse-panel>
29+
<a-collapse-panel key="2" header="This is panel header 2" :disabled="false">
30+
<p>{{ text }}</p>
31+
</a-collapse-panel>
32+
<a-collapse-panel key="3" header="This is panel header 3" disabled>
33+
<p>{{ text }}</p>
34+
</a-collapse-panel>
35+
</a-collapse>
36+
<a-date-picker class="red"></a-date-picker>
37+
<br />
38+
<a-month-picker class="red" placeholder="Select month" />
39+
<br />
40+
<a-range-picker class="red" />
41+
<br />
42+
<a-week-picker class="red" placeholder="Select week" />
43+
44+
<a-descriptions title="User Info" class="red">
45+
<a-descriptions-item label="Address" class="red"
46+
>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</a-descriptions-item
47+
>
48+
</a-descriptions>
49+
<a-drawer class="red" style="margin-top: 10px"></a-drawer>>
50+
<a-dropdown class="red">
51+
<a>ssss</a>
52+
</a-dropdown>
53+
<a-dropdown-button class="red"></a-dropdown-button>
454
</div>
555
</template>
6-
<script>
7-
import demo from '../antdv-demo/docs/select/demo/custom-dropdown-menu';
8-
export default {
9-
components: {
10-
demo,
11-
},
12-
data() {
13-
return {
14-
visible: true,
15-
current: ['mail'],
16-
};
17-
},
18-
};
19-
</script>
56+
<style scoped>
57+
.red {
58+
color: red;
59+
}</style
60+
>>

0 commit comments

Comments
 (0)