开发日常总结

1，
1)移动端拖拽vue-draggable
http://www.itxst.com/vue-draggable/n6rzmqj3.html
2)Vue拖拽组件awe-dnd 使用v-dragging
npm install awe-dnd --save
main.js中注册

import VueDND from 'awe-dnd';
// 注册-拖拽组件
Vue.use(VueDND);

使用

v-dragging="{ item: item, list: colorList, group: 'item' }"

3)sortable
http://www.sortablejs.com/options.html#
2，移动端手势库 hammer.js
https://www.cnblogs.com/vajoy/p/4011723.html?utm_source=tuicool#api1
3, JS判断两个时间戳是否为同一天
new Date().toDateString()

image.png

4,element-ui 输入框el-input 输入长度限制组件不生效
可能你项目下载安装的element-ui版本和你看的官方文档版本不一样，
element-ui ,输入框el-input长度限制这个组件是最新版本2.8.2才有的
5，css 超过2行省略，...的形式展示的问题

  overflow: hidden;
    text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp:2;
      -webkit-box-orient: vertical;

6, el-input获取焦点时样式改变 :focus伪类

&:focus{
    background: #fff;
 }

7, element-ui中el-input需要改变placeholder的字体颜色

input::-webkit-input-placeholder {
    color: #c0c4cc;
  }
  input::-moz-input-placeholder {
    color: #c0c4cc;
  }
  input::-ms-input-placeholder {
    color: #c0c4cc;
  }

8，element ui中的input组件 show-word-limit 不生效
版本过低，这个功能在版本为2.8.2才有的
9，Git基于一个分支创建新分支
1）切换至需要克隆的分支git checkout release
2）拉取该分支最新的代码（当然，拉取之前最好本地的仓库环境是干净的，该提交的提交，该stash的stash）git pull release
3）基于release分支克隆出新的本地分支issue66git checkout -b issue66
10, 查看分支
1)查看本地仓库的分支
git branch
2)查看本地和远程仓库的所有分支
git branch -a
3)查看远程仓库的分支
git branch -r
11,查看stash list
1)所有的stash
git stash list
2)查看某个stash具体内容
git stash show -p stash{1}
12，复制粘贴库clipboardjs
http://www.clipboardjs.cn/
13,v-text和插值表达式{{ }}的区别
v-text会覆盖元素中原本的内容，插值表达式{{ }}只会替换自己的这个占位符，不会把整个元素内容替换。

<span v-text='text'>123</span> //hello
<span>{{text}}123</span> //hello123

14,设置input和textarea光标颜色
caret-color: #FA0560;
15,vue 关于input和textarea自动聚焦问题

this.$refs.focusTextarea.focus();
ios光标在文字最前面，安卓正常，在文字最后面，所以需要聚焦后从新赋值
this.newMessage = sessionStorage.getItem('value') ? sessionStorage.getItem('value') : '';

16，element.getBoundingClientRect() 获取元素相对于视窗的距离

image.png

element.getBoundingClientRect().top
element.getBoundingClientRect().left
element.getBoundingClientRect().bottom
element.getBoundingClientRect().right

适用于场景： 吸顶效果
$(window).scroll(function () {
             var obj = document.getElementById(target.slice(1)).getBoundingClientRect();
             if (obj.top - $(this.element).height() < 0 && obj.bottom - $(this.element).height() > 0) {
                 $(element).css(fixed)     
                 $(element).css("width",$(element).parent().width()+"px")
             } else {
                 $(element).css(none)
             }
         });

17, div中纯文字居中
单行： line-height
多行： display: table-cell; vertical-align: middle
18, 移动端web禁止长按出现菜单
方法一： css

{
 -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

方法二： js

 node.addEventListener('contextmenu', function(e){
    e.preventDefault();
  });

oncontextmenu 右击鼠标事件
阻止默认右键 @contextmenu.prevent
点击其他地方，关闭右键菜单

mounted(){
            // 监听body上的点击  
 document.querySelector("body").addEventListener("click",this.closeMenu)
  },
 beforeDestroy(){
            // 移除监听
document.querySelector("body").removeEventListener("click",this.closeMenu)
  }

19,
white-space 元素内空白如何处理
nomal : 默认，空白被浏览器忽略
nowrap: 不换行，直到遇到br标签才换行
pre-wrap: 保留空白符序列，但是正常地进行换行

image.png

pre-line: 合并空白符序列，但是保留换行符。

image.png

20，
已知div宽高，内部img垂直水平居中
1）

div {
width: 300px;
height: 300px;
display: table-cell;
vertical-align: middle;
text-align: center;
}

img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 高度的一半 */
margin-left: -50px; /* 宽度的一半 */
}

