109 lines
2.1 KiB
Vue
109 lines
2.1 KiB
Vue
<template>
|
|
<div
|
|
class="logical-title"
|
|
:style="{
|
|
fontSize: `${fontSize}px`,
|
|
}"
|
|
>
|
|
<div
|
|
v-for="(item, index) in copyTitle"
|
|
:key="index"
|
|
class="logical-title-span"
|
|
:class="{ 'logical-title-span-active': item.checked }"
|
|
@click="clickHandle(item)"
|
|
>
|
|
{{ item.title }}
|
|
</div>
|
|
<div
|
|
class="logical-title-line"
|
|
:style="{ left: `${(activeIndex) * posLeft + 20}px`, width: `${lineWidth}px` }"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { computed, ref } from "@vue/runtime-core";
|
|
export default {
|
|
name: "LogicalTitle",
|
|
props: {
|
|
titles: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
fontSize: {
|
|
type: Number,
|
|
default: 16,
|
|
},
|
|
lineWidth: {
|
|
type: Number,
|
|
default: 95,
|
|
},
|
|
posLeft: {
|
|
type: Number,
|
|
default: 141,
|
|
},
|
|
},
|
|
setup(props, context) {
|
|
const copyTitle = ref(
|
|
props.titles.map((x, index) => {
|
|
return {
|
|
...x,
|
|
checked: index === 0,
|
|
};
|
|
})
|
|
);
|
|
const activeIndex = computed(() => {
|
|
const index = copyTitle.value.findIndex((x) => x.checked);
|
|
return index === -1 ? 0 : index;
|
|
});
|
|
const clickHandle = (item) => {
|
|
copyTitle.value.forEach((x) => {
|
|
x.checked = false;
|
|
});
|
|
item.checked = true;
|
|
context.emit("check", item);
|
|
};
|
|
return {
|
|
copyTitle,
|
|
activeIndex,
|
|
clickHandle,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.logical-title {
|
|
display: flex;
|
|
position: relative;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
&-span {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 0;
|
|
width: 100px;
|
|
max-width: 100px;
|
|
margin-right: 40px;
|
|
cursor: pointer;
|
|
&-active {
|
|
font-weight: 600;
|
|
color: $yili-default-color;
|
|
}
|
|
&:hover {
|
|
color: $yili-default-color;
|
|
}
|
|
}
|
|
&-line {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 64px;
|
|
height: 3px;
|
|
background: $yili-default-color;
|
|
border-radius: 2px;
|
|
transition: all 0.3s;
|
|
}
|
|
}
|
|
</style>
|