寒假比赛总结(七) - 各种坑

前言

在开发的过程中遇到了一些奇妙的坑。与其说坑,倒不如说自己以前从来没有遇见过或者考虑过这些东西。甚至其中某几个还曾一度被我认为是Bug。在查阅资料后发现那种设计还是有其道理的。

1. 关于伪元素

在比赛中用到伪元素的地方不多也不少,其实我认为伪元素的出现给开发带来了很多方便,代码也变得很干净整洁。因为伪元素并不是真正的元素,却又和真正的元素没什么差别。

但是,伪元素也有其限制。

现有需求如下图:

http://lenconda.top/images/18022302.png

因为头像右下角的相机在样式上是不变的,所以首选应该就是伪元素。于是我开始编写此代码:

HTML:

<img src="avatar.png" />
img {
    width: 83px;
    height: 83px;
    border-radius: 50%;
    position: relative;
    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        display: block;
        width: 22.5px;
        height: 22.5px;
        background: url('camera@3x.png') 100% e('/') 100% no-repeat;
    }
}

查看效果后发现:

伪元素不见了!不见了!不见了!!!

后来查阅资料才发现:

大部分行级元素也可以设置伪元素,但是像img可替换元素,因为其外观和尺寸有外部资源决定,那么如果外部资源正确加载,就会替换掉其内部内容,这时伪元素也会被替换掉,但是当外部资源加载失败时,设置的伪元素是可以起作用的。

原来img标签资源加载正确就不会显示伪元素。。

后来经过测试,发现Input元素中的伪元素也无法显示。所以据此推测,没有子元素的元素也不能有伪元素。

2. Input当类型为Number是能输入e

一开始我是无意间刷键盘,发现Number的Input居然能输入e!我当时认为是浏览器的Bug,但是在Firefox浏览器下一样能输入e。

查找资料后发现并非是Bug,其实e是被当作自然对数的底数,所以e也是一个数字。但是我们并不希望出现e。

解决方法:

<input type='number' onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' />

3. Vue.js在命名路由之间切换不执行生命周期钩子

一开始确实没有考虑过这个问题,后来仔细一想:因为命名路由实质上还是同一个组件,就算切换路由也不会触发生命周期的钩子函数。

这个问题解决起来其实并不困难。一开始我想用watch来解决问题,但是查阅Vue Router的官方文档后发现官方有个名为“导航守卫”的功能。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。

但是文档上有这么一句话,所以在本例中的导航守卫应该采用组件内的导航守卫beforeRouteUpdate进行路由参数变化的观察。

beforeRouteUpdate (to, from, next) {
  () => {
    //当路由变化时,这里的代码将会执行
  }
  next() //执行完之后跳转到to所匹配到的路由
}

将最新的文章发送到你的邮箱

展示评论