theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复 选项卡 closable 不可用

Browse Source
This commit is contained in:
就眠儀式 2022-01-18 01:28:39 +08:00
parent d5d289ab9e
commit c8004afc33
3 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
example/docs/zh-CN/components/tab.md
View File

@ -130,15 +130,15 @@ export default {
:::
::: title 控制是否关闭
::: title 关闭前置
:::
::: demo
<template>
<lay-tab type="card" v-model="current5" allow-close @change="change5" @close="close5" :beforeClose="beforeClose">
<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-item title="选项一" id="1" closable="true"><div style="padding:20px">选项一</div></lay-tab-item>
<lay-tab-item title="选项二" id="2" closable="false"><div style="padding:20px">选项二</div></lay-tab-item>
<lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
<lay-tab-item title="选项四" id="4"><div style="padding:20px">选项四</div></lay-tab-item>
<lay-tab-item title="选项五" id="5"><div style="padding:20px">选项五</div></lay-tab-item>
@ -178,15 +178,14 @@ export default {
:::
::: title 嵌套循环
:::
::: demo
<template>
<lay-tab type="card" v-model="current6" @change="change6">
<lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id">
<lay-tab type="card" allow-close v-model="current6" @change="change6">
<lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id" :closable="a.closable">
内容{{a.id}}
</lay-tab-item>
</lay-tab>
@ -204,12 +203,11 @@ export default {
}
const arr = ref([
{id:'1', title:'选项一'},
{id:'2', title:'选项二'}
{id:'1', title:'选项一', closable: false},
{id:'2', title:'选项二'},
{id:'3', title:'选项三'}
])
arr.value.push({id:'3', title:'选项三'})
return {
current6,
arr
@ -225,13 +223,13 @@ export default {
::: table
| 属性 | 描述 | 可选值 |
| ----------- | -------- | -------------- |
| v-model | 当前激活 | -- |
| type | 主题样式 | -- |
| allow-close | 允许关闭 | `true` `false` |
| before-close | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭 |
| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 |
| 属性 | 描述 | 可选值 |
| ------------ | ------------------------------------ | ----------------------------------------- |
| v-model | 当前激活 | -- |
| type | 主题样式 | -- |
| allow-close | 允许关闭 | `true` `false` |
| before-close | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭 |
| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 |
:::
@ -247,8 +245,21 @@ export default {
:::
::: title Tab Item 属性
:::
::: table
| 属性 | 描述 | 可选值 |
| -------- | -------- | ------ |
| id | 唯一标识 | -- |
| title | 头部标题 | -- |
| closable | 允许关闭 | -- |
:::
::: comment
:::
::: previousNext tab
:::
:::

1
example/docs/zh-CN/guide/changelog.md
View File

@ -17,6 +17,7 @@
<h3>0.3.4 <span class="layui-badge-rim">2022-01-09</span></h3>
<ul>
<li>[新增] avatar-list 头像列表组件。</li>
<li>[新增] tab-item 选项卡组件 closable 属性, 控制当前选项卡 close 支持。</li>
<li>[修复] button 按钮 disabled 为 true 时, 触发 click 事件。</li>
<li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li>
<li>[升级] vite 2.7.12。</li>

2
src/module/tab/index.vue
View File

@ -13,7 +13,7 @@
>
{{ children.props.title }}
<i
v-if="allowClose"
v-if="allowClose && children.props.closable != false"
class="layui-icon layui-icon-close layui-unselect layui-tab-close"
@click.stop="close(index, children.props.id)"
></i>