Слияние кода завершено, страница обновится автоматически
「 回到顶部 」 组件用于在当前位置快速回到顶部
<!-- 默认监听 document.body 的 scroll 事件 -->
<mi-backtop />
<template>
<mi-backtop :listener-container="container" />
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
const container = ref<HTMLElement | null>(null)
onMounted(() => nextTick().then(() => container.value = document.getElement('mi-anchor-container')))
</script>
请查看 「
主题配置」组件
| Token | 默认值 |
|---|---|
--mi-backtop-background-start |
--mi-primary |
--mi-backtop-background-hint |
--mi-secondary |
--mi-backtop-background-stop |
--mi-tertiary |
--mi-backtop-icon |
--mi-on-secondary |
<mi-backtop>
MiBacktop 属性 ( Properties )| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
width |
number | string | DeviceSize
|
48 |
宽度 |
height |
number | string | DeviceSize
|
48 |
高度 |
radius |
number | string | DeviceSize
|
48 |
圆角弧度 |
offset |
number |
200 |
触发偏移量 |
duration |
number |
1000 |
滚动时长 |
tip |
string |
回到顶部 |
提示语 ( 移动端无效 ) |
zIndex |
number |
Date.now() |
容器层级 |
position |
Position |
{ bottom: 40, right: 40 } |
容器定位 |
background |
string |
'' |
背景色 |
icon |
vSlot |
<RocketOutlined /> |
图标 |
listenerContainer |
Window | HTMLElement |
document.body |
scroll 事件的监听容器 |
MiBacktop 事件 ( Events )| 方法 | 返回值 | 说明 |
|---|---|---|
end |
None | 回到顶部后的事件回调 |
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )