无锡企业建站模板,杭州比较好的网站建设公司,万户网络建一个网站虽要多少钱,南宁网站制作多少钱问题复现
最近我突然接手一个后台的bug#xff0c;这个后台很久没有迭代更新了#xff0c;我也不熟悉业务#xff0c;所以只能看一下源码#xff0c;问题很快就复现#xff0c;测试的修复操作也很正确#xff0c;就是因为渲染的input标签中存在disableddisabled’属性导…问题复现
最近我突然接手一个后台的bug这个后台很久没有迭代更新了我也不熟悉业务所以只能看一下源码问题很快就复现测试的修复操作也很正确就是因为渲染的input标签中存在disableddisabled’属性导致的。 不过很奇怪的是我问之前是正常的吗
这部分代码已经很久没有改动过了 但是测试和运营那边的人员都坚持两个月前还是正常的记录能够证明我先怀疑的是两个月前是正常的那是不是两个月前有迭代谁更新了什么依赖的版本导致出现的bug然后就开始找仓库最后一次修改记录。
查找记录
确实这个仓库的最后一次提交记录是一个月前然后我就仔细看了一下是修改了什么导致的 但是最后一次修改记录中也没有改到依赖package.json也没有更新lock文件只有三个文件的变化这看着都不会影响全局的内容最重要的是没有改到相关页面的代码。 代码本地回滚
没有其他办法我只能本地代码回滚看看是不是上次迭代导致出现了bug但是代码回滚之后这个问题依然存在。
我开始思考项目是vue2的vue的版本是2.7.14 导致的原因是disabled属性 这是一个子组合父组件传递的属性确实是false而且不传递这个属性时默认值也是false
问题修复
我写了一个在线的demo复现
https://codesandbox.io/s/intelligent-engelbart-3h9fcq
代码如下
templatediv idappHelloWorld msgHello Vue in CodeSandbox! /div classboxinput disabled //divhr /div classboxinput :disableddisabledVal //div/div
/templatescript
import HelloWorld from ./components/HelloWorld;export default {name: App,components: {HelloWorld,},data() {return {disabled: false,disabledVal: false,};},
};
/scriptstyle
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.box {width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;
}
/style页面解析如下 由于data中或者props中disabled变量直接赋值给template模板中的disabled的属性当disabled变量为false页面解析出来的标签还是带有disabled属性的属性值也是disabled浏览器的表现形式为禁用这其实不符合逻辑了。 当disabled变量为true就直接禁用
当disabled变量为false是不禁用状态
这才是理想状态看来这是vue2解析的问题把变量名改成disabledVal这个问题就解决了这说明Vue2对元素自带属性不能定义为变量不然很容易出现问题呀。
到这里大家请牢记取变量名很重要能够阻止一些奇怪的bug产生哦
根本原因
到这里我还是疑惑的为什么之前能够正常使用的现在突然不能用了盯着bug工单上的浏览器版本我赶紧查看了谷歌浏览器更新的新特性
还真被我找到了全局搜索disabled还是很有用的
原文在这里
https://chromestatus.com/feature/6128674512830464
翻译截图 正好是116版本的新特性而存在disabled属性的元素禁止点击事件了这也是为什么两个月前是正常的原因了 正好是一个月前发布的而我的电脑设置的是自动检测更新所以已经更新到最新版本了而谷歌浏览器默认是自动更新所以就出现了这个bug.
对比
114版本
很多小伙伴不知道如果是116版本以前的浏览器会是什么效果,正好我有两个浏览器,一个已经自动升级到最新版本,一个还是114版本 现在我们就对比一下,两者又有何不同
代码如下:
template
div idapp
HelloWorld msgHello Vue in CodeSandbox! /
div classbox
input clickhandleClick disabled /
/div
hr /
div classbox
input clickhandleClick :disableddisabledVal /
/div
/div
/templatescript
import HelloWorld from ./components/HelloWorld;
export default {name: App,components: {HelloWorld,},data() {return {disabled: false,disabledVal: false,};},methods: {handleClick() {console.log(click----)}}
};
/scriptstyle
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.box {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: pink;
}
/style效果如下: 同样的代码,在114版本的时候,我们发现disabled为false的时候,这个input标签是禁用状态, 而且我们可以给这个input标签父元素绑定点击事件,这个点击事件是能够执行的.
另外codesandbox可以打开到新tab页观看效果 这样打开就能打开控制台,看到vue编译之后的HTML模板了 116版本
现在我们接着来看116版本的, 虽然是Microsoft Edge浏览器,但依旧是谷歌内核哦, 所以还是一样的 效果如下: 我们能够看到, 这里的116版本的是已经禁止了点击事件冒泡的, 114版本的是还能够点击事件冒泡传播.
所以导致这个bug出现, 正是谷歌内核新增新特性导致的, 禁止了点击事件.
