mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): [affix] add namespace & instance type (#5474)

Browse Source
This commit is contained in:
三咲智子 2022-01-19 11:37:37 +08:00 committed by GitHub
parent 3cef197e65
commit 58463b9ba4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/components/affix/src/affix.ts
View File

@ -1,7 +1,7 @@
import { buildProps, definePropType } from '@element-plus/utils/props'
import type { ExtractPropTypes } from 'vue'
import type { ZIndexProperty } from 'csstype'
import type Affix from './affix.vue'
export const affixProps = buildProps({
zIndex: {
@ -30,3 +30,5 @@ export const affixEmits = {
change: (fixed: boolean) => typeof fixed === 'boolean',
}
export type AffixEmits = typeof affixEmits
export type AffixInstance = InstanceType<typeof Affix>

8
packages/components/affix/src/affix.vue
View File

@ -1,6 +1,6 @@
<template>
<div ref="root" class="el-affix" :style="rootStyle">
<div :class="{ 'el-affix--fixed': state.fixed }" :style="affixStyle">
<div ref="root" :class="ns.b()" :style="rootStyle">
<div :class="{ [ns.m('fixed')]: state.fixed }" :style="affixStyle">
<slot></slot>
</div>
</div>
@ -16,6 +16,7 @@ import {
} from 'vue'
import { useEventListener, useResizeObserver } from '@vueuse/core'
import { getScrollContainer } from '@element-plus/utils/dom'
import { useNamespace } from '@element-plus/hooks'
import { affixEmits, affixProps } from './affix'
import type { CSSProperties } from 'vue'
@ -27,6 +28,8 @@ export default defineComponent({
emits: affixEmits,
setup(props, { emit }) {
const ns = useNamespace('affix')
const target = shallowRef<HTMLElement>()
const root = shallowRef<HTMLDivElement>()
const scrollContainer = shallowRef<HTMLElement | Window>()
@ -134,6 +137,7 @@ export default defineComponent({
useResizeObserver(target, () => update())
return {
ns,
root,
state,
rootStyle,