Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
98e7468d
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,发现更多精彩内容 >>
提交
98e7468d
编写于
3月 15, 2021
作者:
S
suzigang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: backtop
上级
c6c19b9e
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
138 addition
and
94 deletion
+138
-94
src/packages/backtop/demo.vue
src/packages/backtop/demo.vue
+13
-4
src/packages/backtop/doc.md
src/packages/backtop/doc.md
+12
-15
src/packages/backtop/index.scss
src/packages/backtop/index.scss
+2
-6
src/packages/backtop/index.vue
src/packages/backtop/index.vue
+108
-69
src/styles/variables.scss
src/styles/variables.scss
+3
-0
未找到文件。
src/packages/backtop/demo.vue
浏览文件 @
98e7468d
<
template
>
<div
class=
"demo"
id=
"elId"
ref=
"scroll"
>
<div
class=
"demo"
id=
"elId"
>
<div
class=
"text-data"
>
我是测试数据1
</div>
<div
class=
"text-data"
>
我是测试数据2
</div>
<div
class=
"text-data"
>
我是测试数据3
</div>
...
...
@@ -24,10 +24,19 @@
<div
class=
"text-data"
>
我是测试数据22
</div>
<div
class=
"text-data"
>
我是测试数据23
</div>
<div
class=
"text-data"
>
我是测试数据24
</div>
<nut-backtop
@
click=
"handleClick"
elId=
"elId"
:distance=
"100"
:bottom=
"90"
><view>
无
</view></nut-backtop
<nut-backtop
@
click=
"handleClick"
:el-id=
"elId"
:distance=
"100"
:bottom=
"90"
>
<nut-backtop
@
click=
"handleClick"
elId=
"elId"
:distance=
"200"
></nut-backtop>
<view>
无
</view>
</nut-backtop>
<nut-backtop
@
click=
"handleClick"
:el-id=
"elId"
:distance=
"200"
></nut-backtop>
</div>
</
template
>
...
...
src/packages/backtop/doc.md
浏览文件 @
98e7468d
...
...
@@ -21,7 +21,7 @@ app.use(BackTop);
### 基本用法
```
html
<nut-backtop
elI
d=
"elId"
></nut-backtop>
<nut-backtop
:el-i
d=
"elId"
></nut-backtop>
```
### 设置出现位置
...
...
@@ -33,14 +33,9 @@ app.use(BackTop);
### 自定义样式
```
html
<nut-backtop
@
click=
"handleClick"
elI
d=
"elId"
:distance=
"100"
:bottom=
"90"
><div>
无
</div></nut-backtop>
<nut-backtop
@
click=
"handleClick"
:el-i
d=
"elId"
:distance=
"100"
:bottom=
"90"
><div>
无
</div></nut-backtop>
```
### 设置样式
<nut-backtop>
</nut-backtop>
### click事件
```
html
...
...
@@ -68,15 +63,17 @@ export default createDemo({
### Prop
| 字段 | 说明 | 类型 | 默认值 |
|-----------------|------------------------------------------------------------------------------------------------|---------|---------|
| elId | 获取监听元素的父级元素 | String | - |
| bottom | 距离页面底部距离 | Number | - |
| right | 距离页面右侧距离 | Number | |
| distance | 页面垂直滚动多高后出现 | Number | - |
| zIndex | 设置组件页面层级 | Number | - |
| 字段 | 说明 | 类型 | 默认值 |
|-----------------|------------------------------------------|---------|---------|
| el-id | 获取监听元素的父级元素 | String | - |
| bottom | 距离页面底部距离 | Number |
`20`
|
| right | 距离页面右侧距离 | Number |
`10`
|
| distance | 页面垂直滚动多高后出现 | Number |
`200`
|
| z-index | 设置组件页面层级 | Number |
`10`
|
| is-animation | 是否有动画,和duration参数互斥 | Boolean |
`true`
|
| duration | 设置动画持续时间 | Number |
`1000`
|
### Event
| 名称 | 说明 | 回调参数 |
|-------|----------|-------------|
| click | 按钮点击时触发事件 | event:Event |
\ No newline at end of file
| click | 按钮点击时触发事件 | event: MouseEvent |
\ No newline at end of file
src/packages/backtop/index.scss
浏览文件 @
98e7468d
.nut-backtop
{
display
:
none
;
position
:
fixed
;
bottom
:
20px
;
right
:
20px
;
z-index
:
111
;
&
.show
{
display
:
block
;
width
:
40px
;
height
:
40px
;
background
:
rgba
(
255
,
255
,
255
,
1
)
;
border
:
1px
solid
rgba
(
224
,
224
,
224
,
1
)
;
background
:
$white
;
border
:
1px
solid
$backtop-border-color
;
border-radius
:
50%
;
display
:
flex
;
align-items
:
center
;
...
...
src/packages/backtop/index.vue
浏览文件 @
98e7468d
<
template
>
<div
:class=
"['nut-backtop',
{ show: backTop }]"
:style="{
right: styleRight,
bottom: styleBottom,
'z-index': zIndex
}"
@click="click"
>
<div
:class=
"classes"
:style=
"style"
@
click.stop=
"click"
>
<slot>
<nut-icon
size=
"19px"
class=
"nut-backtop-main"
name=
"top"
></nut-icon>
</slot>
...
...
@@ -15,121 +7,168 @@
</
template
>
<
script
lang=
"ts"
>
import
{
computed
,
ref
,
onMounted
,
onUnmounted
}
from
'
vue
'
;
import
{
computed
,
onMounted
,
onUnmounted
,
onActivated
,
onDeactivated
,
reactive
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
create
}
=
createComponent
(
'
backtop
'
);
const
{
c
omponentName
,
c
reate
}
=
createComponent
(
'
backtop
'
);
export
default
create
({
props
:
{
//距离页面底部
bottom
:
{
type
:
Number
,
default
:
20
},
//距离页面右侧
right
:
{
type
:
Number
,
default
:
10
},
///获取容器ID
elId
:
{
type
:
String
,
default
:
''
},
//页面垂直滚动多高后出现
distance
:
{
type
:
Number
,
default
:
200
},
//设置层级
zIndex
:
{
type
:
Number
,
default
:
1111
default
:
10
},
isAnimation
:
{
type
:
Boolean
,
default
:
true
},
duration
:
{
type
:
Number
,
default
:
1000
}
},
emits
:
[
'
click
'
],
setup
(
props
,
{
emit
})
{
const
styleBottom
=
computed
(()
=>
`
${
props
.
bottom
}
px`
);
const
styleRight
=
computed
(()
=>
`
${
props
.
right
}
px`
);
// const styleDistance = computed(() => `${props.distance}px`);
const
zIndex
=
computed
(()
=>
`
${
props
.
zIndex
}
px`
);
//默认图标不出现
const
backTop
=
ref
(
false
);
const
state
=
reactive
({
backTop
:
false
,
scrollTop
:
0
,
scrollEl
:
window
as
HTMLElement
|
Window
,
startTime
:
0
,
keepAlive
:
false
});
let
scrollEl
:
Window
|
HTMLElement
=
window
;
const
elId
=
ref
(
props
.
elId
);
const
classes
=
computed
(()
=>
{
const
prefixCls
=
componentName
;
return
{
[
prefixCls
]:
true
,
show
:
state
.
backTop
};
});
const
style
=
computed
(()
=>
{
return
{
right
:
`
${
props
.
bottom
}
px`
,
bottom
:
`
${
props
.
right
}
px`
,
zIndex
:
props
.
zIndex
};
});
function
scrollListener
()
{
//滚动条偏移量
//Window
if
(
scrollEl
instanceof
Window
)
{
const
scrollTop
=
scrollEl
.
pageYOffset
!==
undefined
?
scrollEl
.
pageYOffset
:
''
;
backTop
.
value
=
scrollTop
>=
props
.
distance
;
//DOM
}
else
if
(
scrollEl
instanceof
HTMLElement
)
{
const
scrollTop
=
scrollEl
.
scrollTop
;
backTop
.
value
=
scrollTop
>=
props
.
distance
;
if
(
state
.
scrollEl
instanceof
Window
)
{
state
.
scrollTop
=
state
.
scrollEl
.
pageYOffset
;
}
else
{
state
.
scrollTop
=
state
.
scrollEl
.
scrollTop
;
}
state
.
backTop
=
state
.
scrollTop
>=
props
.
distance
;
}
//点击按钮返回顶部
function
scroll
(
y
=
0
)
{
if
(
scrollEl
instanceof
Window
)
{
if
(
s
tate
.
s
crollEl
instanceof
Window
)
{
window
.
scrollTo
(
0
,
y
);
}
else
if
(
scrollEl
instanceof
HTMLElement
)
{
scrollEl
.
scrollTop
=
y
;
}
else
{
s
tate
.
s
crollEl
.
scrollTop
=
y
;
}
}
//监听页面滚动事件
function
scrollAnimation
()
{
let
cid
=
requestAniFrame
()(
function
fn
()
{
var
t
=
props
.
duration
-
Math
.
max
(
0
,
state
.
startTime
-
+
new
Date
()
+
props
.
duration
);
var
y
=
(
t
*
-
state
.
scrollTop
)
/
props
.
duration
+
state
.
scrollTop
;
scroll
(
y
);
cid
=
requestAniFrame
()(
fn
);
if
(
t
==
props
.
duration
||
y
==
0
)
{
window
.
cancelAnimationFrame
(
cid
);
}
});
}
function
addEventListener
()
{
scrollEl
.
addEventListener
(
'
scroll
'
,
scrollListener
,
true
);
state
.
scrollEl
.
addEventListener
(
'
scroll
'
,
scrollListener
,
false
);
state
.
scrollEl
.
addEventListener
(
'
resize
'
,
scrollListener
,
false
);
}
//解绑监听页面滚动事件
function
removeEventListener
()
{
scrollEl
.
removeEventListener
(
'
scroll
'
,
scrollListener
,
true
);
state
.
scrollEl
.
removeEventListener
(
'
scroll
'
,
scrollListener
,
false
);
state
.
scrollEl
.
removeEventListener
(
'
resize
'
,
scrollListener
,
false
);
}
// function deactivated() {
// keepAlive.value = true;
// removeEventListener();
// }
onUnmounted
(()
=>
{
removeEventListener
()
;
}
);
function
initCancelAniFrame
()
{
window
.
cancelAnimationFrame
=
window
.
webkitCancelAnimationFrame
;
}
//点击回到顶部
function
click
()
{
scroll
();
emit
(
'
click
'
);
function
requestAniFrame
()
{
return
(
window
.
requestAnimationFrame
||
window
.
webkitRequestAnimationFrame
||
function
(
callback
)
{
window
.
setTimeout
(
callback
,
1000
/
60
);
}
);
}
function
init
()
{
//重新获取容器id
const
_scrollEl
=
document
.
getElementById
(
elId
.
value
);
function
click
(
e
:
MouseEvent
)
{
state
.
startTime
=
+
new
Date
();
props
.
isAnimation
&&
props
.
duration
>
0
?
scrollAnimation
()
:
scroll
();
emit
(
'
click
'
,
e
);
}
if
(
elId
.
value
&&
_scrollEl
)
{
scrollEl
=
_scrollEl
;
_scrollEl
.
style
.
scrollBehavior
=
'
smooth
'
;
function
init
()
{
if
(
props
.
elId
&&
document
.
getElementById
(
props
.
elId
))
{
state
.
scrollEl
=
document
.
getElementById
(
props
.
elId
)
as
|
HTMLElement
|
Window
;
}
addEventListener
();
scrollListener
();
initCancelAniFrame
();
}
onMounted
(()
=>
{
init
();
});
onUnmounted
(()
=>
{
removeEventListener
();
});
onActivated
(()
=>
{
if
(
state
.
keepAlive
)
{
state
.
keepAlive
=
false
;
init
();
}
});
onDeactivated
(()
=>
{
state
.
keepAlive
=
true
;
removeEventListener
();
});
return
{
backTop
,
scrollEl
,
click
,
styleBottom
,
styleRight
,
zIndex
state
,
classes
,
style
,
click
};
}
});
...
...
src/styles/variables.scss
浏览文件 @
98e7468d
...
...
@@ -145,6 +145,9 @@ $avatar-normal-height: 40px;
$switch-close-bg-color
:
#ebebeb
;
$switch-close--cline-bg-color
:
#f0f0f0
;
//backtop
$backtop-border-color
:
#e0e0e0
;
// calendar
$calendar-primary-color
:
$primary-color
;
$calendar-choose-color
:
#fef6f6
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录