1. 程式人生 > 實用技巧 >Vue Steps 步驟條 click

Vue Steps 步驟條 click

Steps 步驟條 click

  

<template>
    <p>當前正在進行第 {{ current + 1 }} 步</p>
    <Steps :current="current">
        <Step title="步驟1" @click.native="test(0)">1</Step>
        <Step title="步驟2" @click.native="test(1)">2</Step>
        <Step title="步驟3" @click.native
="test(2)">3</Step> <Step title="步驟4" @click.native="test(3)">4</Step> </Steps> <Button type="primary" @click="next">Next step</Button> </template> <script> export default { data () { return { current:
0 } }, methods: { next () { if (this.current == 3) { this.current = 0; } else { this.current += 1; } }, test(obj){ this.current = obj; } } }
</script>