From a49bd72250045753c6d2f1629ddac76a3a27ba2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Chttpxiaobocom=E2=80=9D?= <731653765@qq.com> Date: Sun, 17 Oct 2021 17:49:15 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(slider):=20=E6=B7=BB=E5=8A=A0=E6=82=AC?= =?UTF-8?q?=E6=B5=AE=E6=98=BE=E7=A4=BA=E7=9A=84=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/slider/index.ts | 2 +- devui/slider/src/slider-types.ts | 4 ++ devui/slider/src/slider.scss | 29 ++++++++++++++ devui/slider/src/slider.tsx | 26 +++++++------ docs/components/slider/index.md | 66 +++++++++++--------------------- 5 files changed, 72 insertions(+), 55 deletions(-) diff --git a/devui/slider/index.ts b/devui/slider/index.ts index f4596b77..8138b2ba 100644 --- a/devui/slider/index.ts +++ b/devui/slider/index.ts @@ -10,7 +10,7 @@ export { Slider } export default { title: 'Slider 滑块', category: '数据录入', - status: '已完成', + status: '80%', install(app: App): void { app.use(Slider as any) } diff --git a/devui/slider/src/slider-types.ts b/devui/slider/src/slider-types.ts index 42aa7688..603897f3 100644 --- a/devui/slider/src/slider-types.ts +++ b/devui/slider/src/slider-types.ts @@ -24,5 +24,9 @@ export const sliderProps = { type: Number, default: 1, }, + tipsRenderer:{ + type: String, + default: '', + } } as const; export type SliderProps = ExtractPropTypes; diff --git a/devui/slider/src/slider.scss b/devui/slider/src/slider.scss index 756f164a..c91508b0 100644 --- a/devui/slider/src/slider.scss +++ b/devui/slider/src/slider.scss @@ -72,6 +72,35 @@ transform: none; } } + + .devui-slider_popover { + position: relative; + bottom: 26px; + transform: translate(-50%); + border-radius: $devui-border-radius-feedback; + font-size: $devui-font-size-sm; + color: $devui-feedback-overlay-text; + + .devui-slider_popover-arrow { + position: absolute; + left: 50%; + margin-left: -4px; + bottom: -4px; + width: 8px; + height: 8px; + transform: rotate(45deg); + display: block; + z-index: -1; + background-color: $devui-feedback-overlay-bg; + } + + .devui-slider_popover-content { + padding: 5px 14px; + text-align: center; + border-radius: $devui-border-radius-feedback; + background-color: $devui-feedback-overlay-bg; + } + } } .devui-min_count { diff --git a/devui/slider/src/slider.tsx b/devui/slider/src/slider.tsx index 35975ec4..0e4fc5f3 100644 --- a/devui/slider/src/slider.tsx +++ b/devui/slider/src/slider.tsx @@ -1,13 +1,9 @@ import { defineComponent, ref, computed, onMounted } from 'vue'; import { sliderProps } from './slider-types'; -import { Input } from '../../input'; import './slider.scss'; export default defineComponent({ name: 'DSlider', - components: { - Input, - }, props: sliderProps, emits: ['update:modelValue'], setup(props, ctx) { @@ -15,6 +11,7 @@ export default defineComponent({ let startPosition = 0; let startX = 0; + const popoverShow = ref(false); const sliderRunway = ref(null); const inputValue = ref(props.modelValue); const currentPosition = ref(0); @@ -30,7 +27,6 @@ export default defineComponent({ '' ); }; - //当传入modelValue时用以定位button的位置 if (props.modelValue > props.max) { percentDispaly.value = '100%'; @@ -39,14 +35,13 @@ export default defineComponent({ } else { percentDispaly.value = ((props.modelValue - props.min) * 100) / (props.max - props.min) + '%'; } - //一挂载就进行当前位置的计算，以后的移动基于当前的位置移动 onMounted(() => { const sliderWidth = sliderRunway.value.clientWidth; currentPosition.value = (sliderWidth * (inputValue.value - props.min)) / (props.max - props.min); }); - function handleonMousedown(event: MouseEvent) { + popoverShow.value = true; //props.disabled状态是不能点击拖拽的 if (props.disabled || props.disabled) return; //阻止默认事件 @@ -63,7 +58,6 @@ export default defineComponent({ //获取当前的x坐标值 startX = event.clientX; //把当前值给startPosition，以便后面再重新拖拽时,会以当前的位置计算偏移 - startPosition = currentPosition.value; newPostion.value = startPosition; } @@ -75,14 +69,15 @@ export default defineComponent({ * */ function onDragging(event: MouseEvent) { + popoverShow.value = true; const currentX = event.clientX; const pxOffset = currentX - startX; //移动的x方向上的偏移+初始位置等于新位置 newPostion.value = startPosition + pxOffset; - setPostion(newPostion.value); } function onDragEnd() { + popoverShow.value = false; //防止mouseup后立即执行click事件，mouseup后 //会立即执行click,但是isClick=true 是100ms才出发，因此不会执行click事件，就跳出来了 setTimeout(() => { @@ -112,7 +107,6 @@ export default defineComponent({ ctx.emit('update:modelValue', props.max); return; } - //向左偏移百分比的值 percentDispaly.value = Math.round((value * 100) / sliderWidth) + '%'; //更新输入框的值 @@ -121,7 +115,6 @@ export default defineComponent({ currentPosition.value = newPosition; ctx.emit('update:modelValue', inputValue.value); } - //当点击滑动条时, function handleClick(event) { if (!props.disabled && isClick) { @@ -156,6 +149,14 @@ export default defineComponent({ const disableClass = computed(() => { return props.disabled ? ' disabled' : ''; }); + const popover = () => { + return ( +
+
+
{inputValue.value + ' ' + props.tipsRenderer}
+
+ ); + }; return () => (
{/* 整个的长度 */} @@ -166,7 +167,10 @@ export default defineComponent({ class={'devui-slider__button' + disableClass.value} style={{ left: percentDispaly.value }} onMousedown={handleonMousedown} + onMouseenter={() => (popoverShow.value = true)} + onMouseout={() => (popoverShow.value = false)} >
+ {props.tipsRenderer === 'null' ? '' : popover()} {props.min} {props.max} diff --git a/docs/components/slider/index.md b/docs/components/slider/index.md index 0fc45b72..0f4b33f4 100644 --- a/docs/components/slider/index.md +++ b/docs/components/slider/index.md @@ -1,26 +1,22 @@ # Slider 滑动输入条 -滑动输入条。 - ### 何时使用 当用户需要在数值区间内进行选择时使用。 ### 基本用法 -:::demo + +:::demo ```vue - ``` - ::: +### 可设置 Step 的滑动组件 + +
+ ### 带有输入框的滑动组件 :::demo ```vue - - -``` +