demo 原始链接:https://vux.li/demos/v2/#/component/flow
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <flow>\n <flow-state state=\"1\" :title=\"$t('Paid')\" is-done></flow-state>\n <flow-line is-done></flow-line>\n\n <flow-state state=\"2\" is-done>\n <span slot=\"title\">{{ $t('Shipped') }}</span>\n </flow-state>\n <flow-line :tip=\"$t('In progress')\"></flow-line>\n\n <flow-state state=\"3\" :title=\"$t('Delivered')\"></flow-state>\n <flow-line></flow-line>\n\n <flow-state state=\"4\" :title=\"$t('Done')\"></flow-state>\n </flow>\n\n\n <flow>\n <flow-state :title=\"$t('Paid')\" is-done></flow-state>\n <flow-line is-done :line-span=\"15\"></flow-line>\n\n <flow-state :title=\"$t('Shipped')\" is-done></flow-state>\n <flow-line is-done :line-span=\"30\"></flow-line>\n\n <flow-state :title=\"$t('Delivered')\" is-done></flow-state>\n <flow-line :tip=\"$t('In progress')\" tip-direction=\"bottom\" :line-span=\"45\" :process-span=\"60\"></flow-line>\n\n <flow-state :title=\"$t('Done')\"></flow-state>\n </flow>\n\n <flow orientation=\"vertical\" style=\"height:250px;\">\n <flow-state state=\"1\" :title=\"$t('Paid')\" is-done></flow-state>\n <flow-line is-done></flow-line>\n\n <flow-state state=\"2\" :title=\"$t('Shipped')\" is-done></flow-state>\n <flow-line :tip=\"$t('In progress')\"></flow-line>\n\n <flow-state state=\"3\" :title=\"$t('Delivered')\"></flow-state>\n <flow-line></flow-line>\n\n <flow-state state=\"4\" :title=\"$t('Done')\"></flow-state>\n </flow>\n\n <flow orientation=\"vertical\" style=\"height:200px;\">\n <flow-state state=\"1\" :title=\"$t('Paid')\" is-done></flow-state>\n <flow-line is-done :line-span=\"15\"></flow-line>\n\n <flow-state state=\"2\" :title=\"$t('Shipped')\" is-done></flow-state>\n <flow-line :line-span=\"30\"></flow-line>\n\n <flow-state state=\"3\" :title=\"$t('Delivered')\"></flow-state>\n <flow-line :line-span=\"45\"></flow-line>\n\n <flow-state state=\"4\" :title=\"$t('Done')\"></flow-state>\n </flow>\n\n </div>\n</template>\n\n\n\n<script>\nimport { Flow, FlowState, FlowLine } from 'vux'\n\nexport default {\n components: {\n Flow,\n FlowState,\n FlowLine\n }\n}\n</script>\n\n
\n