vueカスタムステップバーコンポーネント
16626 ワード
<template>
<div>
<ul class="steps">
<li
v-for="(item,index) in SetData"
:key="item+index"
:class="{'active':Steps===index}"
>{{item+Steps}}</li>
</ul>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import axios from "axios";
@Component
export default class Steps extends Vue {
@Prop({default:0}) private Steps!: number;
@Prop() private SetData!: string[];
}
</script>
<style>
.steps {
position: relative;
margin-bottom: 30px;
counter-reset: step; /* */
}
/* */
.steps li {
list-style-type: none;
font-size: 12px;
text-align: center;
width: 15%;
position: relative;
float: left;
}
/* */
.steps li:before {
display: block;
content: counter(step); /* */
counter-increment: step; /* */
width: 32px;
height: 32px;
background-color: #019875;
line-height: 32px;
border-radius: 32px;
font-size: 16px;
color: #fff;
text-align: center;
font-weight: 700;
margin: 0 auto 8px auto;
}
/* */
.steps li ~ li:after {
content: "";
width: 100%;
height: 2px;
background-color: #019875;
position: absolute;
left: -50%;
top: 15px;
z-index: -1; /* */
}
/* / */
.steps li.active:before,
.steps li.active:after {
background-color: #019875;
}
/* / */
.steps li.active ~ li:before,
.steps li.active ~ li:after {
background-color: #777;
}
</style>
呼び出しコンポーネント
<template>
<div>
{{num1}}
<el-button type="warning" @click="getNumber">get a random number</el-button>
<Steps :Steps="registSpets" :SetData="SetData" />
<el-button type="primary" @click="registSpets++">+++</el-button>
{{registSpets}}
<el-button type="danger" @click="registSpets--">---</el-button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import Steps from "../components/Steps.vue";
@Component({
components: {
Steps
}
})
export default class Input extends Vue {
num1: number = 0;
registSpets = 1;
SetData = [" ", " ", " ", " ", " "];
getNumber() {
this.num1 = Math.ceil(Math.random() * 10); // Matg.ceil
}
}
</script>
参考原文:https://blog.csdn.net/xqq580231/article/details/78086173