[新增] tab 选项卡组件
This commit is contained in:
9
src/module/tab/index.ts
Normal file
9
src/module/tab/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import type { App } from 'vue'
|
||||
import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayTab', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
25
src/module/tab/index.vue
Normal file
25
src/module/tab/index.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="layui-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">网站设置</li>
|
||||
<li>用户管理</li>
|
||||
<li>权限分配</li>
|
||||
<li>商品管理</li>
|
||||
<li>订单管理</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
1. 高度默认自适应,也可以随意固宽。
|
||||
<br>2. Tab进行了响应式处理,所以无需担心数量多少。
|
||||
</div>
|
||||
<div class="layui-tab-item">内容2</div>
|
||||
<div class="layui-tab-item">内容3</div>
|
||||
<div class="layui-tab-item">内容4</div>
|
||||
<div class="layui-tab-item">内容5</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayTab" lang="ts">
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user