|
@@ -0,0 +1,39 @@
|
|
|
+<template>
|
|
|
+ <a-steps changeable :current="current" @change="setCurrent">
|
|
|
+ <a-step description="This is a description">Succeeded</a-step>
|
|
|
+ <a-step description="This is a description">Processing</a-step>
|
|
|
+ <a-step description="This is a description">Pending</a-step>
|
|
|
+ </a-steps>
|
|
|
+ <div :style="{
|
|
|
+ width: '100%',
|
|
|
+ height: '200px',
|
|
|
+ textAlign: 'center',
|
|
|
+ background: 'var(--color-bg-2)',
|
|
|
+ color: '#C2C7CC',
|
|
|
+ }">
|
|
|
+ <a-space size="large">
|
|
|
+ <a-button type="secondary" :disabled="current <= 1" @click="onPrev">
|
|
|
+ <IconLeft /> Back
|
|
|
+ </a-button>
|
|
|
+ <a-button type="primary" :disabled="current >= 3" @click="onNext">
|
|
|
+ Next
|
|
|
+ <IconRight />
|
|
|
+ </a-button>
|
|
|
+ </a-space>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import { reactive } from 'vue'
|
|
|
+ const current = reactive(1)
|
|
|
+ onPrev() {
|
|
|
+ current = Math.max(1, this.current - 1)
|
|
|
+ }
|
|
|
+
|
|
|
+ onNext() {
|
|
|
+ current = Math.min(3, this.current + 1)
|
|
|
+ }
|
|
|
+
|
|
|
+ setCurrent(current) {
|
|
|
+ current = current
|
|
|
+ }
|
|
|
+</script>
|