From 2f9d1c4217fb7671013a39eb662c8c688cb6a734 Mon Sep 17 00:00:00 2001 From: suzigang <1039168735@qq.com> Date: Tue, 23 Mar 2021 15:56:39 +0800 Subject: [PATCH] style: rang --- src/config.json | 2 +- src/packages/range/demo.vue | 2 +- src/packages/range/doc.md | 23 +++++++++++------------ src/packages/range/index.scss | 22 ++++++++-------------- src/packages/range/index.vue | 27 ++++----------------------- src/styles/variables.scss | 11 +++++++++++ 6 files changed, 36 insertions(+), 51 deletions(-) diff --git a/src/config.json b/src/config.json index 9c68df472..85020b4fc 100644 --- a/src/config.json +++ b/src/config.json @@ -353,7 +353,7 @@ "cName": "下拉刷新", "desc": "下拉刷新", "sort": 16, - "show": true, + "show": false, "author": "yangxiaolu3" }, { diff --git a/src/packages/range/demo.vue b/src/packages/range/demo.vue index fc62c0bf8..fa2fe2663 100644 --- a/src/packages/range/demo.vue +++ b/src/packages/range/demo.vue @@ -75,7 +75,7 @@ export default createDemo({ value9: 60, value10: 50 }); - const onChange = value => Toast.text('当前值：' + value); + const onChange = (value: number) => Toast.text('当前值：' + value); return { ...toRefs(state), onChange diff --git a/src/packages/range/doc.md b/src/packages/range/doc.md index cfc7a1732..4d0134fdf 100644 --- a/src/packages/range/doc.md +++ b/src/packages/range/doc.md @@ -117,24 +117,23 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| v-model | 当前进度百分比 | _number \| number[]_ | `0` | -| range | 是否开启双滑块模式 | _boolean_ | `false` | -| max | 最大值 | _number \| string_ | `100` | -| min | 最小值 | _number \| string_ | `0` | -| step | 步长 | _number \| string_ | `1` | -| disabled | 是否禁用滑块 | _boolean_ | `false` | -| hidden-range | 是否隐藏范围值 | _boolean_ | `false` | -| hidden-tag | 是否隐藏标签 | _boolean_ | `false` | -| active-color | 进度条激活态颜色 | _string_ | `rgba(250, 44, 25, 1)` | -| inactive-color | 进度条非激活态颜色 | _string_ | `rgba(255, 163, 154, 1)` | -| button-color | 按钮颜色 | _string_ | `rgba(250, 44, 25, 1)` | +| v-model | 当前进度百分比 | Number、Number[] | `0` | +| range | 是否开启双滑块模式 | Boolean | `false` | +| max | 最大值 | Number、String | `100` | +| min | 最小值 | Number、String | `0` | +| step | 步长 | Number、String | `1` | +| disabled | 是否禁用滑块 | Boolean | `false` | +| hidden-range | 是否隐藏范围值 | Boolean | `false` | +| hidden-tag | 是否隐藏标签 | Boolean | `false` | +| active-color | 进度条激活态颜色 | String | `rgba(250, 44, 25, 1)` | +| inactive-color | 进度条非激活态颜色 | String | `rgba(255, 163, 154, 1)` | +| button-color | 按钮颜色 | String | `rgba(250, 44, 25, 1)` | ### Events | 事件名 | 说明 | 回调参数 | | ------------------ | ------------------------ | --------------- | -| update:model-value | 进度变化时实时触发 | value: 当前进度 | | change | 进度变化且结束拖动后触发 | value: 当前进度 | | drag-start | 开始拖动时触发 | - | | drag-end | 结束拖动时触发 | - | diff --git a/src/packages/range/index.scss b/src/packages/range/index.scss index 9f793bea4..f24213618 100644 --- a/src/packages/range/index.scss +++ b/src/packages/range/index.scss @@ -6,8 +6,8 @@ align-items: center; .min, .max { - font-size: 12px; - color: rgba(51, 51, 51, 1); + font-size: $font-size-1; + color: $range-max; user-select: none; } } @@ -16,7 +16,7 @@ position: relative; width: 100%; height: 3px; - background-color: rgba(255, 163, 154, 1); + background-color: $rang-bg-color; border-radius: 2px; cursor: pointer; &::before { @@ -33,13 +33,7 @@ position: relative; width: 100%; height: 100%; - background: linear-gradient( - 135deg, - rgba(250, 44, 25, 1) 0%, - rgba(250, 63, 25, 1) 45%, - rgba(250, 89, 25, 1) 83%, - rgba(250, 100, 25, 1) 100% - ); + background: $rang-bar-bg-color; border-radius: inherit; transition: all 0.2s; } @@ -48,10 +42,10 @@ display: block; width: 24px; height: 24px; - background-color: #fff; + background-color: $white; border-radius: 50%; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15); - border: 1px solid rgba(250, 44, 25, 1); + border: 1px solid $primary-color; outline: none; &-wrapper, @@ -80,8 +74,8 @@ align-items: center; justify-content: center; user-select: none; - font-size: 12px; - color: rgba(51, 51, 51, 1); + font-size: $font-size-1; + color: $range-max; transform: translate3d(0, -100%, 0); } } diff --git a/src/packages/range/index.vue b/src/packages/range/index.vue index 67765fcc4..25dbf3493 100644 --- a/src/packages/range/index.vue +++ b/src/packages/range/index.vue @@ -124,8 +124,6 @@ export default create({ emits: ['change', 'drag-end', 'drag-start', 'update:modelValue'], setup(props, { emit, slots }) { - console.log(slots.button && slots.button()); - const buttonIndex = ref(0); let startValue: SliderValue; let currentValue: SliderValue; @@ -134,7 +132,6 @@ export default create({ const dragStatus = ref<'start' | 'draging' | ''>(); const touch = useTouch(); - // 滑动范围计算 const scope = computed(() => Number(props.max) - Number(props.min)); const classes = computed(() => { @@ -146,49 +143,37 @@ export default create({ }; }); - // 滑轨样式 const wrapperStyle = computed(() => { return { background: props.inactiveColor }; }); - // 按钮样式 const buttonStyle = computed(() => { return { borderColor: props.buttonColor }; }); - // 判断是否是双滑块 const isRange = (val: unknown): val is number[] => !!props.range && Array.isArray(val); - // 组件核心：拖动效果主要是通过计算选中条长度百分比、开始位置偏移量来实现 - // 计算选中条的长度百分比 const calcMainAxis = () => { const { modelValue, min } = props; - // 双滑块时，拖动滑块，通过实时变化滑动条的宽度，间接让滑块移动 - // 如果拖动右滑块，则只会改变滑动条的宽度，开始位置偏移量不会变化 if (isRange(modelValue)) { return `${((modelValue[1] - modelValue[0]) * 100) / scope.value}%`; } - // 单滑块时，通过实时变化滑动条宽度，来让滑块移动 return `${((modelValue - Number(min)) * 100) / scope.value}%`; }; - // 计算选中条的开始位置的偏移量 const calcOffset = () => { const { modelValue, min } = props; - // 双滑块时，如果拖动左滑块，则不仅会改变滑动条宽度，还要改变滑动条的开始位置 if (isRange(modelValue)) { return `${((modelValue[0] - Number(min)) * 100) / scope.value}%`; } - // 单滑块时，开始位置永远是最左侧 return `0%`; }; - // 选中条样式 const barStyle = computed(() => { return { width: calcMainAxis(), @@ -200,15 +185,13 @@ export default create({ const format = (value: number) => { const { min, max, step } = props; - value = Math.max(+min, Math.min(value, +max)); // 拖动范围限制 - return Math.round(value / +step) * +step; // 每一步四舍五入 + value = Math.max(+min, Math.min(value, +max)); + return Math.round(value / +step) * +step; }; const isSameValue = (newValue: SliderValue, oldValue: SliderValue) => JSON.stringify(newValue) === JSON.stringify(oldValue); - // 处理两个滑块交错之后的情况 - // 例如左滑块移动到右滑块右边，这个时候需要将两个滑块值进行交换 const handleOverlap = (value: number[]) => { if (value[0] > value[1]) { return value.slice(0).reverse(); @@ -245,8 +228,6 @@ export default create({ if (isRange(modelValue)) { const [left, right] = modelValue; const middle = (left + right) / 2; - - // 靠左边点击移动左按钮，靠右边点击移动右按钮 if (value <= middle) { updateValue([value, right], true); } else { @@ -311,11 +292,11 @@ export default create({ dragStatus.value = ''; }; - const curValue = (idx?) => { + const curValue = (idx?: number) => { const value = typeof idx === 'number' ? (props.modelValue as number[])[idx] - : (props.modelValue as number); + : props.modelValue; return value; }; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 6cb448bec..2dffa5257 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -226,6 +226,17 @@ $tabbar-border-color: #eee; $infinite-bottom-color: #c8c8c8; +//range +$range-max: #333333; +$rang-bg-color: #ffa39a; +$rang-bar-bg-color: linear-gradient( + 135deg, + rgba(250, 44, 25, 1) 0%, + rgba(250, 63, 25, 1) 45%, + rgba(250, 89, 25, 1) 83%, + rgba(250, 100, 25, 1) 100% +); + view-block { display: block; } -- GitLab