选项卡 Tab

分隔内容上有关联但属于不同类别的数据集合。

静态组件渲染

默认样式

• 选项一
• 选项二
• 选项三
• 选项四
• 选项五

我是内容一

我是内容二

我是内容三

我是内容四

我是内容五

查看代码

<div class="open-container">
	<div class="open-tab" id="tab">
		<ul class="open-tab-title">
			<li class="open-tab-title-active">选项一</li>
			<li>选项二</li>
			<li>选项三</li>
			<li>选项四</li>
			<li>选项五</li>
		</ul>
		<div class="open-tab-content">
			<div class="open-tab-content-item open-tab-content-active">
				我是内容一
			</div>
			<div class="open-tab-content-item">
				我是内容二
			</div>
			<div class="open-tab-content-item">
				我是内容三
			</div>
			<div class="open-tab-content-item">
				我是内容四
			</div>
			<div class="open-tab-content-item">
				我是内容五
			</div>
		</div>
	</div>
</div>

<script setup>
	import { onMounted } from 'vue'
	import openui from '../openui@0.1.0-beta/js/openui.esm.js'

	onMounted(()=>{
		// 静态渲染
		openui.tab.renderStatic();
	})

</script>

标签样式

通过追加".open-tab-tag"定义标签样式

• 选项一
• 选项二
• 选项三
• 选项四
• 选项五

我是内容一

我是内容二

我是内容三

我是内容四

我是内容五

查看代码

<div class="open-container">
	<div class="open-tab open-tab-tag" id="tab">
		<ul class="open-tab-title">
			<li class="open-tab-title-active">选项一</li>
			<li>选项二</li>
			<li>选项三</li>
			<li>选项四</li>
			<li>选项五</li>
		</ul>
		<div class="open-tab-content">
			<div class="open-tab-content-item open-tab-content-active">
				我是内容一
			</div>
			<div class="open-tab-content-item">
				我是内容二
			</div>
			<div class="open-tab-content-item">
				我是内容三
			</div>
			<div class="open-tab-content-item">
				我是内容四
			</div>
			<div class="open-tab-content-item">
				我是内容五
			</div>
		</div>
	</div>
</div>

<script setup>
	import { onMounted } from 'vue'
	import openui from '../openui@0.1.0-beta/js/openui.esm.js'

	onMounted(()=>{
		// 静态渲染
		openui.tab.renderStatic();
	})

</script>

API

API	描述
tab.renderStatic()	静态渲染
tab.on(id,()={})	事件监听

静态渲染

tab.renderStatic()

默认会获取符合约定的组件dom模版进行渲染

事件监听

tab.on(id,(res)=>{})

// 静态组件，动态组件都会触发
tab.on(id,(data)=>{
	console.log(data)
})