import {
|
defineComponent,
|
h,
|
nextTick,
|
onMounted,
|
PropType,
|
reactive,
|
ref,
|
toRaw,
|
watch
|
} from "vue";
|
import { isEmpty } from "lodash-es";
|
import { useRefs, useDialog } from "../../hooks";
|
|
export default defineComponent({
|
name: "cl-form-tabs",
|
|
props: {
|
modelValue: [String, Number],
|
labels: {
|
type: Array,
|
default: () => []
|
},
|
justify: {
|
type: String as PropType<
|
"start" | "end" | "left" | "right" | "center" | "justify" | "match-parent"
|
>,
|
default: "center"
|
},
|
type: {
|
type: String as PropType<"card" | "default">,
|
default: "default"
|
}
|
},
|
|
emits: ["update:modelValue", "change"],
|
|
setup(props, { emit, expose }) {
|
const { refs, setRefs } = useRefs();
|
|
// 标识
|
const active = ref("");
|
|
// 切换列表
|
const list = ref<any[]>([]);
|
|
// 下划线
|
const line = reactive({
|
width: "",
|
offsetLeft: "",
|
transform: "",
|
backgroundColor: ""
|
});
|
|
function update(val: any) {
|
if (!val) {
|
return false;
|
}
|
|
nextTick(() => {
|
const index = list.value.findIndex((e) => e.value === val);
|
const item = refs[`tab-${index}`];
|
|
if (item) {
|
// 下划线位置
|
line.width = item.offsetWidth + "px";
|
line.transform = `translateX(${item.offsetLeft}px)`;
|
|
// 靠左位置
|
let left = item.offsetLeft + item.clientWidth / 2 - 414 / 2 + 15;
|
|
if (left < 0) {
|
left = 0;
|
}
|
|
// 设置滚动距离
|
refs.tabs.scrollLeft = left;
|
}
|
});
|
|
active.value = val;
|
emit("update:modelValue", val);
|
}
|
|
// 监听绑定值变化
|
watch(() => props.modelValue, update);
|
|
// 监听值修改
|
watch(
|
() => active.value,
|
(val) => {
|
emit("change", val);
|
}
|
);
|
|
useDialog({
|
onFullscreen() {
|
update(active.value);
|
}
|
});
|
|
onMounted(function () {
|
if (!isEmpty(props.labels)) {
|
list.value = props.labels;
|
update(isEmpty(props.modelValue) ? list.value[0].value : props.modelValue);
|
}
|
});
|
|
expose({
|
active,
|
list,
|
line,
|
update
|
});
|
|
return () => {
|
return (
|
<div class={["cl-form-tabs", `cl-form-tabs--${props.type}`]}>
|
<div
|
class="cl-form-tabs__wrap"
|
style={{ textAlign: props.justify }}
|
ref={setRefs("tabs")}>
|
<ul>
|
{list.value.map((e, i) => {
|
return (
|
<li
|
ref={setRefs(`tab-${i}`)}
|
class={{ "is-active": e.value === active.value }}
|
onClick={() => {
|
update(e.value);
|
}}>
|
{e.icon && <el-icon>{h(toRaw(e.icon))}</el-icon>}
|
<span>{e.label}</span>
|
</li>
|
);
|
})}
|
|
{line.width && <div class="cl-form-tabs__line" style={line}></div>}
|
</ul>
|
</div>
|
</div>
|
);
|
};
|
}
|
});
|
