总结

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