
在写移动端步骤条的时候,发现第三方的步骤条满足不了需求,于是手写了一个。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
| <!-- 步骤条组件 --> <template> <div id="steps" :style="`display:flex;flex-direction:${stepStyle.flexDirection};`" > <div v-for="(item, index) in stepList" :key="index" class="steps" :style="`display:flex;flex-direction:${stepStyle.stepsFlexDirection};`" > <p class="icon" :style="`background-color: ${ active >= index ? stepStyle.stepsActiveColor : '#CCCCCC' };`" > {{ index + 1 }} </p> <p class="name" :style="`color:${ active >= index ? stepStyle.stepsActiveColor : '#CCCCCC' }`" > {{ item }} </p> </div> </div> </template>
<script lang="ts"> import { defineComponent, reactive, toRefs } from "vue"; export default defineComponent({ name: "steps", components: {}, props: { stepStyle: { type: Object, default() { return { flexDirection: "row", stepsFlexDirection: "column", stepsActiveColor: "#0077dd", }; }, }, stepList: { type: Array, default() { return []; }, }, active: { type: Number, default: 0, }, }, setup(props) { console.log("props", props.stepStyle); const data = reactive({}); return { ...toRefs(data), }; }, }); </script>
<style lang="scss" scoped> #steps { .steps { flex: 1; display: flex; justify-content: center; align-items: center; .icon { height: 30px; width: 30px; border-radius: 50%; color: #ffffff; display: flex; justify-content: center; align-items: center; } .name { width: 56px; height: 20px; font-family: PingFangSC-Medium; font-weight: 500; font-size: 14px; text-align: center; padding-top: 4px; } } .steps:not(:last-child)::after { content: ""; width: calc(100% - 35px); height: 1px; border-bottom: 2px solid #cccccc; display: inline-block; margin-left: 100%; margin-top: -40px; } .steps:last-child::after { content: ""; display: inline-block; margin-left: 100%; margin-top: -40px; } } </style>
|