fix(tusimple-theme): clean up styles before unmount

This commit is contained in:
07akioni 2021-02-19 14:24:43 +08:00
parent 33810c1a9d
commit 5b7040a33d
2 changed files with 12 additions and 16 deletions

View File

@ -5,8 +5,7 @@ import {
defineComponent, defineComponent,
PropType, PropType,
provide, provide,
reactive, reactive
onBeforeMount
} from 'vue' } from 'vue'
import { useMemo } from 'vooks' import { useMemo } from 'vooks'
import { warn, getSlot } from '../../_utils' import { warn, getSlot } from '../../_utils'
@ -41,7 +40,6 @@ export const configProviderProps = {
themeOverrides: Object as PropType<GlobalThemeOverrides | null>, themeOverrides: Object as PropType<GlobalThemeOverrides | null>,
componentOptions: Object as PropType<ComponentProps>, componentOptions: Object as PropType<ComponentProps>,
icons: Object as PropType<Icons>, icons: Object as PropType<Icons>,
onBeforeMount: Function,
// deprecated // deprecated
legacyTheme: String, legacyTheme: String,
language: { language: {
@ -132,10 +130,6 @@ export default defineComponent({
if (componentOptions !== undefined) return componentOptions if (componentOptions !== undefined) return componentOptions
return NConfigProvider?.mergedComponentProps return NConfigProvider?.mergedComponentProps
}) })
onBeforeMount(() => {
const { onBeforeMount } = props
onBeforeMount?.()
})
provide<ConfigProviderInjection>( provide<ConfigProviderInjection>(
'NConfigProvider', 'NConfigProvider',
reactive({ reactive({

View File

@ -1,4 +1,4 @@
import { h, defineComponent } from 'vue' import { h, defineComponent, onBeforeMount, onBeforeUnmount } from 'vue'
import { NConfigProvider, configProviderProps } from 'naive-ui' import { NConfigProvider, configProviderProps } from 'naive-ui'
import { renderFilter, renderSorter } from './data-table' import { renderFilter, renderSorter } from './data-table'
import { unconfigurableStyle, mountSvgDefs } from './unconfigurable-style' import { unconfigurableStyle, mountSvgDefs } from './unconfigurable-style'
@ -9,6 +9,15 @@ export default defineComponent({
name: 'TsConfigProvider', name: 'TsConfigProvider',
props: configProviderProps, props: configProviderProps,
setup () { setup () {
onBeforeMount(() => {
mountSvgDefs()
unconfigurableStyle.mount({
id: 'naive-ui/tusimple-theme'
})
})
onBeforeUnmount(() => {
unconfigurableStyle.unmount()
})
return { return {
componentOptions: { componentOptions: {
Pagination: { Pagination: {
@ -27,13 +36,7 @@ export default defineComponent({
DynamicInput: { DynamicInput: {
buttonSize: 'small' buttonSize: 'small'
} }
} as const, } as const
onBeforeMount () {
mountSvgDefs()
unconfigurableStyle.mount({
id: 'naive-ui/tusimple-theme'
})
}
} }
}, },
render () { render () {
@ -43,7 +46,6 @@ export default defineComponent({
themeOverrides={themeOverrides} themeOverrides={themeOverrides}
componentOptions={this.componentOptions} componentOptions={this.componentOptions}
icons={icons} icons={icons}
onBeforeMount={this.onBeforeMount}
> >
{this.$slots} {this.$slots}
</NConfigProvider> </NConfigProvider>