第一周、4.Stepper组件

最新推荐文章于 2025-02-24 17:00:00 发布

花开富贵

最新推荐文章于 2025-02-24 17:00:00 发布

阅读量507

点赞数

文章标签： elementui css vue.js

本文链接：https://blog.youkuaiyun.com/cxy2002cxy/article/details/124655047

版权

Stepper组件 index属性自定义提示样式设置前端开发

关键词由优快云通过智能技术生成

创建Stepper组件设置index属性

在pages/index目录下的hml文件中创建一个Stepper组件，页面默认显示索引值为index的步骤。

<!-- index.hml -->
<div class="container">
    <stepper index="2">
        <stepper-item>
            <text>Step 1</text>
        </stepper-item>
        <stepper-item>
            <text>Step 2</text>
        </stepper-item>
        <stepper-item>
            <text>Step 3</text>
        </stepper-item>
        <stepper-item>
            <text>Step 4</text>
        </stepper-item>
    </stepper>
</div>

/* index.css */
.container {
    flex-direction: column;
    background-color:#F1F3F5;
}
text{
    width: 100%;
    height: 100%;
    text-align: center;
}

通过设置label属性，自定义stepper-item的提示按钮。

/* index.css */
.container {
    flex-direction: column;
    background-color:#F1F3F5;
}
text{
    width: 100%;
    height: 100%;
    text-align: center;
}

<!-- index.hml -->
<div class="container">
    <stepper index="2">
        <stepper-item label="{{label_1}}">
            <text>Step 1</text>
        </stepper-item>
        <stepper-item label="{{label_2}}">
            <text>Step 2</text>
        </stepper-item>
        <stepper-item label="{{label_3}}">
            <text>Step 3</text>
        </stepper-item>
        <stepper-item label="{{label_4}}">
            <text>Step 4</text>
        </stepper-item>
    </stepper>
</div>

设置样式：

Stepper组件默认填充父容器，通过border和background-color设置边框、背景色。

<!-- index.hml -->
<div class="container" >
    <div class="stepperContent">
        <stepper class="stepperClass">
            <stepper-item label="{{label_1}}">
                <text>Step 1</text>
            </stepper-item>
            <stepper-item label="{{label_2}}">
                <text>Step 2</text>
            </stepper-item>
            <stepper-item label="{{label_3}}">
                <text>Step 3</text>
            </stepper-item>
            <stepper-item label="{{label_4}}">
                <text>Step 4</text>
            </stepper-item>
        </stepper>
    </div>
</div>

/* index.css */
.container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:#F1F3F5;
}
.stepperContent{
    width: 300px;
    height: 300px;
}
.stepperClass{
    border:1px solid silver ;
    background-color: white;
}
text{
    width: 100%;
    height: 100%;
    text-align: center;
}