5.3 KiB
5.3 KiB
::: anchor :::
::: title 基础使用 :::
::: demo
选项一
选项二
<script>
import { ref } from 'vue'
export default {
setup() {
const current1 = ref("1")
return {
current1
}
}
}
</script>
:::
::: title 简约模式 :::
::: demo
选项一
选项二
<script>
import { ref } from 'vue'
export default {
setup() {
const current2 = ref("1")
return {
current2
}
}
}
</script>
:::
::: title 卡片模式 :::
::: demo
选项一
选项二
<script>
import { ref } from 'vue'
export default {
setup() {
const current3 = ref("1")
return {
current3
}
}
}
</script>
:::
::: title 允许关闭 :::
::: demo
选项一
选项二
选项三
<script>
import { ref } from 'vue'
export default {
setup() {
const current4 = ref("1")
const allowClose = ref(true)
const change = function(id){
console.log("当前值:" +id)
}
const close = function(id){
console.log("当前关闭:" + id)
}
return {
current4,
allowClose,
change,
close
}
}
}
</script>
:::
::: title 关闭前置 :::
::: demo
选项一
选项二
选项三
选项四
选项五
id为单数的可以关闭
<script>
import { ref } from 'vue'
export default {
setup() {
const current5 = ref("1")
const change5 = function(id){
console.log("当前值:" +id)
}
const beforeClose = function(id){
return parseInt(id) % 2 === 1;
}
const close5 = function(id){
console.log("当前关闭:" + id)
}
return {
current5,
change5,
beforeClose,
close5
}
}
}
</script>
:::
::: title 嵌套循环 :::
::: demo
内容{{a.id}} <script> import { ref } from 'vue' export default { setup() { const current6 = ref('1') const change6 = function(id){ alert(id) } const arr = ref([ {id:'1', title:'选项一', closable: false}, {id:'2', title:'选项二'}, {id:'3', title:'选项三'} ]) return { current6, arr } } } </script>:::
::: title Tab 属性 :::
::: table
| 属性 | 描述 | 可选值 |
|---|---|---|
| v-model | 当前激活 | -- |
| type | 主题样式 | -- |
| allow-close | 允许关闭 | true false |
| before-close | Function关闭之前的回调钩子函数 |
参数(id), return false 表示不进行关闭 |
| before-leave | Function切换标签之前的回调钩子函数 |
参数(id), return false 表示不进行切换 |
:::
::: title Tab 事件 :::
::: table
| 事件 | 描述 | 参数 |
|---|---|---|
| change | 选中切换 | id |
| close | 关闭事件 | id |
:::
::: title Tab Item 属性 :::
::: table
| 属性 | 描述 | 可选值 |
|---|---|---|
| id | 唯一标识 | -- |
| title | 头部标题 | -- |
| closable | 允许关闭 | -- |
:::
::: comment :::
::: previousNext tab :::