drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Tabs method of find children

Browse source 
Now, can use other components to package the TabPane, but should set animated to false.
This commit is contained in:
梁灏 2019-02-22 17:23:39 +08:00
parent 13b2bfe919
commit 4d8b401656
5 changed files with 2191 additions and 1553 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
examples/components/wrapper.vue Normal file
View file

@ -0,0 +1,8 @@
<template>
<div class="i-wrapper"><slot></slot></div>
</template>
<script>
export default {
}
</script>

18
examples/routers/tabs.vue
View file

@ -1,12 +1,22 @@
<template>
<Tabs type="card" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove">
<TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
<TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
<TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
<Tabs type="card" :animated="true" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove">
<Wrapper>
<TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
<TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
<TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
</Wrapper>
</Tabs>
<!--<Tabs type="card" :animated="true" closable @on-tab-remove="handleTabRemove" :beforeRemove="handleBeforeRemove">-->
<!--<TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>-->
<!--<TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>-->
<!--<TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>-->
<!--</Tabs>-->
</template>
<script>
import Wrapper from '../components/wrapper.vue';
export default {
components: { Wrapper },
data () {
return {
tab0: true,

3703
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

5
src/components/tabs/pane.vue
View file

@ -6,6 +6,7 @@
export default {
name: 'TabPane',
inject: ['TabsInstance'],
props: {
name: {
type: String
@ -36,13 +37,13 @@
computed: {
contentStyle () {
return {
visibility: this.$parent.activeKey !== this.currentName ? 'hidden' : 'visible'
visibility: this.TabsInstance.activeKey !== this.currentName ? 'hidden' : 'visible'
};
}
},
methods: {
updateNav () {
this.$parent.updateNav();
this.TabsInstance.updateNav();
}
},
watch: {

10
src/components/tabs/tabs.vue
View file

@ -32,7 +32,7 @@
<script>
import Icon from '../icon/icon.vue';
import Render from '../base/render';
import { oneOf, MutationObserver } from '../../utils/assist';
import { oneOf, MutationObserver, findComponentsDownward } from '../../utils/assist';
import Emitter from '../../mixins/emitter';
import elementResizeDetectorMaker from 'element-resize-detector';
@ -64,6 +64,9 @@
name: 'Tabs',
mixins: [ Emitter ],
components: { Icon, Render },
provide () {
return { TabsInstance: this };
},
props: {
value: {
type: [String, Number]
@ -166,7 +169,8 @@
},
methods: {
getTabs () {
return this.$children.filter(item => item.$options.name === 'TabPane');
// return this.$children.filter(item => item.$options.name === 'TabPane');
return findComponentsDownward(this, 'TabPane');
},
updateNav () {
this.navList = [];
@ -393,7 +397,7 @@
return false;
},
updateVisibility(index){
[...this.$refs.panes.children].forEach((el, i) => {
[...this.$refs.panes.querySelectorAll(`.${prefixCls}-tabpane`)].forEach((el, i) => {
if (index === i) {
[...el.children].filter(child=> child.classList.contains(`${prefixCls}-tabpane`)).forEach(child => child.style.visibility = 'visible');
if (this.captureFocus) setTimeout(() => focusFirst(el, el), transitionTime);