Vue定义与应用
mian.js 中注册自定义指令
Vue.directive('nsresize', {
inserted(el) { let startY = 0; let down = false; let prevEl; let nextEl; $(el).bind("mousedown", event => { startY = event.pageY; down = true; prevEl = event.target.previousElementSibling; nextEl = event.target.nextElementSibling; }); $(document).bind("mouseup", () => { startY = 0; down = false; }); $(document).bind("mousemove", event => { if ( down ) { let y = event.pageY - startY; startY = event.pageY; $(prevEl).height($(prevEl).height() + y); $(nextEl).height($(nextEl).height() - y); } });}});
Vue.directive('ewresize', {
inserted(el) { let startX = 0; let down = false; let prevEl; let nextEl; $(el).bind("mousedown", event => { startX = event.pageX; down = true; prevEl = event.target.previousElementSibling; nextEl = event.target.nextElementSibling; }); $(document).bind("mouseup", () => { startX = 0; down = false; }); $(document).bind("mousemove", event => { if ( down ) { let x = event.pageX - startX; startX = event.pageX; let temp = $(prevEl).width() + x; let px = temp + "px"; $(prevEl).width(temp); $(nextEl).css("left", px); $(nextEl).css("padding-right", px); $(el).css("left", px); } });}});
css定义
.h-split {
margin-bottom: -1px;
cursor: s-resize;
padding-top: 10px;
}
.v-split {
padding-right: 7px;
background-color: transparent;
cursor: ew-resize;
position: absolute;
height: 100%;
left: 500px;
top: 150px;
z-index: 10;
}
组件中应用
<div class="v-split" v-ewresize></div>
<div class="h-split" v-nsresize></div>
angular定义与应用
common.js定义指令
.directive('nsresize', function () {
return { link: function (scope, el, attrs, ngModel) { var startY = 0; var down = false; var prevEl; var nextEl; $(el).bind("mousedown", function (event) { startY = event.pageY ; down = true; prevEl = event.target.previousElementSibling; nextEl = event.target.nextElementSibling; }); $(document).bind("mouseup", function (event) { startY = 0; down = false; }); $(document).bind("mousemove", function (event) { if ( down ) { var y = event.pageY-startY; startY = event.pageY; $(prevEl).height($(prevEl).height() + y); $(nextEl).height($(nextEl).height() - y); } }); } } }) .directive('ewresize', function () { return { restrict: 'EA', scope: { cell: '@' }, link: function (scope, el, attrs, ngModel) { var startX = 0; var down = false; var prevEl; var nextEl; $(el).bind("mousedown", function (event) { startX = event.pageX ; down = true; prevEl = event.target.previousElementSibling; nextEl = event.target.nextElementSibling; }); $(document).bind("mouseup", function (event) { startX = 0; down = false; }); $(document).bind("mousemove", function (event) { if ( down ) { var x = event.pageX - startX; startX = event.pageX; var temp = $(prevEl).width() + x; var px = temp + "px"; $(prevEl).width(temp); $(nextEl).css("left", px); if ( !scope.cell ) { $(nextEl).css("padding-right", px); } $(el).css("left", px); } }); } } })css定义
.h-split {
margin-bottom: -1px;
cursor: s-resize;
padding-top: 10px;
}
.v-split {
padding-right: 7px;
background-color: transparent;
cursor: ew-resize;
position: absolute;
height: 100%;
left: 500px;
top: 150px;
z-index: 10;
}
组件中应用
<div class="v-split" ewresize></div>
<div class="h-split" nsresize></div>