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

fix: 修复 css 对现有 tab dom 结构的适配

Browse Source
This commit is contained in:
就眠儀式 2022-03-30 23:37:29 +08:00
parent 91075915cc
commit fe0b9f0175
1 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/component/tab/index.vue
View File

@ -18,7 +18,7 @@ import {
watch,
} from "vue";
export type tabPositionType = "top" | "bottom" | "left" | "right" ;
export type tabPositionType = "top" | "bottom" | "left" | "right";
export interface LayTabProps {
type?: string;
@ -46,7 +46,7 @@ const setItemInstanceBySlot = function (nodeList: VNode[]) {
};
const props = withDefaults(defineProps<LayTabProps>(), {
tabPosition: "top"
tabPosition: "top",
});
const emit = defineEmits(["update:modelValue", "change", "close"]);
@ -98,36 +98,39 @@ provide("slotsChange", slotsChange);
<template>
<div
class="layui-tab"
:class="[type ? 'layui-tab-' + type : '',
props.tabPosition ? `is-${tabPosition}` : '']"
:class="[
type ? 'layui-tab-' + type : '',
props.tabPosition ? `is-${tabPosition}` : '',
]"
v-if="active"
>
<div v-if="tabPosition === 'bottom'" class="layui-tab-content">
<slot></slot>
</div>
<div :class="[
'layui-tab-head',
props.tabPosition ? `is-${tabPosition}` : ''
]">
<ul :class="[
'layui-tab-title',
props.tabPosition ? `is-${tabPosition}` : ''
]">
<li
v-for="(children, index) in childrens"
:key="children"
:class="[children.props.id === active ? 'layui-this' : '',]"
@click.stop="change(children.props.id)"
<div
:class="['layui-tab-head', props.tabPosition ? `is-${tabPosition}` : '']"
>
<ul
:class="[
'layui-tab-title',
props.tabPosition ? `is-${tabPosition}` : '',
]"
>
{{ children.props.title }}
<i
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>
</li>
</ul>
<li
v-for="(children, index) in childrens"
:key="children"
:class="[children.props.id === active ? 'layui-this' : '']"
@click.stop="change(children.props.id)"
>
{{ children.props.title }}
<i
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>
</li>
</ul>
</div>
<div v-if="tabPosition != 'bottom'" class="layui-tab-content">