Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
2f9d1c42
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
2f9d1c42
编写于
3月 23, 2021
作者:
S
suzigang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
style: rang
上级
132099b3
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
36 addition
and
51 deletion
+36
-51
src/config.json
src/config.json
+1
-1
src/packages/range/demo.vue
src/packages/range/demo.vue
+1
-1
src/packages/range/doc.md
src/packages/range/doc.md
+11
-12
src/packages/range/index.scss
src/packages/range/index.scss
+8
-14
src/packages/range/index.vue
src/packages/range/index.vue
+4
-23
src/styles/variables.scss
src/styles/variables.scss
+11
-0
未找到文件。
src/config.json
浏览文件 @
2f9d1c42
...
...
@@ -353,7 +353,7 @@
"cName"
:
"下拉刷新"
,
"desc"
:
"下拉刷新"
,
"sort"
:
16
,
"show"
:
tru
e
,
"show"
:
fals
e
,
"author"
:
"yangxiaolu3"
},
{
...
...
src/packages/range/demo.vue
浏览文件 @
2f9d1c42
...
...
@@ -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
...
...
src/packages/range/doc.md
浏览文件 @
2f9d1c42
...
...
@@ -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 | 结束拖动时触发 | - |
...
...
src/packages/range/index.scss
浏览文件 @
2f9d1c42
...
...
@@ -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
);
}
}
...
...
src/packages/range/index.vue
浏览文件 @
2f9d1c42
...
...
@@ -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
<
CSSProperties
>
(()
=>
{
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
;
};
...
...
src/styles/variables.scss
浏览文件 @
2f9d1c42
...
...
@@ -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
;
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录