Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tab切换实现懒加载,动态新增tab实现 #24

Closed
EdwardQ opened this issue Dec 9, 2019 · 1 comment
Closed

tab切换实现懒加载,动态新增tab实现 #24

EdwardQ opened this issue Dec 9, 2019 · 1 comment

Comments

@EdwardQ
Copy link

EdwardQ commented Dec 9, 2019

No description provided.

@EdwardQ
Copy link
Author

EdwardQ commented Dec 19, 2019

ams.block('tabs', {
	type: 'tabs',
    props: {
		// 配置tab可动态新增
        editable: true
    },
	options: {
		tab1: 'tab1标题',
		tab2: {
			label: 'tab2 延迟加载',
			// 配置延迟加载
			lazy: true,
			// 配置是否可关闭
			closable: true
		},
		tab3: {
			label: 'tab3 不可点击',
			// 配置不可点击
			disabled: true
		}
	},
	data: {
        // 新增tab计数
        tabIndex: '3',
        // 指定初始化时tab展示哪一个
        active: 'tab1'
    },
	on: {
		// 监听编辑事件
		edit: function(targetName, action) {
			if (action === 'add') {
				// 动态新增tab
                let newTabName = `tab${++this.data.tabIndex}`;
                ams.block(newTabName, fromBlock);

                this.block.blocks.push(newTabName);
                this.block.options[newTabName] = {
                    label: newTabName
                };
                this.data.active = newTabName;
            }
		}
	},
	blocks: {
		tab1: {
			type: 'component',
            options: {
                is: 'div',
                text: '我是tabs1的内容'
            },
			actions: {
                init() {
                    console.log('tab1-init-----')
                }
            }

		},
		tab2: {
			type: 'component',
            options: {
                is: 'div',
                text: '我是tabs2的内容'
            },
			actions: {
                init() {
                    console.log('tab2-init-----')
                }
            }

		},
		tab3: {
			type: 'component',
            options: {
                is: 'div',
                text: '我是tabs3的内容'
            },
			actions: {
                init() {
                    console.log('tab3-init-----')
                }
            }
		}
	}
})

@w3cmark w3cmark closed this as completed Dec 19, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants