随手记录常见问题（三）：img的默认图片+复制菜单项不触发点击+flex子元素默认可缩小+video标签视频可播放范围

Q1: 加载失败时显示默认图片的vue写法

<img :src="src" @error="handleImageError" alt="" />

handleImageError (e)  {
  const image = e.target;
  image.src = noImg;
  image.onerror = null;
}

其他写法：

<img :src="item.face_img" onerror="javascript:this.src='src/assets/img/no-picture.png';this.onerror=null"/>

Q2: 实现 “点击菜单里的路由跳转时收起菜单”功能

A：一开始之间写成了监听click事件

 document.getElementById('algorithm-menu').addEventListener('click',function(){
   $('#algorithm-menu').css("display",'none');  
   $('.dropdown-tab-bg').css("display",'none')
})

这么写的副作用：（点击空白tab处会触发！！，复制菜单项也会触发click收起！！orz）

后来改成监听路由hack：（还是有点副作用：点击当前页面的菜单，菜单不会收起）

watch: {
    '$route.path': function(){
      $('#algorithm-menu').css("display",'none'); 
      $('.dropdown-tab-bg').css("display",'none')
    })
  }

感觉还可以走的思路：

加到router-link上@click再加上防止复制触发click;

也可以click监听仍然加到父元素上，但是可以筛出来子元素。（好处，新加入的子元素不用也补加@click）=》参照事件委托写法

Q3: 布局：<父元素>一个图标+一行不换行的文字。在缩小视窗时，图标跟着也缩小了？？

关于display:flex使用时没有注意的点：修别人的bug ==

A3: 代码review发现别人图垂直对齐省事直接在<父元素>上用了 display:flex;align-items: center; BUG处理如下：

对于子元素存在默认属性，flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。所以:

法1：把图标的样式设为：flex-shrink:0

法2：把图标的样式设为 flex: none; // flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

另外 flex:1 的意思： flex-grow:1; flex:-shrink: 1;flex-basis:0%;

基准值取 0% 的时候，是把该项目视为零尺寸的，故即便声明其尺寸为 140px，也并没有什么用，形同虚设；该项目会自动放大占满剩余空间。

flex:1 经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，再将内容区flex：1；

flex-grow : 1; // this means that the div will grow in same proportion as the window-size
flex-shrink : 1; // this means that the div will shrink in same proportion as the window-size 
flex-basis : 0; // this means that the div does not have a starting value as such and will take up screen as per the screen size available for.e.g:- if 3 divs are in the wrapper then each div will take 33%.

// 翻译
flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长
flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小
flex-basis : 0; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： - 如果包装器中有3个div，则每个div将占用33％。

参考链接：、、MDN 、控制flex子元素在主轴上的比例

Q4: 用video标签无法播放mp4视频（问题发现：一堆mp4视频里只有一个mp4视频播放不了）

A4: 只有h264编码的MP4视频（MPEG-LA公司）、VP8编码的webm格式的视频（Google公司）和Theora编码的ogg格式的视频（iTouch开发）可以支持html5的标签。

随手记录常见问题（三）：img的默认图片+复制菜单项不触发点击+flex子元素默认可缩小+video标签视频可播放范围

相关

标签