drip-public/iview
5
0
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
Download patch file Download diff file Expand all files Collapse all files

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);