TMRAppBle/components/lanyun-steps.stml

<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>