開發(fā)日车叫龋總結

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基于一個分支創(chuàng)建新分支
1）切換至需要克隆的分支git checkout release
2）拉取該分支最新的代碼（當然本慕，拉取之前最好本地的倉庫環(huán)境是干凈的，該提交的提交侧漓，該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和插值表達式{{ }}的區(qū)別
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禁止長按出現(xiàn)菜單
方法一： 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(){
            // 監(jiān)聽body上的點擊  
 document.querySelector("body").addEventListener("click",this.closeMenu)
  },
 beforeDestroy(){
            // 移除監(jiān)聽
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返回的是數(shù)組冯凹。所有符合條件的數(shù)組

數(shù)組去重
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, 實現(xiàn)如圖布局紊选，父元素高度由內容撐開，內容高度不定道逗，

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裆赵，
快速關聯(lián)遠程倉庫新地址

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）創(chuàng)建.gitignore文件
2）vi .gitignore,然后添加.DS_Store作為忽略 .DS_Store
3）提交
git add . /commit /push
33,
pointer-events: none：元素看得見但是摸不著跺嗽。
display: none：元素看不見也摸不著
34战授，
ios上只有用戶交互觸發(fā)的focus事件才會起效页藻，而延時回調的focus是不會觸發(fā)的，說得大佬粗點植兰，你想在ios上focus事件起效就不能講focus時間放在延時里面調用
35份帐，
Ant design添加其他參數(shù), param;默認參數(shù)是value

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

36，
safari瀏覽器new date()兼容問題
在做移動端開發(fā)時钉跷，ios設備上new date（）再格式化出現(xiàn)了NaN現(xiàn)象

經過了解弥鹦，是因為低版本的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鉤子會創(chuàng)建一個cache對象锭吨，用來作為緩存容器蠕趁，保存vnode節(jié)點李根。destroyed鉤子則在組件被銷毀的時候清除cache緩存中的所有組件實例锌杀。
猜想覆享，可能是顯示的頁面可能只是vnode節(jié)點爆惧，還沒有渲染出html標簽就執(zhí)行了new了swiper實例臊旭，導致swiper的實例無法掛在到實際的html元素上落恼，所以出現(xiàn)輪播無法播放的問題。
解決：

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

38离熏，

開發(fā)日常總結

開發(fā)日巢啻鳎總結