feat(tabs): 新增 tabPosition 属性, 更改选项卡位置

src/component/tab/index.less

@@ -36,6 +36,63 @@
   text-align: center;
   cursor: pointer;
 }
+/** 位置开始 */
+.layui-tab.is-right {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between
+}
+
+.layui-tab-head{
+  display: inline-block;
+}
+
+.layui-tab-title.is-right,
+.layui-tab-title.is-left {
+  height: 100%;
+  min-width: 60px;
+  border-bottom-width: 0px;
+  border-bottom-style: none;
+}
+
+.layui-tab-title.is-left li,
+.layui-tab-title.is-right li {
+   border: none;
+   border-radius: 0;
+   display: list-item;
+}
+
+.layui-tab-head.is-right + .layui-tab-content,
+.layui-tab-head.is-left + .layui-tab-content {
+  height: 100%;
+  padding: 0 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-more li.layui-this:after,
+.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-title .layui-this:after {
+  border: none;
+  border-radius: 0;
+  border-right: 2px solid @global-checked-color;
+}
+
+.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-more li.layui-this:after,
+.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-title .layui-this:after {
+  border: none;
+  border-radius: 0;
+  border-left: 2px solid @global-checked-color;
+}
+
+// .layui-tab-title.is-right li{
+//   border-left: 2px solid @global-neutral-color-6;
+// }
+
+// .layui-tab-title.is-left li{
+//   border-right: 2px solid @global-neutral-color-6;
+// }
+
+/** 位置结束*/
 
 .layui-tab-title li a {
   display: block;
@@ -137,18 +194,18 @@
   color: #fff;
 }
 
-.layui-tab-brief > .layui-tab-title .layui-this {
+.layui-tab-brief > .layui-tab-head > .layui-tab-title .layui-this {
   color: @global-primary-color;
 }
 
-.layui-tab-brief > .layui-tab-more li.layui-this:after,
-.layui-tab-brief > .layui-tab-title .layui-this:after {
+.layui-tab-brief > .layui-tab-head > .layui-tab-more li.layui-this:after,
+.layui-tab-brief > .layui-tab-head > .layui-tab-title .layui-this:after {
   border: none;
   border-radius: 0;
   border-bottom: 2px solid @global-checked-color;
 }
 
-.layui-tab-brief[overflow] > .layui-tab-title .layui-this:after {
+.layui-tab-brief[overflow] > .layui-tab-head > .layui-tab-title .layui-this:after {
   top: -1px;
 }
 

src/component/tab/index.vue

@@ -18,10 +18,13 @@ import {
   watch,
 } from "vue";
 
+export type tabPositionType = "top" | "bottom" | "left" | "right" ;
+
 export interface LayTabProps {
   type?: string;
   modelValue: string;
   allowClose?: boolean;
+  tabPosition?: tabPositionType;
   beforeClose?: Function;
   beforeLeave?: Function;
 }
@@ -42,7 +45,9 @@ const setItemInstanceBySlot = function (nodeList: VNode[]) {
   });
 };
 
-const props = defineProps<LayTabProps>();
+const props = withDefaults(defineProps<LayTabProps>(), {
+  tabPosition: "top"
+});
 
 const emit = defineEmits(["update:modelValue", "change", "close"]);
 
@@ -93,14 +98,26 @@ provide("slotsChange", slotsChange);
 <template>
   <div
     class="layui-tab"
-    :class="[type ? 'layui-tab-' + type : '']"
+    :class="[type ? 'layui-tab-' + type : '',
+     props.tabPosition ? `is-${tabPosition}` : '']"
     v-if="active"
   >
-    <ul class="layui-tab-title">
+    <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' : '']"
+        :class="[children.props.id === active ? 'layui-this' : '',]"
         @click.stop="change(children.props.id)"
       >
         {{ children.props.title }}
@@ -111,7 +128,9 @@ provide("slotsChange", slotsChange);
         ></i>
       </li>
     </ul>
-    <div class="layui-tab-content">
+    </div>
+
+    <div v-if="tabPosition != 'bottom'" class="layui-tab-content">
       <slot></slot>
     </div>
   </div>