未知宽高，img在div内垂直水平居中

<div class="box">
    <img src="tiger.jpg" />
    <span></span>
</div>
.box{
      width: 800px;
      height: 600px;
      text-align:center;
}
span {
      display:inline-block;
      height:100%;
      vertical-align: middle;
}
img {
      vertical-align:middle;
}

21, find，findeIndex，filter
find

const myArr = [1,2,3,4,5,6];
var v = myArr.find((value, index, arr) => {value > 4});
console.log(v);//5 
myArr不变，未找到会输出undefind

findIndex和find使用方法一样，返回序号，若没找到，返回-1
filter返回的是数组。所有符合条件的数组

数组去重
var myArr = [1,3,4,5,6,3,7,4];
console.log(myArr.filter((value, index, arr) => arr.findIndex(value) === index)); //[1, 3, 4, 5, 6, 7]

22，
animation 动画停在最后一帧
animation-fill-mode: forwards
23,
div和img垂直排列的时候会有一个缝隙。解决办法：
img的display: block
24，
css3的hsla()属性。
hue: 0红色，120绿色， 240蓝色
saturation饱和度： 0灰色-100%全色
lightness亮度： 0:暗-50%正常，100%白色
alpha透明度
25，
css文本超出隐藏显示省略号

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

26，div中input垂直居中

display: table;
display: table-cell

27, 实现如图布局，父元素高度由内容撑开，内容高度不定，

image.png

<div class="wrap">
  <span>ss</span>
  <span class="end">
     <span>mm</span>
     <span>dddddddd<br/>ddddd<br/>ddddd</span>
  </span>
</div>

.wrap {
  display: flex;
  background: pink;
  align-items: flex-end;
}
span {
  margin-left: 10px;
}
.end {
   display: flex;
   align-items: center;
}

27,
text-decoration:
值描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
28，
移动端click 300ms延迟问题
fastclick：
1）npm install fastclick -S
2）在main.js中引入，并绑定到body
import FastClick from 'fastclick'
FastClick.attach(document.body);
⚠️ 不需要加fastclick元素的class上可以加needsclick class="needsclick"
29，
中文文件名编码乱码,git默认配置下中文文件名显示为八进制编码。需要更改下配置：
git config --global core.quotepath false
30，
快速关联远程仓库新地址

git remote  //查看远程仓库名称：origin 
git remote get-url origin //查看远程仓库地址
git remote set-url origin https://github.com/developers-youcong/Metronic_Template.git  ( 如果未设置ssh-key，此处仓库地址为 http://... 开头

31,
删除远程分支
git push origin --delete [branch_name]
删除本地分支
git branch -d [branch_name]
32,
git中避免提交.DS_Store文件
1）创建.gitignore文件
2）vi .gitignore,然后添加.DS_Store作为忽略 .DS_Store
3）提交
git add . /commit /push
33,
pointer-events: none：元素看得见但是摸不着。
display: none：元素看不见也摸不着
34，
ios上只有用户交互触发的focus事件才会起效，而延时回调的focus是不会触发的，说得大佬粗点，你想在ios上focus事件起效就不能讲focus时间放在延时里面调用
35，
Ant design添加其他参数, param;默认参数是value

<a-select @change="value => handleChange(value, param)" 
          v-model="eqList[index].eqId">
 </a-select>

36，
safari浏览器new date()兼容问题
在做移动端开发时，ios设备上new date（）再格式化出现了NaN现象

经过了解，是因为低版本的safari浏览器对new Date(str)有严格校验，对于诸如2017-08-30 10:23:22 这样形式的字符串是不支持的。后来使用replace(/-/g,”/”)将时间字符串转换为2017/08/30 10:23:22解决了问题

37，
keep-alive从别的页面跳回来，element 走马灯不播放问题。其实keep-alive缓存组件的是created钩子会创建一个cache对象，用来作为缓存容器，保存vnode节点。destroyed钩子则在组件被销毁的时候清除cache缓存中的所有组件实例。
猜想，可能是显示的页面可能只是vnode节点，还没有渲染出html标签就执行了new了swiper实例，导致swiper的实例无法挂在到实际的html元素上，所以出现轮播无法播放的问题。
解决：

页面用 v-if="isShow" 控制
activated() {
    this.isShow = true;
}
deactivated() {
    this.isShow = false;
}

38，