随手记录常见问题(三):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-itemscenter; BUG处理如下:

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

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

法2:把图标的样式设为 flex: none;  // flex属性是flex-growflex-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属性决定主轴的方向(即项目的排列方向)。
...

文章标题:随手记录常见问题(三):img的默认图片+复制菜单项不触发点击+flex子元素默认可缩小+video标签视频可播放范围
文章链接:https://www.dianjilingqu.com/51245.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>