Vue中vue-form-wizard移除导航按钮及start-index布局异常问题

移除默认返回、下一步按钮 #

无需修改node_modules下的插件源码，官方原生支持配置实现，两种方案按需选择：

• 纯流程展示/进度追踪场景，直接在<form-wizard>组件上绑定:hide-buttons="true"属性，会直接隐藏整个底部操作栏，所有默认的返回、下一步、完成按钮都不会渲染，配置成本最低。
• 如果需要保留底部栏自定义其他内容，用组件内置的footer具名插槽覆盖默认的按钮渲染逻辑，插槽内按需写自定义内容即可，灵活度更高。

注意：不要直接修改node_modules内的源码，后续依赖安装、版本升级操作会直接覆盖所有修改，且修改无法随项目代码同步给其他协作成员，维护风险极高。

start-index配置后布局错乱修复 #

问题原因 #

Vue模板中不带v-bind（即属性前无冒号）的属性，传递的值默认是字符串类型。vue-form-wizard内部对步骤索引的匹配、激活态样式计算、进度条宽度渲染都是基于数字类型做逻辑判断，传入字符串格式的索引值会导致判断逻辑异常，最终出现布局错位。

修复方式 #

给start-index属性添加v-bind前缀，将值以数字类型传入即可，把原写法start-index="2"修改为:start-index="2"。

修复后适配需求的完整代码参考：

<form-wizard 
  color="#4466f2" 
  :start-index="2" 
  title="Total Enterprise Value" 
  subtitle="Accounting" 
  :hide-buttons="true"
  back-button-text="Go back!" 
  next-button-text="Go next!" 
  finish-button-text="We're there"
>
  <tab-content title="Incoming">
    <div class="setup-content" id="step-1"></div>
  </tab-content>
  <tab-content title="Obligate">
    <div class="setup-content" id="step-2"></div>
  </tab-content>
  <tab-content title="Journal">
    <div class="setup-content" id="step-3"></div>
  </tab-content>
  <tab-content title="Certified">
    <div class="setup-content" id="step-4"></div>
  </tab-content>
</form-wizard>

内容的提问来源于stack exchange，提问作者Shainnah Jane