naive-ui/demo/documentation/components/backTop/enUS/targetContainerSelector.md

44 lines
1.1 KiB
Markdown
Raw Normal View History

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
```