refactor: different manner to add namespace to detached content container

This commit is contained in:
07akioni 2019-09-17 19:26:06 +08:00
parent 86047fac2c
commit 7a4f376d63
8 changed files with 42 additions and 5 deletions

View File

@ -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"

View File

@ -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"

View File

@ -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
} }
}, },
[ [

View File

@ -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', {

View File

@ -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"

View File

@ -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

View File

@ -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"

View File

@ -0,0 +1,12 @@
export default {
inject: {
NApp: {
default: null
}
},
computed: {
namespace () {
return (this.NApp && this.NApp.namespace) || null
}
}
}