本人也在不断的学习和积累中，文章中有不足和误导的地方还请见谅，可以给我留言指正。希望和大家共同进步，共建和谐学习环境。
1、npm安装
2、bower安装
3、CDN
注： 最好放在<body>中引用，不要放在<head>中。
需要引入一些css样式，在页面中引入 dist/dragulacss 或 dist/dragulamincss ，如果你使用的是Stylus，你可以这样引入
下面的示例允许用户将元素从中left拖入right和从中right拖入left
您还可以提供一个options对象。以下是默认值的介绍
您可以省略container参数，稍后动态添加容器。
还可以从options对象设置容器
你还可以设置一个没有container和options的draglua
dragula方法返回一个带有简洁API的小对象。我们将把dragula返回的API称为drake。
Dragula只使用四个CSS类。下面将快速解释它们的用途
默认：
Github/dragula
1 header组件开发总结
1）使用classMap设置优惠活动项
2）设置了公共样式自定义属性：border-1px($color)解决移动端1px问题
bg-image($url) 解决背景在不同设备像素比之下的大小
2headerd出层组件开发
d出层的内容部分采用 css sticky footer布局 ：
。最外层容器负责该d出层的整体位置 背景以及控制浮层的展示和隐藏
。外层两个容器一个内容层（清除浮动），一个定在底部的底部层
。内容层里面再建立一个内容层装主要内容
布局 如下：
关于样式 ：
。外层容器 detail-wrapper设置min-height:100%(最小高度有视口那么高)
。detail-close为底部固定层，相对定位，设置-margin值来使它保留在底部
。注意：内容层detail-main设置margin-bottom来为使其不会遮盖住底部固定层
样式如下：
。加入文字进行测试发现文字短的时候close在底部，文字长的时候，close在内容层最底部
控制浮层展示和隐藏 ：
。dom上使用v-show="变量名"进行控制
。实例中设置data函数返回变量名的值为false(默认不展示)
。需要控制点击展示的dom上使用@click=“方法名”
。在实例methods中定义方法使变量名的值为相反
2 星星组件开发
公共部分抽离成公共组件
。建立组件star接受两个参数星星数和大小，数据类型为Number
。使用计算属性来改变star 类名达到改变大小的目的
。
实现原理：建立一个数组result,声明变量 hasDecimal代表有小数点的情况，integer代表整数的部分。遍历整数部分，将类名on放入数组result中，如果有半星的情况就就放置类名off,剩下的放off。由于半星只会放置一个，所以不需循环。
。在header组件中引用star组件，使用star标签测试成功就可以了
布局方面：
效果：页面左右两边没有滚动条，页面长度超过视口，页面可以上下滑动
解决：定义视口的高度。将视口盒子绝对定位
首先 将商品goods数据mock到页面中，同header中seller数据请求
实现垂直居中使用table
实现页面垂直滚动：
。实现视口里的内容能够滚动，使用better-scroll库 >
windowonload=function(){
waterfall();
windowonscroll=function(){
var parent=documentgetElementById("main");
var boxs=getByClass(parent,"box");
var scrollH=documentdocumentElementscrollTop||documentbodyscrollTop;
var documentH=scrollH+documentdocumentElementclientHeight;
var lastH=boxs[boxslength-1]offsetTop+Mathfloor(boxs[boxslength-1]offsetHeight/2);
/763/
if(lastH-350<documentH){ //这里的lastH不减掉350，就无法进入if语句？？？
/465/
dataInt={"data":[{"src":"1jpg"},{"src":"2jpg"},{"src":"3jpg"},{"src":"7jpg"},{"src":"4jpg"},{"src":"5jpg"},{"src":"6jpg"}]};
for(var i=0;i<dataIntdatalength;i++){
var divB=documentcreateElement("div");
divBclassName="box";
parentappendChild(divB);
var divP=documentcreateElement("div");
divPclassName="pic";
divBappendChild(divP);
myimg=documentcreateElement("img");
myimgsrc="/images/"+dataIntdata[i]src;
divPappendChild(myimg);
}
waterfall();
}
}
}
function waterfall(){
var oParent=documentgetElementById("main");
var boxs=getByClass(oParent,"box");
var boxW=boxs[0]offsetWidth;
var num=Mathfloor(documentdocumentElementclientWidth/boxW);
oParentstylecssText="width:"+boxWnum+"px;margin:0 auto;";
boxHarr=new Array();
for(var i=0;i<boxslength;i++){
if(i<num){
boxHarrpush(boxs[i]offsetHeight);
}else{
var minH=Mathminapply(null,boxHarr);
var minHindex=getminHindex(boxHarr,minH);
boxs[i]styleposition="absolute";
boxs[i]styletop=minH+"px";
boxs[i]styleleft=minHindexboxW+"px";
//boxs[i]styleleft=boxs[minHindex]offsetLeft+"px";
boxHarr[minHindex]=boxHarr[minHindex]+boxs[i]offsetHeight;
}
}
}
function getByClass(parent,clsName){
a=parentgetElementsByTagName('');
var arr=[];
for(var i=0;i<alength;i++){
if(a[i]className==clsName){
arrpush(a[i]);
}
}
return arr;
}
function getminHindex(arr,minH){
for(var i in arr){
if(arr[i]==minH)
return i;
}
}
先设置元素的ref，如 <div style="height: 500px" ref="tablewrap" ></div>，要获取该元素高度，必须先给该元素设置css高度
再用 windowgetComputedStyle(this$refstablewrap)height 获取
注意：用this$refs获取dom元素高度，必须在mounted钩子中，如下：
mounted() {
consolelog(windowgetComputedStyle(this$refstablewrap)height)
}
给element表格设置动态高度，就可以用上述方法
在data中定义变量
最后，在mounted钩子中设置表格的高度
function AdjustColumnsHeight() { var mainCol = windowdocumentgetElementById('MainColumn'); var leftCol = windowdocumentgetElementById('MainLeft'); var rightCol = windowdocumentgetElementById('MainRight'); var hMainCol = mainCol offsetHeight; var hLeftCol = leftColoffsetHeight; var hRightCol = rightColoffsetHeight; var maxHeight = Mathmax( hMainCol , Mathmax(hLeftCol, hRightCol)); mainColstyleheight = maxHeight + 'px'; leftColstyleheight = maxHeight + 'px'; rightColstyleheight = maxHeight + 'px';}
jQuery获取一个div的高度步骤：
第一步, 获取你要得到高度的那个div的jQuery对象, 获得方法有很多很多种, 具体你可以看一下jQuery API文档里的选择器部分, 在这里我只跟你说一个最直接的方法, 通过id获得: $("#div_id")
第二步, 要看你要得到的是什么高度了, jQuery里现有的三个(其实是两个)获得高度的方法是:
1 $("#div_id")height(); // 获得的是该div本身的高度, (不包含padding,margin,border)
2 $("#div_id")outerHeight(); // 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)
3 $("#div_id")outerHeight(true); // 包含该div本身的高度, 以及padding,border,margin上下的总高度。
以上就是关于Vue拖拽插件——Draglua 中文使用教程全部的内容，包括:Vue拖拽插件——Draglua 中文使用教程、饿了么 VUE组件开发2018-09-26、vue里，我用jq去获取元素的offsettop出现问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）