[新增] tab 选项卡组件

This commit is contained in:
就眠仪式
2021-10-08 19:57:03 +08:00
parent 2e2b4381f0
commit 393ff8c9e0
4 changed files with 58 additions and 17 deletions

View File

@@ -1,7 +1,10 @@
::: demo
<template>
<lay-tab></lay-tab>
<lay-tab v-model="current1">
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
</lay-tab>
</template>
<script>
@@ -10,7 +13,10 @@ import { ref } from 'vue'
export default {
setup() {
const current1 = ref("1")
return {
current1
}
}
}
@@ -21,7 +27,10 @@ export default {
::: demo
<template>
<lay-tab type="brief"></lay-tab>
<lay-tab type="brief" v-model="current2">
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
</lay-tab>
</template>
<script>
@@ -30,7 +39,10 @@ import { ref } from 'vue'
export default {
setup() {
const current2 = ref("1")
return {
current2
}
}
}
@@ -41,7 +53,10 @@ export default {
::: demo
<template>
<lay-tab type="card"></lay-tab>
<lay-tab type="card" v-model="current3">
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
</lay-tab>
</template>
<script>
@@ -50,7 +65,10 @@ import { ref } from 'vue'
export default {
setup() {
const current3 = ref("1")
return {
current3
}
}
}