Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
圆滚滚核心
vue-element-admin
提交
14fee27a
V
vue-element-admin
项目概览
圆滚滚核心
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
14fee27a
编写于
4月 13, 2018
作者:
花
花裤衩
提交者:
GitHub
4月 13, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feature: add drag dialog (#477)
上级
7003a79e
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
106 addition
and
1 deletion
+106
-1
src/directive/el-dragDialog/drag.js
src/directive/el-dragDialog/drag.js
+46
-0
src/directive/el-dragDialog/index.js
src/directive/el-dragDialog/index.js
+13
-0
src/lang/en.js
src/lang/en.js
+1
-0
src/lang/zh.js
src/lang/zh.js
+1
-0
src/router/index.js
src/router/index.js
+2
-1
src/views/components-demo/dragDialog.vue
src/views/components-demo/dragDialog.vue
+43
-0
未找到文件。
src/directive/el-dragDialog/drag.js
0 → 100644
浏览文件 @
14fee27a
export
default
{
bind
(
el
,
binding
)
{
const
dialogHeaderEl
=
el
.
querySelector
(
'
.el-dialog__header
'
)
const
dragDom
=
el
.
querySelector
(
'
.el-dialog
'
)
dialogHeaderEl
.
style
=
'
cursor:move;
'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const
sty
=
dragDom
.
currentStyle
||
window
.
getComputedStyle
(
dragDom
,
null
)
dialogHeaderEl
.
onmousedown
=
(
e
)
=>
{
// 鼠标按下,计算当前元素距离可视区的距离
const
disX
=
e
.
clientX
-
dialogHeaderEl
.
offsetLeft
const
disY
=
e
.
clientY
-
dialogHeaderEl
.
offsetTop
// 获取到的值带px 正则匹配替换
let
styL
,
styT
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if
(
sty
.
left
.
includes
(
'
%
'
))
{
styL
=
+
document
.
body
.
clientWidth
*
(
+
sty
.
left
.
replace
(
/
\%
/g
,
''
)
/
100
)
styT
=
+
document
.
body
.
clientHeight
*
(
+
sty
.
top
.
replace
(
/
\%
/g
,
''
)
/
100
)
}
else
{
styL
=
+
sty
.
left
.
replace
(
/
\p
x/g
,
''
)
styT
=
+
sty
.
top
.
replace
(
/
\p
x/g
,
''
)
}
document
.
onmousemove
=
function
(
e
)
{
// 通过事件委托,计算移动的距离
const
l
=
e
.
clientX
-
disX
const
t
=
e
.
clientY
-
disY
// 移动当前元素
dragDom
.
style
.
left
=
`
${
l
+
styL
}
px`
dragDom
.
style
.
top
=
`
${
t
+
styT
}
px`
// 将此时的位置传出去
// binding.value({x:e.pageX,y:e.pageY})
}
document
.
onmouseup
=
function
(
e
)
{
document
.
onmousemove
=
null
document
.
onmouseup
=
null
}
}
}
}
src/directive/el-dragDialog/index.js
0 → 100644
浏览文件 @
14fee27a
import
drag
from
'
./drag
'
const
install
=
function
(
Vue
)
{
Vue
.
directive
(
'
el-drag-dialog
'
,
drag
)
}
if
(
window
.
Vue
)
{
window
[
'
el-drag-dialog
'
]
=
drag
Vue
.
use
(
install
);
// eslint-disable-line
}
drag
.
install
=
install
export
default
drag
src/lang/en.js
浏览文件 @
14fee27a
...
...
@@ -18,6 +18,7 @@ export default {
countTo
:
'
CountTo
'
,
componentMixin
:
'
Mixin
'
,
backToTop
:
'
BackToTop
'
,
dragDialog
:
'
Drag Dialog
'
,
charts
:
'
Charts
'
,
keyboardChart
:
'
Keyboard Chart
'
,
lineChart
:
'
Line Chart
'
,
...
...
src/lang/zh.js
浏览文件 @
14fee27a
...
...
@@ -18,6 +18,7 @@ export default {
countTo
:
'
CountTo
'
,
componentMixin
:
'
小组件
'
,
backToTop
:
'
返回顶部
'
,
dragDialog
:
'
拖拽 Dialog
'
,
charts
:
'
图表
'
,
keyboardChart
:
'
键盘图表
'
,
lineChart
:
'
折线图
'
,
...
...
src/router/index.js
浏览文件 @
14fee27a
...
...
@@ -111,7 +111,8 @@ export const asyncRouterMap = [
{
path
:
'
sticky
'
,
component
:
_import
(
'
components-demo/sticky
'
),
name
:
'
sticky-demo
'
,
meta
:
{
title
:
'
sticky
'
}},
{
path
:
'
count-to
'
,
component
:
_import
(
'
components-demo/countTo
'
),
name
:
'
countTo-demo
'
,
meta
:
{
title
:
'
countTo
'
}},
{
path
:
'
mixin
'
,
component
:
_import
(
'
components-demo/mixin
'
),
name
:
'
componentMixin-demo
'
,
meta
:
{
title
:
'
componentMixin
'
}},
{
path
:
'
back-to-top
'
,
component
:
_import
(
'
components-demo/backToTop
'
),
name
:
'
backToTop-demo
'
,
meta
:
{
title
:
'
backToTop
'
}}
{
path
:
'
back-to-top
'
,
component
:
_import
(
'
components-demo/backToTop
'
),
name
:
'
backToTop-demo
'
,
meta
:
{
title
:
'
backToTop
'
}},
{
path
:
'
drag-dialog
'
,
component
:
_import
(
'
components-demo/dragDialog
'
),
name
:
'
dragDialog-demo
'
,
meta
:
{
title
:
'
dragDialog
'
}}
]
},
...
...
src/views/components-demo/dragDialog.vue
0 → 100644
浏览文件 @
14fee27a
<
template
>
<div
class=
"components-container"
>
<el-button
type=
"primary"
@
click=
"dialogTableVisible = true"
>
open a Drag Dialog
</el-button>
<el-dialog
v-el-drag-dialog
title=
"Shipping address"
:visible.sync=
"dialogTableVisible"
>
<el-table
:data=
"gridData"
>
<el-table-column
property=
"date"
label=
"Date"
width=
"150"
></el-table-column>
<el-table-column
property=
"name"
label=
"Name"
width=
"200"
></el-table-column>
<el-table-column
property=
"address"
label=
"Address"
></el-table-column>
</el-table>
</el-dialog>
</div>
</
template
>
<
script
>
import
elDragDialog
from
'
@/directive/el-dragDialog
'
// base on element-ui
export
default
{
name
:
'
dragDialog-demo
'
,
directives
:
{
elDragDialog
},
data
()
{
return
{
dialogTableVisible
:
false
,
gridData
:
[{
date
:
'
2016-05-02
'
,
name
:
'
John Smith
'
,
address
:
'
No.1518, Jinshajiang Road, Putuo District
'
},
{
date
:
'
2016-05-04
'
,
name
:
'
John Smith
'
,
address
:
'
No.1518, Jinshajiang Road, Putuo District
'
},
{
date
:
'
2016-05-01
'
,
name
:
'
John Smith
'
,
address
:
'
No.1518, Jinshajiang Road, Putuo District
'
},
{
date
:
'
2016-05-03
'
,
name
:
'
John Smith
'
,
address
:
'
No.1518, Jinshajiang Road, Putuo District
'
}]
}
}
}
</
script
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录