diff --git a/devui/slider/index.ts b/devui/slider/index.ts index f4596b7734eec02a4e6729d10d96a3013edc3f4b..8138b2bac28521d81f60eb1197a83846aae2e1b5 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 42aa76888eb714b6f090b2b1782b9f4d8dcd7c7e..603897f3717d50c13301bf852b243cdd69b4078d 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 756f164a1f507a1fa5abe07262dd0a616d91c9f4..ac66b0a21b20200ff034d947a4c7f8bf7a0b9621 100644 --- a/devui/slider/src/slider.scss +++ b/devui/slider/src/slider.scss @@ -6,7 +6,7 @@ .devui-slider { position: relative; - width: 70%; + width: 90%; display: block; &.disabled { @@ -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 35975ec450eca20885d09ce36141b68b88e32320..0e4fc5f38d21de3710fcaaa55966c1e15c564d1b 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 0fc45b72434b53830f248a512e924a7be5f9f33b..e8af1c7278744b4917ac8c447fa3ffd26fbe07a6 100644 --- a/docs/components/slider/index.md +++ b/docs/components/slider/index.md @@ -1,7 +1,5 @@ # Slider 滑动输入条 -滑动输入条。 - ### 何时使用 当用户需要在数值区间内进行选择时使用。 @@ -11,23 +9,57 @@ :::demo ```vue - + + +``` + +::: + +### 可设置 Step 的滑动组件 + +:::demo + +```vue + + ``` @@ -38,89 +70,101 @@ :::demo ```vue - - ``` ::: -### 可设置 Step 的滑动组件 +### 禁止输入态 + :::demo ```vue - + ``` + ::: -### 禁止输入态 +### 异定制 Popover 的显示内容 +通过 tipsRenderer 参数传入函数定制 Popover 内的显示内容。 :::demo ```vue - + ``` + ::: ### API d-slider 参数 -| 参数 | 类型 | 默认 | 说明 | 跳转 | -| --------- | ------- | ----- | ------------------------------------------------------------------- | ---- | -| max | number | 100 | 可选，滑动输入条的最大值 |[基本用法](#基本用法) | -| min | number | 0 | 可选，滑动输入条的最小值 |[基本用法](#基本用法) | -| showInput | boolean | false | 可选，值为 true 显示输入框 |[带有输入框的滑动组件](#带有输入框的滑动组件) | -| step | number | 1 | 可选，滑动输入条的步长，取值必须大于等于1，且必须可被(max-min)整除 |[可设置 Step 的滑动组件](#可设置Step的滑动组件) | -| disabled | boolean | false | 可选，值为 true 时禁止用户输入 |[禁止输入态](#禁止输入态) | \ No newline at end of file +| 参数 | 类型 | 默认 | 说明 | 跳转 | +| ------------ | ------- | ----- | ------------------------------------------------------------------- | ------------------------------------ | +| max | number | 100 | 可选，滑动输入条的最大值 | [基本用法](#基本用法) | +| min | number | 0 | 可选，滑动输入条的最小值 | [基本用法](#基本用法) | +| step | number | 1 | 可选，滑动输入条的步长，取值必须大于等于 1，且必须可被(max-min)整除 | [基本用法](#可设置Step的滑动组件) | +| disabled | boolean | false | 可选，值为 true 时禁止用户输入 | [基本用法](#禁止输入态) | +| showInput | boolean | false | 可选，值为 true 显示输入框 | [基本用法](#带有输入框的滑动组件) | +| tipsRenderer | string | | 可选，渲染 Popover 内容的函数，传入 null 时不显示 Popover | [基本用法](#异定制popover的显示内容) |