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

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

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

handleImageError (e)  {
  const image = e.target;
  image.src = noImg;
  image.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)。

PS

另外  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％。

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

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

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

推荐这些文章：

flex布局 元素居左居右

...

随手记录常见问题（二）

Q1：为了实现鉴权功能，在header请求头加入自定义的字段，与后端在本地联调没有问题。布到线上后端无法获取header头的字段，浏览器里network里显示header有自定义字段
A：是因为Nginx的问题，对于nginx来说，默认是过滤掉自定义的含有下划线name。。。
  需要在conf的http段添加：
underscores_in_headers on;
#该属性默认为off，表示如果header name中包含下划线，则忽略掉、
使其支持header name定义中包含下划线。
或者改掉自定义的名字让其符合要求。
Q2: 计算属性和过滤器的区别
A: 计算属性1、计算...

HTML img标签属性

标签属性

 
 
img标签举例：

...

Jquery div 块触发事件问题

问题
  <div id="showWorkHead"  >
      <div id="workCurrency">      
　　</div>     
 　　<div id="workLanguage">   
   　</div> 
 </div>这种形式的DI...

flex布局下的子元素宽度无效问题

因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性。
该属性介绍:
一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
根据上述介绍可以理解为默认 1 为开启收缩
所以可以将display:flex;下的子元素的flex属性设置为flex:0 0 auto;
解决了display:flex下的子元素设置宽度无效的问题。

...

剩余元素填充

问题： 有个容器，里面有上下两个元素。 上元素的高度固定(但未知)， 想让下元素充满余下的高度。
 
方法一
 

 
解决： 用 Flex
HTML:
<div id="outer"><div id="inner_fixed">I have a fixed height</div><div id="inner_remaining">I take up the remaining height</div></div>
CSS:
#outer {display: ...

flex布局设置单个子元素靠右

父元素设置了 flex 布局

display: flex;
align-items: center;

如何让某个子元素靠右呢？
方法一：

flex: 1;
text-align: right;

方法二：

margin-left: auto;

...

flex布局 flex-grow和flex-shrink

 
1、flex-grow（默认0）：当子元素没设置width时，子元素会按比例平分父元素设置的宽度，当子元素设置了width，如

ul{
display: flex;
justify-content: space-between;
width: 1000px;
}
.a{
width: 200px;
background: aquamarine;
flex-grow: 1;
}
.b{
background: azure;
width: 200px;
flex-grow: 1;
}
.c{
bac...

vue中点击按钮弹出视频

<div>
　　<button @click='checkVideoFun(item.video)'>点此观看完整视频</button> //外层的遮罩 v-if用来控制显示隐藏 点击事件用来关闭弹窗
　　<div class='mask' v-if='videoState == true' @click='masksCloseFun'></div> //弹窗
　　<div class="videomasks" v-if="videoState == true">
　　// 视频：h5的视频播放video
　　　　<...

CSS3弹性盒子常用属性

CSS3 弹性盒子(Flex Box)

注意点：

行内元素也可以使用 Flex 布局。
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
弹性盒子里面的子元素设置外边距不会合并。

容器属性
以下4个属性设置在容器上。

flex-direction
flex-wrap
justify-content
align-items
align-content

1.flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
...