feat: update slider
tangjinzhou
parent
a3592033be
commit
2c3492face
|
|
@ -1,24 +1,14 @@
|
|||
import { inject } from 'vue';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { getOptionProps, getListeners } from '../_util/props-util';
|
||||
import { getOptionProps } from '../_util/props-util';
|
||||
import VcSlider from '../vc-slider/src/Slider';
|
||||
import VcRange from '../vc-slider/src/Range';
|
||||
import VcHandle from '../vc-slider/src/Handle';
|
||||
import Tooltip from '../tooltip';
|
||||
import Base from '../base';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import abstractTooltipProps from '../tooltip/abstractTooltipProps';
|
||||
|
||||
// export interface SliderMarks {
|
||||
// [key]: React.ReactNode | {
|
||||
// style: React.CSSProperties,
|
||||
// label: React.ReactNode,
|
||||
// };
|
||||
// }
|
||||
// const SliderMarks = PropTypes.shape({
|
||||
// style: PropTypes.object,
|
||||
// label: PropTypes.any,
|
||||
// }).loose
|
||||
const tooltipProps = abstractTooltipProps();
|
||||
export const SliderProps = () => ({
|
||||
prefixCls: PropTypes.string,
|
||||
|
|
@ -41,21 +31,23 @@ export const SliderProps = () => ({
|
|||
getTooltipPopupContainer: PropTypes.func,
|
||||
});
|
||||
|
||||
const defaultTipFormatter = value => value.toString();
|
||||
|
||||
const Slider = {
|
||||
name: 'ASlider',
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
inheritAttrs: false,
|
||||
// model: {
|
||||
// prop: 'value',
|
||||
// event: 'change',
|
||||
// },
|
||||
mixins: [BaseMixin],
|
||||
inject: {
|
||||
configProvider: { default: () => ConfigConsumerProps },
|
||||
setup() {
|
||||
return {
|
||||
configProvider: inject('configProvider', ConfigConsumerProps),
|
||||
};
|
||||
},
|
||||
props: {
|
||||
...SliderProps(),
|
||||
tipFormatter: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).def(value =>
|
||||
value.toString(),
|
||||
),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -71,13 +63,9 @@ const Slider = {
|
|||
},
|
||||
}));
|
||||
},
|
||||
handleWithTooltip(
|
||||
tooltipPrefixCls,
|
||||
prefixCls,
|
||||
{ value, dragging, index, directives, on, ...restProps },
|
||||
) {
|
||||
handleWithTooltip(tooltipPrefixCls, prefixCls, { value, dragging, index, ...restProps }) {
|
||||
const {
|
||||
tipFormatter,
|
||||
tipFormatter = defaultTipFormatter,
|
||||
tooltipVisible,
|
||||
tooltipPlacement,
|
||||
getTooltipPopupContainer,
|
||||
|
|
@ -86,28 +74,20 @@ const Slider = {
|
|||
const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
|
||||
const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
|
||||
const tooltipProps = {
|
||||
props: {
|
||||
prefixCls: tooltipPrefixCls,
|
||||
title: tipFormatter ? tipFormatter(value) : '',
|
||||
visible,
|
||||
placement: tooltipPlacement || 'top',
|
||||
transitionName: 'zoom-down',
|
||||
overlayClassName: `${prefixCls}-tooltip`,
|
||||
getPopupContainer: getTooltipPopupContainer || (() => document.body),
|
||||
},
|
||||
prefixCls: tooltipPrefixCls,
|
||||
title: tipFormatter ? tipFormatter(value) : '',
|
||||
visible,
|
||||
placement: tooltipPlacement || 'top',
|
||||
transitionName: 'zoom-down',
|
||||
overlayClassName: `${prefixCls}-tooltip`,
|
||||
getPopupContainer: getTooltipPopupContainer || (() => document.body),
|
||||
key: index,
|
||||
};
|
||||
const handleProps = {
|
||||
props: {
|
||||
value,
|
||||
...restProps,
|
||||
},
|
||||
directives,
|
||||
on: {
|
||||
...on,
|
||||
mouseenter: () => this.toggleTooltipVisible(index, true),
|
||||
mouseleave: () => this.toggleTooltipVisible(index, false),
|
||||
},
|
||||
value,
|
||||
...restProps,
|
||||
onMouseenter: () => this.toggleTooltipVisible(index, true),
|
||||
onMouseleave: () => this.toggleTooltipVisible(index, false),
|
||||
};
|
||||
return (
|
||||
<Tooltip {...tooltipProps}>
|
||||
|
|
@ -115,11 +95,14 @@ const Slider = {
|
|||
</Tooltip>
|
||||
);
|
||||
},
|
||||
saveSlider(node) {
|
||||
this.vcSlider = node;
|
||||
},
|
||||
focus() {
|
||||
this.$refs.sliderRef.focus();
|
||||
this.vcSlider.focus();
|
||||
},
|
||||
blur() {
|
||||
this.$refs.sliderRef.blur();
|
||||
this.vcSlider.blur();
|
||||
},
|
||||
},
|
||||
render() {
|
||||
|
|
@ -128,42 +111,34 @@ const Slider = {
|
|||
prefixCls: customizePrefixCls,
|
||||
tooltipPrefixCls: customizeTooltipPrefixCls,
|
||||
...restProps
|
||||
} = getOptionProps(this);
|
||||
} = { ...getOptionProps(this), ...this.$attrs };
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('slider', customizePrefixCls);
|
||||
const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
|
||||
const listeners = getListeners(this);
|
||||
if (range) {
|
||||
const vcRangeProps = {
|
||||
props: {
|
||||
...restProps,
|
||||
prefixCls,
|
||||
tooltipPrefixCls,
|
||||
handle: info => this.handleWithTooltip(tooltipPrefixCls, prefixCls, info),
|
||||
},
|
||||
ref: 'sliderRef',
|
||||
on: listeners,
|
||||
};
|
||||
return <VcRange {...vcRangeProps} />;
|
||||
}
|
||||
const vcSliderProps = {
|
||||
props: {
|
||||
...restProps,
|
||||
prefixCls,
|
||||
tooltipPrefixCls,
|
||||
handle: info => this.handleWithTooltip(tooltipPrefixCls, prefixCls, info),
|
||||
},
|
||||
ref: 'sliderRef',
|
||||
on: listeners,
|
||||
ref: this.saveSlider,
|
||||
};
|
||||
return <VcRange {...vcRangeProps} />;
|
||||
}
|
||||
const vcSliderProps = {
|
||||
...restProps,
|
||||
prefixCls,
|
||||
tooltipPrefixCls,
|
||||
handle: info => this.handleWithTooltip(tooltipPrefixCls, prefixCls, info),
|
||||
ref: this.saveSlider,
|
||||
};
|
||||
return <VcSlider {...vcSliderProps} />;
|
||||
},
|
||||
};
|
||||
|
||||
/* istanbul ignore next */
|
||||
Slider.install = function(Vue) {
|
||||
Vue.use(Base);
|
||||
Vue.component(Slider.name, Slider);
|
||||
Slider.install = function(app) {
|
||||
app.component(Slider.name, Slider);
|
||||
};
|
||||
|
||||
export default Slider;
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ export default {
|
|||
},
|
||||
|
||||
getPopupDomNode() {
|
||||
return this.$refs.trigger.getPopupDomNode();
|
||||
return this.trigger.getPopupDomNode();
|
||||
},
|
||||
|
||||
getOpenClassName() {
|
||||
|
|
@ -133,13 +133,8 @@ export default {
|
|||
const rootNode = findDOMNode(this);
|
||||
if (rootNode && overlayNode && rootNode.offsetWidth > overlayNode.offsetWidth) {
|
||||
overlayNode.style.minWidth = `${rootNode.offsetWidth}px`;
|
||||
if (
|
||||
this.$refs.trigger &&
|
||||
this.$refs.trigger._component &&
|
||||
this.$refs.trigger._component.$refs &&
|
||||
this.$refs.trigger._component.$refs.alignInstance
|
||||
) {
|
||||
this.$refs.trigger._component.$refs.alignInstance.forceAlign();
|
||||
if (this.trigger && this.trigger._component && this.trigger._component.alignInstance) {
|
||||
this.trigger._component.alignInstance.forceAlign();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -152,6 +147,9 @@ export default {
|
|||
? cloneElement(children[0], { class: this.getOpenClassName() }, false)
|
||||
: children;
|
||||
},
|
||||
saveTrigger(node) {
|
||||
this.trigger = node;
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
|
|
@ -192,7 +190,7 @@ export default {
|
|||
getPopupContainer,
|
||||
onPopupVisibleChange: this.onVisibleChange,
|
||||
popup: this.getMenuElementOrLambda(),
|
||||
ref: 'trigger',
|
||||
ref: this.saveTrigger,
|
||||
};
|
||||
return <Trigger {...triggerProps}>{this.renderChildren()}</Trigger>;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
// base rc-slider 8.7.1
|
||||
import Vue from 'vue';
|
||||
import ref from 'vue-ref';
|
||||
import Slider from './src/';
|
||||
|
||||
Vue.use(ref, { name: 'ant-ref' });
|
||||
export default Slider;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import classNames from 'classnames';
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import { getOptionProps, getListeners } from '../../_util/props-util';
|
||||
import { getOptionProps } from '../../_util/props-util';
|
||||
import addEventListener from '../../vc-util/Dom/addEventListener';
|
||||
|
||||
export default {
|
||||
name: 'Handle',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
prefixCls: PropTypes.string,
|
||||
vertical: PropTypes.bool,
|
||||
|
|
@ -16,7 +17,6 @@ export default {
|
|||
max: PropTypes.number,
|
||||
value: PropTypes.number,
|
||||
tabindex: PropTypes.number,
|
||||
className: PropTypes.string,
|
||||
reverse: PropTypes.bool,
|
||||
// handleFocus: PropTypes.func.def(noop),
|
||||
// handleBlur: PropTypes.func.def(noop),
|
||||
|
|
@ -37,11 +37,14 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
setHandleRef(node) {
|
||||
this.handle = node;
|
||||
},
|
||||
setClickFocus(focused) {
|
||||
this.setState({ clickFocused: focused });
|
||||
},
|
||||
handleMouseUp() {
|
||||
if (document.activeElement === this.$refs.handle) {
|
||||
if (document.activeElement === this.handle) {
|
||||
this.setClickFocus(true);
|
||||
}
|
||||
},
|
||||
|
|
@ -57,10 +60,10 @@ export default {
|
|||
this.focus();
|
||||
},
|
||||
focus() {
|
||||
this.$refs.handle.focus();
|
||||
this.handle.focus();
|
||||
},
|
||||
blur() {
|
||||
this.$refs.handle.blur();
|
||||
this.handle.blur();
|
||||
},
|
||||
// when click can not focus in vue, use mousedown trigger focus
|
||||
handleMousedown(e) {
|
||||
|
|
@ -80,7 +83,7 @@ export default {
|
|||
value,
|
||||
tabindex,
|
||||
} = getOptionProps(this);
|
||||
const className = classNames(this.$props.className, {
|
||||
const className = classNames(this.$attrs.class, {
|
||||
[`${prefixCls}-handle-click-focused`]: this.clickFocused,
|
||||
});
|
||||
|
||||
|
|
@ -102,26 +105,26 @@ export default {
|
|||
'aria-valuenow': value,
|
||||
'aria-disabled': !!disabled,
|
||||
};
|
||||
const elStyle = {
|
||||
...this.$attrs.style,
|
||||
...positionStyle,
|
||||
};
|
||||
let _tabIndex = tabindex || 0;
|
||||
if (disabled || tabindex === null) {
|
||||
_tabIndex = null;
|
||||
}
|
||||
|
||||
const handleProps = {
|
||||
attrs: {
|
||||
role: 'slider',
|
||||
tabindex: _tabIndex,
|
||||
...ariaProps,
|
||||
},
|
||||
...this.$attrs,
|
||||
role: 'slider',
|
||||
tabindex: _tabIndex,
|
||||
...ariaProps,
|
||||
class: className,
|
||||
on: {
|
||||
...getListeners(this),
|
||||
blur: this.handleBlur,
|
||||
keydown: this.handleKeyDown,
|
||||
mousedown: this.handleMousedown,
|
||||
},
|
||||
ref: 'handle',
|
||||
style: positionStyle,
|
||||
onBlur: this.handleBlur,
|
||||
onKeydown: this.handleKeyDown,
|
||||
onMousedown: this.handleMousedown,
|
||||
ref: this.setHandleRef,
|
||||
style: elStyle,
|
||||
};
|
||||
return <div {...handleProps} />;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ const rangeProps = {
|
|||
};
|
||||
const Range = {
|
||||
name: 'Range',
|
||||
inheritAttrs: false,
|
||||
displayName: 'Range',
|
||||
mixins: [BaseMixin],
|
||||
props: initDefaultProps(rangeProps, {
|
||||
|
|
@ -407,7 +408,7 @@ const Range = {
|
|||
_tabIndex = null;
|
||||
}
|
||||
return handleGenerator({
|
||||
className: classNames({
|
||||
class: classNames({
|
||||
[handleClassName]: true,
|
||||
[`${handleClassName}-${i + 1}`]: true,
|
||||
}),
|
||||
|
|
@ -423,16 +424,9 @@ const Range = {
|
|||
reverse,
|
||||
disabled,
|
||||
style: handleStyle[i],
|
||||
directives: [
|
||||
{
|
||||
name: 'ant-ref',
|
||||
value: h => this.saveHandle(i, h),
|
||||
},
|
||||
],
|
||||
on: {
|
||||
focus: this.onFocus,
|
||||
blur: this.onBlur,
|
||||
},
|
||||
ref: h => this.saveHandle(i, h),
|
||||
onFocus: this.onFocus,
|
||||
onBlur: this.onBlur,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import PropTypes from '../../_util/vue-types';
|
||||
import warning from '../../_util/warning';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import { hasProp } from '../../_util/props-util';
|
||||
import Track from './common/Track';
|
||||
|
|
@ -8,6 +7,7 @@ import * as utils from './utils';
|
|||
|
||||
const Slider = {
|
||||
name: 'Slider',
|
||||
inheritAttrs: false,
|
||||
mixins: [BaseMixin],
|
||||
props: {
|
||||
defaultValue: PropTypes.number,
|
||||
|
|
@ -22,17 +22,6 @@ const Slider = {
|
|||
data() {
|
||||
const defaultValue = this.defaultValue !== undefined ? this.defaultValue : this.min;
|
||||
const value = this.value !== undefined ? this.value : defaultValue;
|
||||
|
||||
warning(
|
||||
!hasProp(this, 'minimumTrackStyle'),
|
||||
'Slider',
|
||||
'minimumTrackStyle will be deprecate, please use trackStyle instead.',
|
||||
);
|
||||
warning(
|
||||
!hasProp(this, 'maximumTrackStyle'),
|
||||
'Slider',
|
||||
'maximumTrackStyle will be deprecate, please use railStyle instead.',
|
||||
);
|
||||
return {
|
||||
sValue: this.trimAlignValue(value),
|
||||
dragging: false,
|
||||
|
|
@ -170,7 +159,7 @@ const Slider = {
|
|||
const { sValue, dragging } = this;
|
||||
const offset = this.calcOffset(sValue);
|
||||
const handles = handleGenerator({
|
||||
className: `${prefixCls}-handle`,
|
||||
class: `${prefixCls}-handle`,
|
||||
prefixCls,
|
||||
vertical,
|
||||
offset,
|
||||
|
|
@ -183,16 +172,9 @@ const Slider = {
|
|||
index: 0,
|
||||
tabindex,
|
||||
style: handleStyle[0] || handleStyle,
|
||||
directives: [
|
||||
{
|
||||
name: 'ant-ref',
|
||||
value: h => this.saveHandle(0, h),
|
||||
},
|
||||
],
|
||||
on: {
|
||||
focus: this.onFocus,
|
||||
blur: this.onBlur,
|
||||
},
|
||||
ref: h => this.saveHandle(0, h),
|
||||
onFocus: this.onFocus,
|
||||
onBlur: this.onBlur,
|
||||
});
|
||||
|
||||
const _trackStyle = trackStyle[0] || trackStyle;
|
||||
|
|
|
|||
|
|
@ -1,73 +1,71 @@
|
|||
import classNames from 'classnames';
|
||||
import { isValidElement } from '../../../_util/props-util';
|
||||
|
||||
const Marks = {
|
||||
functional: true,
|
||||
render(h, context) {
|
||||
const {
|
||||
className,
|
||||
vertical,
|
||||
reverse,
|
||||
marks,
|
||||
included,
|
||||
upperBound,
|
||||
lowerBound,
|
||||
max,
|
||||
min,
|
||||
} = context.props;
|
||||
const { clickLabel } = context.listeners;
|
||||
const marksKeys = Object.keys(marks);
|
||||
const Marks = (_, { attrs }) => {
|
||||
const {
|
||||
className,
|
||||
vertical,
|
||||
reverse,
|
||||
marks,
|
||||
included,
|
||||
upperBound,
|
||||
lowerBound,
|
||||
max,
|
||||
min,
|
||||
onClickLabel,
|
||||
} = attrs;
|
||||
const marksKeys = Object.keys(marks);
|
||||
|
||||
const range = max - min;
|
||||
const elements = marksKeys
|
||||
.map(parseFloat)
|
||||
.sort((a, b) => a - b)
|
||||
.map(point => {
|
||||
const markPoint = typeof marks[point] === 'function' ? marks[point](h) : marks[point];
|
||||
const markPointIsObject = typeof markPoint === 'object' && !isValidElement(markPoint);
|
||||
const markLabel = markPointIsObject ? markPoint.label : markPoint;
|
||||
if (!markLabel && markLabel !== 0) {
|
||||
return null;
|
||||
}
|
||||
const range = max - min;
|
||||
const elements = marksKeys
|
||||
.map(parseFloat)
|
||||
.sort((a, b) => a - b)
|
||||
.map(point => {
|
||||
const markPoint = typeof marks[point] === 'function' ? marks[point](h) : marks[point];
|
||||
const markPointIsObject = typeof markPoint === 'object' && !isValidElement(markPoint);
|
||||
const markLabel = markPointIsObject ? markPoint.label : markPoint;
|
||||
if (!markLabel && markLabel !== 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isActive =
|
||||
(!included && point === upperBound) ||
|
||||
(included && point <= upperBound && point >= lowerBound);
|
||||
const markClassName = classNames({
|
||||
[`${className}-text`]: true,
|
||||
[`${className}-text-active`]: isActive,
|
||||
});
|
||||
|
||||
const bottomStyle = {
|
||||
marginBottom: '-50%',
|
||||
[reverse ? 'top' : 'bottom']: `${((point - min) / range) * 100}%`,
|
||||
};
|
||||
|
||||
const leftStyle = {
|
||||
transform: `translateX(-50%)`,
|
||||
msTransform: `translateX(-50%)`,
|
||||
[reverse ? 'right' : 'left']: reverse
|
||||
? `${((point - min / 4) / range) * 100}%`
|
||||
: `${((point - min) / range) * 100}%`,
|
||||
};
|
||||
|
||||
const style = vertical ? bottomStyle : leftStyle;
|
||||
const markStyle = markPointIsObject ? { ...style, ...markPoint.style } : style;
|
||||
return (
|
||||
<span
|
||||
class={markClassName}
|
||||
style={markStyle}
|
||||
key={point}
|
||||
onMousedown={e => clickLabel(e, point)}
|
||||
onTouchstart={e => clickLabel(e, point)}
|
||||
>
|
||||
{markLabel}
|
||||
</span>
|
||||
);
|
||||
const isActive =
|
||||
(!included && point === upperBound) ||
|
||||
(included && point <= upperBound && point >= lowerBound);
|
||||
const markClassName = classNames({
|
||||
[`${className}-text`]: true,
|
||||
[`${className}-text-active`]: isActive,
|
||||
});
|
||||
|
||||
return <div class={className}>{elements}</div>;
|
||||
},
|
||||
const bottomStyle = {
|
||||
marginBottom: '-50%',
|
||||
[reverse ? 'top' : 'bottom']: `${((point - min) / range) * 100}%`,
|
||||
};
|
||||
|
||||
const leftStyle = {
|
||||
transform: `translateX(-50%)`,
|
||||
msTransform: `translateX(-50%)`,
|
||||
[reverse ? 'right' : 'left']: reverse
|
||||
? `${((point - min / 4) / range) * 100}%`
|
||||
: `${((point - min) / range) * 100}%`,
|
||||
};
|
||||
|
||||
const style = vertical ? bottomStyle : leftStyle;
|
||||
const markStyle = markPointIsObject ? { ...style, ...markPoint.style } : style;
|
||||
return (
|
||||
<span
|
||||
class={markClassName}
|
||||
style={markStyle}
|
||||
key={point}
|
||||
onMousedown={e => onClickLabel(e, point)}
|
||||
onTouchstart={e => onClickLabel(e, point)}
|
||||
>
|
||||
{markLabel}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
|
||||
return <div class={className}>{elements}</div>;
|
||||
};
|
||||
|
||||
Marks.inheritAttrs = false;
|
||||
export default Marks;
|
||||
|
|
|
|||
|
|
@ -20,49 +20,47 @@ const calcPoints = (vertical, marks, dots, step, min, max) => {
|
|||
return points;
|
||||
};
|
||||
|
||||
const Steps = {
|
||||
functional: true,
|
||||
render(h, context) {
|
||||
const {
|
||||
prefixCls,
|
||||
vertical,
|
||||
reverse,
|
||||
marks,
|
||||
dots,
|
||||
step,
|
||||
included,
|
||||
lowerBound,
|
||||
upperBound,
|
||||
max,
|
||||
min,
|
||||
dotStyle,
|
||||
activeDotStyle,
|
||||
} = context.props;
|
||||
const range = max - min;
|
||||
const elements = calcPoints(vertical, marks, dots, step, min, max).map(point => {
|
||||
const offset = `${(Math.abs(point - min) / range) * 100}%`;
|
||||
const Steps = (_, { attrs }) => {
|
||||
const {
|
||||
prefixCls,
|
||||
vertical,
|
||||
reverse,
|
||||
marks,
|
||||
dots,
|
||||
step,
|
||||
included,
|
||||
lowerBound,
|
||||
upperBound,
|
||||
max,
|
||||
min,
|
||||
dotStyle,
|
||||
activeDotStyle,
|
||||
} = attrs;
|
||||
const range = max - min;
|
||||
const elements = calcPoints(vertical, marks, dots, step, min, max).map(point => {
|
||||
const offset = `${(Math.abs(point - min) / range) * 100}%`;
|
||||
|
||||
const isActived =
|
||||
(!included && point === upperBound) ||
|
||||
(included && point <= upperBound && point >= lowerBound);
|
||||
let style = vertical
|
||||
? { ...dotStyle, [reverse ? 'top' : 'bottom']: offset }
|
||||
: { ...dotStyle, [reverse ? 'right' : 'left']: offset };
|
||||
if (isActived) {
|
||||
style = { ...style, ...activeDotStyle };
|
||||
}
|
||||
const isActived =
|
||||
(!included && point === upperBound) ||
|
||||
(included && point <= upperBound && point >= lowerBound);
|
||||
let style = vertical
|
||||
? { ...dotStyle, [reverse ? 'top' : 'bottom']: offset }
|
||||
: { ...dotStyle, [reverse ? 'right' : 'left']: offset };
|
||||
if (isActived) {
|
||||
style = { ...style, ...activeDotStyle };
|
||||
}
|
||||
|
||||
const pointClassName = classNames({
|
||||
[`${prefixCls}-dot`]: true,
|
||||
[`${prefixCls}-dot-active`]: isActived,
|
||||
[`${prefixCls}-dot-reverse`]: reverse,
|
||||
});
|
||||
|
||||
return <span class={pointClassName} style={style} key={point} />;
|
||||
const pointClassName = classNames({
|
||||
[`${prefixCls}-dot`]: true,
|
||||
[`${prefixCls}-dot-active`]: isActived,
|
||||
[`${prefixCls}-dot-reverse`]: reverse,
|
||||
});
|
||||
|
||||
return <div class={`${prefixCls}-step`}>{elements}</div>;
|
||||
},
|
||||
return <span class={pointClassName} style={style} key={point} />;
|
||||
});
|
||||
|
||||
return <div class={`${prefixCls}-step`}>{elements}</div>;
|
||||
};
|
||||
|
||||
Steps.inheritAttrs = false;
|
||||
export default Steps;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,25 @@
|
|||
/* eslint-disable */
|
||||
const Track = {
|
||||
functional: true,
|
||||
render(h, context) {
|
||||
const { included, vertical, offset, length, reverse } = context.props;
|
||||
const { style, class: className } = context.data;
|
||||
const Track = (_, { attrs }) => {
|
||||
const { included, vertical, offset, length, reverse, style, class: className } = attrs;
|
||||
|
||||
const positonStyle = vertical
|
||||
? {
|
||||
[reverse ? 'top' : 'bottom']: `${offset}%`,
|
||||
[reverse ? 'bottom' : 'top']: 'auto',
|
||||
height: `${length}%`,
|
||||
}
|
||||
: {
|
||||
[reverse ? 'right' : 'left']: `${offset}%`,
|
||||
[reverse ? 'left' : 'right']: 'auto',
|
||||
width: `${length}%`,
|
||||
};
|
||||
const positonStyle = vertical
|
||||
? {
|
||||
[reverse ? 'top' : 'bottom']: `${offset}%`,
|
||||
[reverse ? 'bottom' : 'top']: 'auto',
|
||||
height: `${length}%`,
|
||||
}
|
||||
: {
|
||||
[reverse ? 'right' : 'left']: `${offset}%`,
|
||||
[reverse ? 'left' : 'right']: 'auto',
|
||||
width: `${length}%`,
|
||||
};
|
||||
|
||||
const elStyle = {
|
||||
...style,
|
||||
...positonStyle,
|
||||
};
|
||||
return included ? <div class={className} style={elStyle} /> : null;
|
||||
},
|
||||
const elStyle = {
|
||||
...style,
|
||||
...positonStyle,
|
||||
};
|
||||
return included ? <div class={className} style={elStyle} /> : null;
|
||||
};
|
||||
|
||||
Track.inheritAttrs = false;
|
||||
export default Track;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import classNames from 'classnames';
|
|||
import PropTypes from '../../../_util/vue-types';
|
||||
import addEventListener from '../../../vc-util/Dom/addEventListener';
|
||||
import warning from '../../../_util/warning';
|
||||
import { initDefaultProps } from '../../../_util/props-util';
|
||||
import { initDefaultProps, getSlot } from '../../../_util/props-util';
|
||||
import Steps from './Steps';
|
||||
import Marks from './Marks';
|
||||
import Handle from '../Handle';
|
||||
|
|
@ -35,11 +35,12 @@ export default function createSlider(Component) {
|
|||
};
|
||||
return {
|
||||
name: 'createSlider',
|
||||
inheritAttrs: false,
|
||||
mixins: [Component],
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
// model: {
|
||||
// prop: 'value',
|
||||
// event: 'change',
|
||||
// },
|
||||
props: initDefaultProps(propTypes, {
|
||||
prefixCls: 'rc-slider',
|
||||
min: 0,
|
||||
|
|
@ -73,7 +74,7 @@ export default function createSlider(Component) {
|
|||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
// Snapshot testing cannot handle refs, so be sure to null-check this.
|
||||
this.document = this.$refs.sliderRef && this.$refs.sliderRef.ownerDocument;
|
||||
this.document = this.sliderRef && this.sliderRef.ownerDocument;
|
||||
// this.setHandleRefs()
|
||||
const { autofocus, disabled } = this;
|
||||
if (autofocus && !disabled) {
|
||||
|
|
@ -88,20 +89,16 @@ export default function createSlider(Component) {
|
|||
});
|
||||
},
|
||||
methods: {
|
||||
defaultHandle({ index, directives, className, style, on, ...restProps }) {
|
||||
defaultHandle({ index, directives, className, style, ...restProps }) {
|
||||
delete restProps.dragging;
|
||||
if (restProps.value === null) {
|
||||
return null;
|
||||
}
|
||||
const handleProps = {
|
||||
props: {
|
||||
...restProps,
|
||||
},
|
||||
...restProps,
|
||||
class: className,
|
||||
style,
|
||||
key: index,
|
||||
directives,
|
||||
on,
|
||||
};
|
||||
return <Handle {...handleProps} />;
|
||||
},
|
||||
|
|
@ -159,7 +156,7 @@ export default function createSlider(Component) {
|
|||
}
|
||||
},
|
||||
onMouseMove(e) {
|
||||
if (!this.$refs.sliderRef) {
|
||||
if (!this.sliderRef) {
|
||||
this.onEnd();
|
||||
return;
|
||||
}
|
||||
|
|
@ -167,7 +164,7 @@ export default function createSlider(Component) {
|
|||
this.onMove(e, position - this.dragOffset);
|
||||
},
|
||||
onTouchMove(e) {
|
||||
if (utils.isNotTouchEvent(e) || !this.$refs.sliderRef) {
|
||||
if (utils.isNotTouchEvent(e) || !this.sliderRef) {
|
||||
this.onEnd();
|
||||
return;
|
||||
}
|
||||
|
|
@ -176,7 +173,7 @@ export default function createSlider(Component) {
|
|||
this.onMove(e, position - this.dragOffset);
|
||||
},
|
||||
onKeyDown(e) {
|
||||
if (this.$refs.sliderRef && utils.isEventFromHandle(e, this.handlesRefs)) {
|
||||
if (this.sliderRef && utils.isEventFromHandle(e, this.handlesRefs)) {
|
||||
this.onKeyboard(e);
|
||||
}
|
||||
},
|
||||
|
|
@ -186,7 +183,7 @@ export default function createSlider(Component) {
|
|||
this.setState({ sValue: value }, () => this.onEnd(true));
|
||||
},
|
||||
getSliderStart() {
|
||||
const slider = this.$refs.sliderRef;
|
||||
const slider = this.sliderRef;
|
||||
const { vertical, reverse } = this;
|
||||
const rect = slider.getBoundingClientRect();
|
||||
if (vertical) {
|
||||
|
|
@ -195,7 +192,7 @@ export default function createSlider(Component) {
|
|||
return window.pageXOffset + (reverse ? rect.right : rect.left);
|
||||
},
|
||||
getSliderLength() {
|
||||
const slider = this.$refs.sliderRef;
|
||||
const slider = this.sliderRef;
|
||||
if (!slider) {
|
||||
return 0;
|
||||
}
|
||||
|
|
@ -252,11 +249,14 @@ export default function createSlider(Component) {
|
|||
const ratio = (value - min) / (max - min);
|
||||
return ratio * 100;
|
||||
},
|
||||
saveSlider(slider) {
|
||||
this.sliderRef = slider;
|
||||
},
|
||||
saveHandle(index, handle) {
|
||||
this.handlesRefs[index] = handle;
|
||||
},
|
||||
},
|
||||
render(h) {
|
||||
render() {
|
||||
const {
|
||||
prefixCls,
|
||||
marks,
|
||||
|
|
@ -273,32 +273,29 @@ export default function createSlider(Component) {
|
|||
dotStyle,
|
||||
activeDotStyle,
|
||||
} = this;
|
||||
const { tracks, handles } = this.renderSlider(h);
|
||||
const { class: className, style } = this.$attrs;
|
||||
const { tracks, handles } = this.renderSlider();
|
||||
|
||||
const sliderClassName = classNames(prefixCls, {
|
||||
const sliderClassName = classNames(prefixCls, className, {
|
||||
[`${prefixCls}-with-marks`]: Object.keys(marks).length,
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
[`${prefixCls}-vertical`]: vertical,
|
||||
});
|
||||
const markProps = {
|
||||
props: {
|
||||
vertical,
|
||||
marks,
|
||||
included,
|
||||
lowerBound: this.getLowerBound(),
|
||||
upperBound: this.getUpperBound(),
|
||||
max,
|
||||
min,
|
||||
reverse,
|
||||
className: `${prefixCls}-mark`,
|
||||
},
|
||||
on: {
|
||||
clickLabel: disabled ? noop : this.onClickMarkLabel,
|
||||
},
|
||||
vertical,
|
||||
marks,
|
||||
included,
|
||||
lowerBound: this.getLowerBound(),
|
||||
upperBound: this.getUpperBound(),
|
||||
max,
|
||||
min,
|
||||
reverse,
|
||||
class: `${prefixCls}-mark`,
|
||||
onClickLabel: disabled ? noop : this.onClickMarkLabel,
|
||||
};
|
||||
return (
|
||||
<div
|
||||
ref="sliderRef"
|
||||
ref={this.saveSlider}
|
||||
tabindex="-1"
|
||||
class={sliderClassName}
|
||||
onTouchstart={disabled ? noop : this.onTouchStart}
|
||||
|
|
@ -307,6 +304,7 @@ export default function createSlider(Component) {
|
|||
onKeydown={disabled ? noop : this.onKeyDown}
|
||||
onFocus={disabled ? noop : this.onFocus}
|
||||
onBlur={disabled ? noop : this.onBlur}
|
||||
style={style}
|
||||
>
|
||||
<div
|
||||
class={`${prefixCls}-rail`}
|
||||
|
|
@ -333,7 +331,7 @@ export default function createSlider(Component) {
|
|||
/>
|
||||
{handles}
|
||||
<Marks {...markProps} />
|
||||
{this.$slots.default}
|
||||
{getSlot(this)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import Handle from './Handle';
|
|||
|
||||
export default function createSliderWithTooltip(Component) {
|
||||
return {
|
||||
name: 'SliderTooltip',
|
||||
inheritAttrs: false,
|
||||
mixins: [BaseMixin, Component],
|
||||
props: {
|
||||
...Component.props,
|
||||
|
|
@ -50,27 +52,19 @@ export default function createSliderWithTooltip(Component) {
|
|||
}
|
||||
|
||||
const tooltipProps = {
|
||||
props: {
|
||||
...restTooltipProps,
|
||||
prefixCls,
|
||||
overlay,
|
||||
placement,
|
||||
visible: (!disabled && (this.visibles[index] || dragging)) || visible,
|
||||
},
|
||||
...restTooltipProps,
|
||||
prefixCls,
|
||||
overlay,
|
||||
placement,
|
||||
visible: (!disabled && (this.visibles[index] || dragging)) || visible,
|
||||
key: index,
|
||||
};
|
||||
const handleProps = {
|
||||
props: {
|
||||
value,
|
||||
...restProps,
|
||||
},
|
||||
on: {
|
||||
mouseenter: () => this.handleTooltipVisibleChange(index, true),
|
||||
mouseleave: () => this.handleTooltipVisibleChange(index, false),
|
||||
},
|
||||
style: {
|
||||
...handleStyleWithIndex,
|
||||
},
|
||||
value,
|
||||
...restProps,
|
||||
onMouseenter: () => this.handleTooltipVisibleChange(index, true),
|
||||
onMouseleave: () => this.handleTooltipVisibleChange(index, false),
|
||||
style: handleStyleWithIndex,
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -82,10 +76,8 @@ export default function createSliderWithTooltip(Component) {
|
|||
},
|
||||
render() {
|
||||
const componentProps = {
|
||||
props: {
|
||||
...getOptionProps(this),
|
||||
handle: this.handleWithTooltip,
|
||||
},
|
||||
...getOptionProps(this),
|
||||
handle: this.handleWithTooltip,
|
||||
};
|
||||
return <Component {...componentProps} />;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import keyCode from '../../_util/KeyCode';
|
||||
import { findDOMNode } from '../../_util/props-util';
|
||||
|
||||
export function isEventFromHandle(e, handles) {
|
||||
try {
|
||||
return Object.keys(handles).some(
|
||||
key => e.target === handles[key].$el || e.target === handles[key],
|
||||
key => e.target === findDOMNode(handles[key]) || e.target === handles[key],
|
||||
);
|
||||
} catch (error) {
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import LazyRenderBox from './LazyRenderBox';
|
|||
import animate from '../_util/css-animation';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { saveRef } from './utils';
|
||||
import { getListeners, splitAttrs, findDOMNode } from '../_util/props-util';
|
||||
import { splitAttrs, findDOMNode } from '../_util/props-util';
|
||||
|
||||
export default {
|
||||
name: 'VCTriggerPopup',
|
||||
|
|
@ -82,8 +82,8 @@ export default {
|
|||
this.currentAlignClassName = currentAlignClassName;
|
||||
popupDomNode.className = this.getClassName(currentAlignClassName);
|
||||
}
|
||||
const listeners = getListeners(this);
|
||||
listeners.align && listeners.align(popupDomNode, align);
|
||||
const { onaAlign } = this.$attrs;
|
||||
onaAlign && onaAlign(popupDomNode, align);
|
||||
},
|
||||
|
||||
// Record size if stretch needed
|
||||
|
|
|
|||
|
|
@ -560,8 +560,8 @@ export default {
|
|||
return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1;
|
||||
},
|
||||
forcePopupAlign() {
|
||||
if (this.$data.sPopupVisible && this._component && this._component.$refs.alignInstance) {
|
||||
this._component.$refs.alignInstance.forceAlign();
|
||||
if (this.$data.sPopupVisible && this._component && this._component.alignInstance) {
|
||||
this._component.alignInstance.forceAlign();
|
||||
}
|
||||
},
|
||||
fireEvents(type, e) {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import demo from '../antdv-demo/docs/tree-select/demo/treeData';
|
||||
import demo from '../antdv-demo/docs/slider/demo/basic';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ import {
|
|||
Tree,
|
||||
TreeSelect,
|
||||
Transfer,
|
||||
Slider,
|
||||
notification,
|
||||
message,
|
||||
} from 'ant-design-vue';
|
||||
|
|
@ -80,4 +81,5 @@ app
|
|||
.use(Tree)
|
||||
.use(TreeSelect)
|
||||
.use(Transfer)
|
||||
.use(Slider)
|
||||
.mount('#app');
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
"@commitlint/config-conventional": "^8.0.0",
|
||||
"@octokit/rest": "^16.0.0",
|
||||
"@vue/cli-plugin-eslint": "^4.0.0",
|
||||
"@vue/compiler-sfc": "^3.0.0-rc.1",
|
||||
"@vue/compiler-sfc": "^3.0.0-rc.2",
|
||||
"@vue/server-test-utils": "1.0.0-beta.16",
|
||||
"@vue/test-utils": "^2.0.0-alpha.6",
|
||||
"acorn": "^7.0.0",
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
"terser-webpack-plugin": "^3.0.3",
|
||||
"through2": "^3.0.0",
|
||||
"url-loader": "^3.0.0",
|
||||
"vue": "^3.0.0-rc.1",
|
||||
"vue": "^3.0.0-rc.2",
|
||||
"vue-antd-md-loader": "^1.1.0",
|
||||
"vue-clipboard2": "0.3.1",
|
||||
"vue-draggable-resizable": "^2.1.0",
|
||||
|
|
|
|||
Loading…
Reference in New Issue