标签：自己的 name 鼠标 体验 简单 design span val git
年前做了运营管理系统的优惠券的模块，测试在gitlab给我提了很多体验上的优化问题，其中有一个体验优化的问题是给选择框的下拉选项中添加一个在鼠标悬浮在下拉选项中的某一项时，显示一个提示框展示完整的内容。
我们的系统采用vue版本的ant-design，年前放假前我试着去解决这个问题，粗略的看了一下vue版本的ant-design文档，没有发现有类似的功能，然后我就觉得这个问题改起来会比较麻烦，有点抗拒去改这个问题，因为可能需要我自己写一个具有这个功能的下拉选择框，需要为了这个体验问题耗费我很多时间。对于体验上的问题，如果太久没有想出解决方案，有的时候会没有耐心去解决，因为总觉得有的体验问题不像逻辑问题那么重要，而且又很耗费时间去解决。
过年放假回家，我还是没有做出任何行动去解决这个问题，潜意识里觉得这个问题对我来说不重要，我不想用自己的时间去做这个事情。直到年后回来，第一天上班，也就是昨天被组长要求现在有时间赶紧把这个问题给close掉，我才不得不沉下心来去想各种解决方案。
我试着在<a-select> <a-select-option value="lucy">lucy</a-select-option> </a-select>这个组件的同级去加一个div元素用来做提示框，完整显示当前选中的下拉选项的内容，但是行不通，选择框的选项始终会覆盖在这个设置了相对于父级元素设置了绝对定位的div的上面。我想我可能真的要重新写一个选择框了，因为不想写，然后我又去看了一遍文档，仔细看文档给的效果看有没有类似的功能。文档中给的搜索框的效果中我惊喜的发现了我想要的效果，然后我去看浏览器中的源码看它是怎么实现的，然后我发现了title这个属性，ant-design中的下拉选项的完整内容提示的效果直接用title属性来实现的。我没有再去看文档中的选项使用说明，直接试着在代码中添加title属性，在给a-select-option 中添加一个title属性，我最终成功的解决了这个问题。解决完之后，发现原来自己觉得难的问题原来这么简单。
总结：
1、认清自己，很多时候你不想解决的问题，可能就是因为你不会，要花费你很多时间，所以你抗拒去解决
2、遇到一个问题之前，第一要想到的事，你遇到的问题，别人早已想到解决方案，你的责任就是去找到它
3、一个成熟的框架，先相信它，再找痛点
4、工作中最让自己反情绪的事情就是测试不断提的体验优化的问题，思考在开发过程中如何做到提前想到去做好，这样可以减少很多提测之后的bug量。
抱着凡是我所领域的东西，不允许自己不会的态度对待自己的工作。
标签：自己的 name 鼠标 体验 简单 design span val git
原文地址：https://www.cnblogs.com/yy95/p/10368380.html
