项目收获记录2 内容展示可以根据接口返回的数据直接在数组中进行取值，然后做操作。第一次使用步骤条的时候，就是循规蹈矩

el-steps

html

<el-steps :active="progress + 1">    
    <el-step v-for="item in steps" :key="item" :title="item.tit"></el-step>
</el-steps>

与步骤条相对应的是内容的展示部分

 <div v-show='getStepShow("one")' />
 <div v-show='getStepShow("two")' />
 <div v-show='getStepShow("three")' />

接口返回中获取 progress 值

progress = 1

原始数据

steps：[
    {
        tit:'标题',
        step_name:'one'
    },{        tit:'标题',
        step_name:'three'
    },{        tit:'标题',
        step_name:'two'
    },
]

函数返回对应的展示状态

getStepShow(step_name){
    return (step[progress]['step_name'] === step_name ? true : false )
}

注意点：

1 步骤条是虽然可以数组循环出来展示在页面上，但是高亮的步骤需要从 1 开始，因此需要在组件中的 :active="progress + 1"

2 内容展示可以根据接口返回的数据直接在数组中进行取值，然后做操作。

总结：

第一次使用步骤条的时候，就是循规蹈矩的一个个步骤写出来，然后相对应的内容页面的展示控制使用步骤条的取值 1、2、3这样做展示，在项目初期整个流程不是特别清楚的条件下可以使用这样方法，但是随着业务的增加，条理更加的清晰之后就需要学着简化代码，毕竟一个页面超千行的代码，看着不是很舒服，于是就有了以上的版本。

将步骤条进行数组话，同时可以根据业务逻辑随时更改步骤条，控制整个进度的走向。

内容部分的展示使用函数进行统一的处理，不仅方便管理而且不管步骤条的增加或者减少都不会影响内容的展示。

---

字体

压缩问题

中文字体包过大，需要压缩，但是需要在html页面上有中文字体的出现，即所见压缩。

原理：将页面已经出现的中文的字符码压缩，没有出现的在ttf文件中剔除掉，此方法在页面有输入的情况中不适合，所以项目中我们才用了将页面中所有的展示中文全部拿出来做压缩，输入框的输入的文字保持系统字体。

路径问题

自定义字体的引用路径

src需要修改为~@的路径格式，虽然会有飘红，但是编译过程以及build和使用字体不会出现问题。如果使用相对路径页面编译会出现找不到路径的错误。使用绝对路径虽然页面编译不会出错，但是在build时候ttf文件不会被编译，

---

页面主题色

UI框架可以有定制主题的功能，需要在UI官网中自己输入主题色并下来下来进行文件替换。

---

Svg图片

图片为svg格式的图片在windows或者ie浏览器中会出现问题（缺损或者其他），设计重新导出

svg图片进行替换。

---

Ie浏览器中「 window 」的使用

项目中有自定义的方法挂在window全局中，那么在ie中会出现不可以识别的方法，需要在项目中修改引用方法：在自定义方法使用导出-引入的方式在页面进行使用，可以兼容IE。

同样的地址，浏览器会出现缓存，即使地址内容出现更改，那么浏览器还是会使用缓存的内容。比如图片，所以图片的地址应该使用不同的地址链接，而不是同一个地址链接。

---

http 状态码

405

该方法不被允许，请求方式出错了。

接口302重定向问题需要解决跨域问题，因此接口修改为返回地址链接，由前端直接跳转链接页面。

302

由接口定义跳转页面，安全性会高。

Window.location.href前端跳转更加方便但是安全性能不如302重定向。

状态返回canceled

最后发现是ajax请求默认是异步的。我把请求改成同步的就行了。

第一种  设置如下参数：async: false。

第二种
methords:{
    async  fun (){
        await axios 请求
    }
}

---

项目中出现 localhost 请求

原因：form 中的按钮添加事件会导致一个触发一个form 的提交事件，触发了他的默认事件

解决：再按钮事件中加入 prevent 修饰符，@click.prevent 阻止默认事件。

参考链接

---

项目收获记录