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

This commit is contained in:
就眠儀式 2022-03-30 23:37:29 +08:00
parent 91075915cc
commit fe0b9f0175

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,26 +98,29 @@ 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="[
<div
:class="['layui-tab-head', props.tabPosition ? `is-${tabPosition}` : '']"
>
<ul
:class="[
'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' : '',]"
:class="[children.props.id === active ? 'layui-this' : '']"
@click.stop="change(children.props.id)"
>
{{ children.props.title }}