demo 原始链接:https://vux.li/demos/v2/#/component/step
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div style=\"width: 95%;margin: 0 auto;\">\n <br>\n <div>\n <step v-model=\"step1\" background-color='#fbf9fe'>\n <step-item :title=\"$t('step 1')\" description=\"step 1\"></step-item>\n <step-item :title=\"$t('step 2')\" description=\"step 2\"></step-item>\n <step-item :title=\"$t('step 3')\" description=\"step 3\"></step-item>\n </step>\n </div>\n <x-hr></x-hr>\n <div>\n <step v-model=\"step2\" background-color='#fbf9fe' gutter=\"20px\">\n <step-item :title=\"$t('done')\"></step-item>\n <step-item :title=\"$t('processing')\"></step-item>\n <step-item :title=\"$t('end')\"></step-item>\n </step>\n <div class=\"btn_wrap\">\n <x-button type=\"primary\" @click.native=\"nextStep\">{{ $t('next step') }}</x-button>\n </div>\n </div>\n </div>\n</template>\n\n\n\n<script>\nimport { Step, StepItem, XButton, XHr } from 'vux'\n\nexport default {\n components: {\n Step,\n StepItem,\n XButton,\n XHr\n },\n data () {\n return {\n step1: 1,\n step2: 0\n }\n },\n methods: {\n nextStep () {\n this.step2 ++\n }\n }\n}\n</script>\n\n<style lang=\"less\">\n.btn_wrap {\n padding: 0 1rem;\n margin-top: 2rem;\n}\n</style>\n\n
\n