refactor: refactor backtop to support namespace (#5552)

This commit is contained in:
iamkun 2022-01-23 17:53:51 +08:00 committed by GitHub
parent bc1548d2f7
commit 0ecb3faf23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,16 +1,16 @@
<template>
<transition name="el-fade-in">
<transition :name="`${ns.namespace.value}-fade-in`">
<div
v-if="visible"
:style="{
right: styleRight,
bottom: styleBottom,
}"
class="el-backtop"
:class="ns.b()"
@click.stop="handleClick"
>
<slot>
<el-icon class="el-backtop__icon"><caret-top /></el-icon>
<el-icon :class="ns.e('icon')"><caret-top /></el-icon>
</slot>
</div>
</transition>
@ -23,6 +23,7 @@ import { ElIcon } from '@element-plus/components/icon'
import { easeInOutCubic } from '@element-plus/utils/animation'
import { throwError } from '@element-plus/utils/error'
import { CaretTop } from '@element-plus/icons-vue'
import { useNamespace } from '@element-plus/hooks'
import { backtopEmits, backtopProps } from './backtop'
@ -38,6 +39,7 @@ export default defineComponent({
emits: backtopEmits,
setup(props, { emit }) {
const ns = useNamespace('backtop')
const el = shallowRef<HTMLElement | undefined>(document.documentElement)
const container = shallowRef<Document | HTMLElement>(document)
const visible = ref(false)
@ -88,6 +90,7 @@ export default defineComponent({
styleBottom,
styleRight,
handleClick,
ns,
}
},
})