ant-design-vue/components/tabs/TabPane.vue

52 lines
1.1 KiB
Vue
Raw Normal View History

2017-11-21 11:15:41 +00:00
<template>
<div
role="tabpanel"
:aria-hidden="active ? 'false' : 'true'"
:class="classes"
>
<slot v-if="isRender || forceRender">
</slot>
</div>
</template>
<script>
export default {
name: 'TabPane',
props: {
pKey: [String, Number],
2017-11-22 07:05:53 +00:00
tab: [String, Number],
2017-11-21 11:15:41 +00:00
forceRender: Boolean,
// placeholder: [Function, String, Number],
},
data () {
return {
}
},
computed: {
classes () {
2017-11-22 07:05:53 +00:00
const { $parent, active } = this
const prefixCls = `${$parent.prefixCls}-tabpane`
2017-11-21 11:15:41 +00:00
return {
[`${prefixCls}`]: true,
[`${prefixCls}-inactive`]: !active,
[`${prefixCls}-active`]: active,
}
},
2017-11-22 07:05:53 +00:00
active () {
const { activeKey } = this.$parent
return activeKey === this.pKey
},
2017-11-21 11:15:41 +00:00
isRender () {
const {
2017-11-22 07:05:53 +00:00
active,
$parent,
2017-11-21 11:15:41 +00:00
} = this
2017-11-22 07:05:53 +00:00
const destroyInactiveTabPane = $parent.destroyInactiveTabPane
2017-11-21 11:15:41 +00:00
this._isActived = this._isActived || active
return destroyInactiveTabPane ? active : this._isActived
},
},
methods: {
},
}
</script>