TMRAppBle/components/lanyun-steps.stml

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>