mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
refactor: different manner to add namespace to detached content container
This commit is contained in:
parent
86047fac2c
commit
7a4f376d63
@ -38,6 +38,9 @@
|
|||||||
<div
|
<div
|
||||||
ref="contentContainer"
|
ref="contentContainer"
|
||||||
class="n-detached-content-container n-cascader-detached-content-container"
|
class="n-detached-content-container n-cascader-detached-content-container"
|
||||||
|
:class="{
|
||||||
|
[namespace]: namespace
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
ref="content"
|
ref="content"
|
||||||
|
@ -72,7 +72,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
ref="contentContainer"
|
ref="contentContainer"
|
||||||
class="n-detached-content-container"
|
class="n-detached-content-container n-date-picker-detached-content-container"
|
||||||
|
:class="{
|
||||||
|
[namespace]: namespace
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
ref="content"
|
ref="content"
|
||||||
|
@ -47,7 +47,8 @@ export default {
|
|||||||
staticClass: 'n-modal-container',
|
staticClass: 'n-modal-container',
|
||||||
ref: 'contentContainer',
|
ref: 'contentContainer',
|
||||||
class: {
|
class: {
|
||||||
'n-modal-container--active': this.value
|
'n-modal-container--active': this.value,
|
||||||
|
[this.namespace]: this.namespace
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
|
@ -3,6 +3,7 @@ import clickoutside from '../../../directives/clickoutside'
|
|||||||
import mousemoveoutside from '../../../directives/mousemoveoutside'
|
import mousemoveoutside from '../../../directives/mousemoveoutside'
|
||||||
import placeable from '../../../mixins/placeable'
|
import placeable from '../../../mixins/placeable'
|
||||||
import zindexable from '../../../mixins/zindexable'
|
import zindexable from '../../../mixins/zindexable'
|
||||||
|
import withapp from '../../../mixins/withapp'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'NPopoverContent',
|
name: 'NPopoverContent',
|
||||||
@ -42,9 +43,13 @@ export default {
|
|||||||
maxWidth: {
|
maxWidth: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: null
|
default: null
|
||||||
|
},
|
||||||
|
detachedContainerClass: {
|
||||||
|
type: String,
|
||||||
|
default: 'n-popover-detached-content-container'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mixins: [placeable, zindexable],
|
mixins: [withapp, placeable, zindexable],
|
||||||
directives: {
|
directives: {
|
||||||
clickoutside,
|
clickoutside,
|
||||||
mousemoveoutside
|
mousemoveoutside
|
||||||
@ -187,6 +192,10 @@ export default {
|
|||||||
// console.log('render popover content', this.$props)
|
// console.log('render popover content', this.$props)
|
||||||
return h('div', {
|
return h('div', {
|
||||||
staticClass: 'n-detached-content-container',
|
staticClass: 'n-detached-content-container',
|
||||||
|
class: {
|
||||||
|
[this.detachedContainerClass]: true,
|
||||||
|
[this.namespace]: this.namespace
|
||||||
|
},
|
||||||
ref: 'contentContainer'
|
ref: 'contentContainer'
|
||||||
}, [
|
}, [
|
||||||
h('div', {
|
h('div', {
|
||||||
|
@ -41,6 +41,9 @@
|
|||||||
ref="contentContainer"
|
ref="contentContainer"
|
||||||
v-clickoutside="handleClickOutsideMenu"
|
v-clickoutside="handleClickOutsideMenu"
|
||||||
class="n-detached-content-container n-select-detached-content-container"
|
class="n-detached-content-container n-select-detached-content-container"
|
||||||
|
:class="{
|
||||||
|
[namespace]: namespace
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
ref="content"
|
ref="content"
|
||||||
|
@ -61,7 +61,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
ref="contentContainer"
|
ref="contentContainer"
|
||||||
class="n-detached-content-container"
|
class="n-detached-content-container n-slider-detached-content-container"
|
||||||
|
:class="{
|
||||||
|
[namespace]: namespace
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
|
||||||
|
@ -12,7 +12,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
ref="contentContainer"
|
ref="contentContainer"
|
||||||
class="n-detached-content-container"
|
class="n-detached-content-container n-time-picker-detached-content-container"
|
||||||
|
:class="{
|
||||||
|
[namespace]: namespace
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
ref="content"
|
ref="content"
|
||||||
|
12
packages/mixins/withapp.js
Normal file
12
packages/mixins/withapp.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
export default {
|
||||||
|
inject: {
|
||||||
|
NApp: {
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
namespace () {
|
||||||
|
return (this.NApp && this.NApp.namespace) || null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user