Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
绝世唐门三哥
Vue Manage System
提交
718756b5
Vue Manage System
项目概览
绝世唐门三哥
/
Vue Manage System
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Vue Manage System
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
718756b5
编写于
12月 28, 2018
作者:
林
林鑫
提交者:
GitHub
12月 28, 2018
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #150 from lin-xin/dev
修复使用index作为v-for的key
上级
81f571ec
9b305277
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
150 addition
and
7 deletion
+150
-7
src/components/common/Sidebar.vue
src/components/common/Sidebar.vue
+13
-3
src/components/common/directives.js
src/components/common/directives.js
+80
-0
src/components/page/DragDialog.vue
src/components/page/DragDialog.vue
+36
-0
src/components/page/DragList.vue
src/components/page/DragList.vue
+14
-4
src/main.js
src/main.js
+1
-0
src/router/index.js
src/router/index.js
+6
-0
未找到文件。
src/components/common/Sidebar.vue
浏览文件 @
718756b5
...
...
@@ -94,12 +94,22 @@
},
{
icon
:
'
el-icon-rank
'
,
index
:
'
drag
'
,
title
:
'
拖拽列表
'
index
:
'
6
'
,
title
:
'
拖拽组件
'
,
subs
:
[
{
index
:
'
drag
'
,
title
:
'
拖拽列表
'
,
},
{
index
:
'
dialog
'
,
title
:
'
拖拽弹框
'
,
}
]
},
{
icon
:
'
el-icon-lx-warn
'
,
index
:
'
6
'
,
index
:
'
7
'
,
title
:
'
错误处理
'
,
subs
:
[
{
...
...
src/components/common/directives.js
0 → 100644
浏览文件 @
718756b5
import
Vue
from
'
vue
'
;
// v-dialogDrag: 弹窗拖拽属性
Vue
.
directive
(
'
dialogDrag
'
,
{
bind
(
el
,
binding
,
vnode
,
oldVnode
)
{
const
dialogHeaderEl
=
el
.
querySelector
(
'
.el-dialog__header
'
);
const
dragDom
=
el
.
querySelector
(
'
.el-dialog
'
);
dialogHeaderEl
.
style
.
cssText
+=
'
;cursor:move;
'
dragDom
.
style
.
cssText
+=
'
;top:0px;
'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const
sty
=
(()
=>
{
if
(
window
.
document
.
currentStyle
)
{
return
(
dom
,
attr
)
=>
dom
.
currentStyle
[
attr
];
}
else
{
return
(
dom
,
attr
)
=>
getComputedStyle
(
dom
,
false
)[
attr
];
}
})()
dialogHeaderEl
.
onmousedown
=
(
e
)
=>
{
// 鼠标按下,计算当前元素距离可视区的距离
const
disX
=
e
.
clientX
-
dialogHeaderEl
.
offsetLeft
;
const
disY
=
e
.
clientY
-
dialogHeaderEl
.
offsetTop
;
const
screenWidth
=
document
.
body
.
clientWidth
;
// body当前宽度
const
screenHeight
=
document
.
documentElement
.
clientHeight
;
// 可见区域高度(应为body高度,可某些环境下无法获取)
const
dragDomWidth
=
dragDom
.
offsetWidth
;
// 对话框宽度
const
dragDomheight
=
dragDom
.
offsetHeight
;
// 对话框高度
const
minDragDomLeft
=
dragDom
.
offsetLeft
;
const
maxDragDomLeft
=
screenWidth
-
dragDom
.
offsetLeft
-
dragDomWidth
;
const
minDragDomTop
=
dragDom
.
offsetTop
;
const
maxDragDomTop
=
screenHeight
-
dragDom
.
offsetTop
-
dragDomheight
;
// 获取到的值带px 正则匹配替换
let
styL
=
sty
(
dragDom
,
'
left
'
);
let
styT
=
sty
(
dragDom
,
'
top
'
);
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if
(
styL
.
includes
(
'
%
'
))
{
styL
=
+
document
.
body
.
clientWidth
*
(
+
styL
.
replace
(
/
\%
/g
,
''
)
/
100
);
styT
=
+
document
.
body
.
clientHeight
*
(
+
styT
.
replace
(
/
\%
/g
,
''
)
/
100
);
}
else
{
styL
=
+
styL
.
replace
(
/
\p
x/g
,
''
);
styT
=
+
styT
.
replace
(
/
\p
x/g
,
''
);
};
document
.
onmousemove
=
function
(
e
)
{
// 通过事件委托,计算移动的距离
let
left
=
e
.
clientX
-
disX
;
let
top
=
e
.
clientY
-
disY
;
// 边界处理
if
(
-
(
left
)
>
minDragDomLeft
)
{
left
=
-
(
minDragDomLeft
);
}
else
if
(
left
>
maxDragDomLeft
)
{
left
=
maxDragDomLeft
;
}
if
(
-
(
top
)
>
minDragDomTop
)
{
top
=
-
(
minDragDomTop
);
}
else
if
(
top
>
maxDragDomTop
)
{
top
=
maxDragDomTop
;
}
// 移动当前元素
dragDom
.
style
.
cssText
+=
`;left:
${
left
+
styL
}
px;top:
${
top
+
styT
}
px;`
;
};
document
.
onmouseup
=
function
(
e
)
{
document
.
onmousemove
=
null
;
document
.
onmouseup
=
null
;
};
}
}
})
src/components/page/DragDialog.vue
0 → 100644
浏览文件 @
718756b5
<
template
>
<section
class=
"main"
>
<div
class=
"crumbs"
>
<el-breadcrumb
separator=
"/"
>
<el-breadcrumb-item><i
class=
"el-icon-rank"
></i>
拖拽组件
</el-breadcrumb-item>
<el-breadcrumb-item>
拖拽弹框
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div
class=
"container"
>
<p>
通过指令 v-dialogDrag 使 Dialog 对话框具有可拖拽的功能。
</p>
<br>
<el-button
type=
"primary"
@
click=
"visible = true;"
>
点我弹框
</el-button>
</div>
<el-dialog
v-dialogDrag
title=
"拖拽弹框"
center
:visible.sync=
"visible"
width=
"30%"
>
我是一个可以拖拽的对话框!
<span
slot=
"footer"
class=
"dialog-footer"
>
<el-button
@
click=
"visible = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"visible = false"
>
确 定
</el-button>
</span>
</el-dialog>
</section>
</
template
>
<
script
>
export
default
{
data
(){
return
{
visible
:
false
}
}
}
</
script
>
<
style
>
</
style
>
src/components/page/DragList.vue
浏览文件 @
718756b5
...
...
@@ -2,7 +2,8 @@
<section
class=
"main"
>
<div
class=
"crumbs"
>
<el-breadcrumb
separator=
"/"
>
<el-breadcrumb-item><i
class=
"el-icon-rank"
></i>
拖拽排序
</el-breadcrumb-item>
<el-breadcrumb-item><i
class=
"el-icon-rank"
></i>
拖拽组件
</el-breadcrumb-item>
<el-breadcrumb-item>
拖拽排序
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div
class=
"container"
>
...
...
@@ -15,7 +16,7 @@
<div
class=
"item-title"
>
todo
</div>
<draggable
v-model=
"todo"
@
remove=
"removeHandle"
:options=
"dragOptions"
>
<transition-group
tag=
"div"
id=
"todo"
class=
"item-ul"
>
<div
v-for=
"
(item,index) in todo"
class=
"drag-list"
:key=
"index
"
>
<div
v-for=
"
item in todo"
class=
"drag-list"
:key=
"item.id
"
>
{{
item
.
content
}}
</div>
</transition-group>
...
...
@@ -25,7 +26,7 @@
<div
class=
"item-title"
>
doing
</div>
<draggable
v-model=
"doing"
@
remove=
"removeHandle"
:options=
"dragOptions"
>
<transition-group
tag=
"div"
id=
"doing"
class=
"item-ul"
>
<div
v-for=
"
(item,index) in doing"
class=
"drag-list"
:key=
"index
"
>
<div
v-for=
"
item in doing"
class=
"drag-list"
:key=
"item.id
"
>
{{
item
.
content
}}
</div>
</transition-group>
...
...
@@ -35,7 +36,7 @@
<div
class=
"item-title"
>
done
</div>
<draggable
v-model=
"done"
@
remove=
"removeHandle"
:options=
"dragOptions"
>
<transition-group
tag=
"div"
id=
"done"
class=
"item-ul"
>
<div
v-for=
"
(item,index) in done"
class=
"drag-list"
:key=
"index
"
>
<div
v-for=
"
item in done"
class=
"drag-list"
:key=
"item.id
"
>
{{
item
.
content
}}
</div>
</transition-group>
...
...
@@ -60,34 +61,43 @@
},
todo
:
[
{
id
:
1
,
content
:
'
开发图表组件
'
},
{
id
:
2
,
content
:
'
开发拖拽组件
'
},
{
id
:
3
,
content
:
'
开发权限测试组件
'
}
],
doing
:
[
{
id
:
1
,
content
:
'
开发登录注册页面
'
},
{
id
:
2
,
content
:
'
开发头部组件
'
},
{
id
:
3
,
content
:
'
开发表格相关组件
'
},
{
id
:
4
,
content
:
'
开发表单相关组件
'
}
],
done
:[
{
id
:
1
,
content
:
'
初始化项目,生成工程目录,完成相关配置
'
},
{
id
:
2
,
content
:
'
开发项目整体框架
'
}
]
...
...
src/main.js
浏览文件 @
718756b5
...
...
@@ -6,6 +6,7 @@ import ElementUI from 'element-ui';
import
'
element-ui/lib/theme-chalk/index.css
'
;
// 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题
import
'
../static/css/icon.css
'
;
import
'
./components/common/directives
'
;
import
"
babel-polyfill
"
;
Vue
.
use
(
ElementUI
,
{
size
:
'
small
'
});
...
...
src/router/index.js
浏览文件 @
718756b5
...
...
@@ -69,6 +69,12 @@ export default new Router({
component
:
resolve
=>
require
([
'
../components/page/DragList.vue
'
],
resolve
),
meta
:
{
title
:
'
拖拽列表
'
}
},
{
// 拖拽Dialog组件
path
:
'
/dialog
'
,
component
:
resolve
=>
require
([
'
../components/page/DragDialog.vue
'
],
resolve
),
meta
:
{
title
:
'
拖拽弹框
'
}
},
{
// 权限页面
path
:
'
/permission
'
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录