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