2019-10-25 17:53:41 +08:00
|
|
|
# Target
|
2019-12-06 13:42:00 +08:00
|
|
|
You can specify target to listen scroll event of.
|
2019-10-16 13:45:13 +08:00
|
|
|
```html
|
|
|
|
<n-back-top
|
2019-10-25 17:53:41 +08:00
|
|
|
:target="target"
|
2019-12-06 13:42:00 +08:00
|
|
|
:bottom="220"
|
2019-10-25 17:53:41 +08:00
|
|
|
:visibility-height="10"
|
2019-12-06 13:42:00 +08:00
|
|
|
:style="{
|
|
|
|
transition: 'all .3s cubic-bezier(.4, 0, .2, 1)'
|
|
|
|
}"
|
|
|
|
:themed-style="{
|
|
|
|
light: {
|
|
|
|
color: 'rgb(0, 0, 0)',
|
|
|
|
backgroundColor: 'rgba(0, 0, 0, .3)'
|
|
|
|
},
|
|
|
|
dark: {
|
|
|
|
color: 'rgb(255, 255, 255)',
|
|
|
|
backgroundColor: 'rgba(255, 255, 255, .3)'
|
|
|
|
}
|
|
|
|
}"
|
2019-10-16 13:45:13 +08:00
|
|
|
>
|
2019-12-06 13:42:00 +08:00
|
|
|
<div style="width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 14px;">
|
|
|
|
Specify Target
|
2019-10-16 13:45:13 +08:00
|
|
|
</div>
|
|
|
|
</n-back-top>
|
2019-12-06 13:42:00 +08:00
|
|
|
<div ref="scrollContainer" style="overflow: auto; height: 72px; line-height: 1.5;">
|
|
|
|
A funny joke is need to be wrote here.<br/>
|
|
|
|
A funny joke is need to be wrote here.<br/>
|
|
|
|
A funny joke is need to be wrote here.<br/>
|
|
|
|
A funny joke is need to be wrote here.<br/>
|
|
|
|
A funny joke is need to be wrote here.<br/>
|
|
|
|
A funny joke is need to be wrote here.<br/>
|
|
|
|
A funny joke is need to be wrote here.<br/>
|
2019-10-25 17:53:41 +08:00
|
|
|
</div>
|
2019-10-16 13:45:13 +08:00
|
|
|
```
|
|
|
|
```js
|
2019-10-25 17:53:41 +08:00
|
|
|
export default {
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
target: () => this.$refs.scrollContainer
|
2019-10-16 13:45:13 +08:00
|
|
|
}
|
|
|
|
}
|
2019-10-25 17:53:41 +08:00
|
|
|
}
|
2019-10-16 13:45:13 +08:00
|
|
|
```
|