176 lines
5.6 KiB
Plaintext
176 lines
5.6 KiB
Plaintext
<script>
|
|
export default {
|
|
name: "lanyun-steps",
|
|
props: {
|
|
list: Array,
|
|
current: Number,
|
|
activeColor: String,
|
|
inactiveColor: String,
|
|
direction: String,
|
|
},
|
|
install() {
|
|
this.render = (props) => {
|
|
const { h } = apivm;
|
|
|
|
const list = props.list;
|
|
const items = [];
|
|
const activeColor = props["active-color"] || "#06f";
|
|
const inactiveColor = props["inactive-color"] || "#9ca3af";
|
|
const direction = ["row", "column"].includes(props.direction) ? props.direction : "row";
|
|
const icon = props.icon || "../../components/lanyun-steps/asset/gouxuan.png";
|
|
let current = props.current || 0;
|
|
|
|
if (current >= list.length) {
|
|
current = list.length - 1;
|
|
}
|
|
if (current <= 0) {
|
|
current = 0;
|
|
}
|
|
|
|
list.forEach((v, i) => {
|
|
const isActive = current >= i;
|
|
items.push(
|
|
h(
|
|
"view",
|
|
{
|
|
class: `lanyun-steps__item lanyun-steps__item--${direction}`,
|
|
},
|
|
h(
|
|
"view",
|
|
{
|
|
class: `lanyun-steps__item__num`,
|
|
style: {
|
|
backgroundColor: isActive ? activeColor : "rgba(0,0,0,0)",
|
|
border: `1px solid ${isActive ? activeColor : inactiveColor}`,
|
|
},
|
|
},
|
|
isActive
|
|
? h("image", {
|
|
class: "lanyun-steps__item__num__icon",
|
|
src: icon,
|
|
mode: "widthFix",
|
|
})
|
|
: h(
|
|
"text",
|
|
{
|
|
class: "lanyun-steps__item__num__text",
|
|
},
|
|
i + 1
|
|
)
|
|
),
|
|
h(
|
|
"text",
|
|
{
|
|
class: `lanyun-steps__item__text lanyun-steps__item__text--${direction}`,
|
|
style: {
|
|
color: isActive ? activeColor : inactiveColor,
|
|
},
|
|
},
|
|
v.name
|
|
)
|
|
)
|
|
);
|
|
if (i !== list.length - 1) {
|
|
items.push(
|
|
h(
|
|
"view",
|
|
{
|
|
class: `lanyun-steps__line lanyun-steps__line--${direction}`,
|
|
},
|
|
h("view", {
|
|
class: `lanyun-steps__line__border lanyun-steps__line__border--${direction}`,
|
|
})
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
return h(
|
|
"view",
|
|
{
|
|
class: `lanyun-steps lanyun-steps--${direction}`,
|
|
},
|
|
...items
|
|
);
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.lanyun-steps--row {
|
|
width: 100vw;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
}
|
|
.lanyun-steps--column {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
.lanyun-steps__item {
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.lanyun-steps__item__num {
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
.lanyun-steps__item__num__icon {
|
|
width: 80%;
|
|
height: 80%;
|
|
}
|
|
.lanyun-steps__item__num__text {
|
|
font-size: 12px;
|
|
color: #9ca3af;
|
|
}
|
|
.lanyun-steps__item__text {
|
|
/* font-size: 30px; */
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
margin-top: 4px;
|
|
}
|
|
/* .lanyun-steps__line {
|
|
} */
|
|
.lanyun-steps__line__border {
|
|
background-color: #9ca3af;
|
|
}
|
|
/* 横向 */
|
|
.lanyun-steps__item--row {
|
|
flex-direction: column;
|
|
}
|
|
.lanyun-steps__item__text--row {
|
|
margin-top: 4px;
|
|
}
|
|
.lanyun-steps__line--row {
|
|
flex: 1;
|
|
height: 20px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.lanyun-steps__line__border--row {
|
|
width: 80%;
|
|
height: 1px;
|
|
}
|
|
/* 竖向 */
|
|
.lanyun-steps__item--column {
|
|
flex-direction: row;
|
|
}
|
|
.lanyun-steps__item__text--column {
|
|
margin-left: 8px;
|
|
}
|
|
.lanyun-steps__line--column {
|
|
width: 20px;
|
|
height: 20px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.lanyun-steps__line__border--column {
|
|
width: 1px;
|
|
height: 16px;
|
|
background-color: #9ca3af;
|
|
}
|
|
</style>
|