Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
DoraemonKit
提交
468eedb4
D
DoraemonKit
项目概览
DiDi
/
DoraemonKit
12 个月 前同步成功
通知
166
Star
19623
Fork
3062
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
DoraemonKit
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
468eedb4
编写于
5月 25, 2021
作者:
C
caoenze
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 完善v-dragable指令
上级
a77e5ddb
变更
13
展开全部
显示空白变更内容
内联
并排
Showing
13 changed file
with
774 addition
and
445 deletion
+774
-445
Web/packages/core/dist/index.js
Web/packages/core/dist/index.js
+128
-65
Web/packages/core/package.json
Web/packages/core/package.json
+3
-1
Web/packages/core/src/common/directives/dragable.js
Web/packages/core/src/common/directives/dragable.js
+0
-98
Web/packages/core/src/components/app.vue
Web/packages/core/src/components/app.vue
+12
-4
Web/packages/utils/dist/index.js
Web/packages/utils/dist/index.js
+166
-5
Web/packages/utils/package.json
Web/packages/utils/package.json
+1
-1
Web/packages/utils/src/dragable.js
Web/packages/utils/src/dragable.js
+153
-0
Web/packages/utils/src/index.js
Web/packages/utils/src/index.js
+2
-1
Web/packages/utils/src/utils.js
Web/packages/utils/src/utils.js
+11
-4
Web/packages/web/dist/dokit.js
Web/packages/web/dist/dokit.js
+277
-154
Web/packages/web/package.json
Web/packages/web/package.json
+2
-1
Web/packages/web/src/common/directives/dragable.js
Web/packages/web/src/common/directives/dragable.js
+0
-98
Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
...web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
+19
-13
未找到文件。
Web/packages/core/dist/index.js
浏览文件 @
468eedb4
...
...
@@ -3,100 +3,155 @@ import { pushScopeId, popScopeId, openBlock, createBlock, withDirectives, create
/**
* 拖拽指令 v-dragable
* 减少外部依赖
* 默认使用v-dragable
* 也接受传入一个config对象 v-dragable="config"
* config支持 name opacity left top safeBottom 等属性
*/
const
INIT_VALUE
=
9999
;
const
DEFAULT_OPACITY
=
0.5
;
const
SAFE_BOTTOM
=
50
;
// 底部防误触
// const SAFE_BOTTOM = 50 // 底部防误触
let
MOUSE_DOWN_FLAG
=
false
;
const
DEFAULT_EL_CONF
=
{
name
:
''
,
// 名称 用于存储位置storage的标识,没有则不存储
opacity
:
1
,
// 默认透明度
left
:
''
,
// 初始位置, 没有则居中
top
:
''
,
// 初始位置, 没有则居中
safeBottom
:
0
};
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
var
dragable
=
{
mounted
(
el
)
{
const
dragable
=
{
mounted
(
el
,
binding
)
{
el
.
config
=
{
...
DEFAULT_EL_CONF
,
...
binding
.
value
};
// 初始化变量
el
.
dokitEntryLastX
=
INIT_VALUE
;
el
.
dokitEntryLastY
=
INIT_VALUE
;
// 初始化样式
el
.
style
.
position
=
'
fixed
'
;
el
.
style
.
opacity
=
DEFAULT_OPACITY
;
el
.
dokitPositionLeft
=
getDefaultX
();
el
.
dokitPositionTop
=
getDefaultY
();
el
.
style
.
opacity
=
el
.
config
.
opacity
;
el
.
dokitPositionLeft
=
getDefaultX
(
el
);
el
.
dokitPositionTop
=
getDefaultY
(
el
);
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
adjustPosition
(
el
);
// 触摸事件监听
el
.
ontouchstart
=
()
=>
{
el
.
style
.
opacity
=
1
;
moveStart
(
el
)
;
};
el
.
ontouchmove
=
(
e
)
=>
{
e
.
preventDefault
();
moving
(
el
,
e
);
};
el
.
ontouchend
=
(
e
)
=>
{
moveEnd
(
el
);
};
// PC鼠标事件
el
.
onmousedown
=
(
e
)
=>
{
e
.
preventDefault
();
moveStart
(
el
);
MOUSE_DOWN_FLAG
=
true
;
};
if
(
el
.
dokitEntryLastX
===
INIT_VALUE
)
{
el
.
dokitEntryLastX
=
e
.
touches
[
0
].
clientX
;
el
.
dokitEntryLastY
=
e
.
touches
[
0
].
clientY
;
return
}
window
.
addEventListener
(
'
mousemove
'
,
(
e
)
=>
{
if
(
MOUSE_DOWN_FLAG
)
moving
(
el
,
e
);
});
el
.
dokitPositionTop
+=
(
e
.
touches
[
0
].
clientY
-
el
.
dokitEntryLastY
);
el
.
dokitPositionLeft
+=
(
e
.
touches
[
0
].
clientX
-
el
.
dokitEntryLastX
);
el
.
dokitEntryLastX
=
e
.
touches
[
0
].
clientX
;
el
.
dokitEntryLastY
=
e
.
touches
[
0
].
clientY
;
window
.
addEventListener
(
'
mouseup
'
,
(
e
)
=>
{
if
(
MOUSE_DOWN_FLAG
)
{
moveEnd
(
el
);
MOUSE_DOWN_FLAG
=
false
;
}
});
el
.
style
.
top
=
`
${
getAvailableTop
(
el
)}
px`
;
el
.
style
.
left
=
`
${
getAvailableLeft
(
el
)}
px`
;
};
window
.
addEventListener
(
'
resize
'
,
()
=>
{
adjustPosition
(
el
);
});
}
};
el
.
ontouchend
=
(
e
)
=>
{
setTimeout
(()
=>
{
if
(
el
.
dokitPositionLeft
<
0
)
{
el
.
dokitPositionLeft
=
0
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
else
if
(
el
.
dokitPositionLeft
+
e
.
target
.
clientWidth
>
window
.
screen
.
availWidth
)
{
el
.
dokitPositionLeft
=
window
.
screen
.
availWidth
-
e
.
target
.
clientWidth
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
function
moveStart
(
el
)
{
el
.
style
.
opacity
=
1
;
}
function
moving
(
el
,
e
)
{
let
target
=
e
.
touches
?
e
.
touches
[
0
]
:
e
;
if
(
el
.
dokitEntryLastX
===
INIT_VALUE
)
{
el
.
dokitEntryLastX
=
target
.
clientX
;
el
.
dokitEntryLastY
=
target
.
clientY
;
return
}
if
(
el
.
dokitPositionTop
<
0
)
{
el
.
dokitPositionTop
=
0
;
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
el
.
dokitPositionTop
+=
(
target
.
clientY
-
el
.
dokitEntryLastY
);
el
.
dokitPositionLeft
+=
(
target
.
clientX
-
el
.
dokitEntryLastX
);
el
.
dokitEntryLastX
=
target
.
clientX
;
el
.
dokitEntryLastY
=
target
.
clientY
;
}
else
if
(
el
.
dokitPositionTop
+
e
.
target
.
clientHeight
+
SAFE_BOTTOM
>
window
.
screen
.
availHeight
)
{
el
.
dokitPositionTop
=
window
.
screen
.
availHeight
-
e
.
target
.
clientHeight
-
SAFE_BOTTOM
;
// el.style.top = `${getAvailableTop(el)}px`
// el.style.left = `${getAvailableLeft(el)}px`
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
}
localStorage
.
setItem
(
'
dokitPositionTop
'
,
el
.
dokitPositionTop
);
localStorage
.
setItem
(
'
dokitPositionLeft
'
,
el
.
dokitPositionLeft
);
function
moveEnd
(
el
,
e
)
{
setTimeout
(()
=>
{
adjustPosition
(
el
);
el
.
config
.
name
&&
localStorage
.
setItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
,
el
.
dokitPositionTop
);
el
.
config
.
name
&&
localStorage
.
setItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
,
el
.
dokitPositionLeft
);
},
100
);
el
.
dokitEntryLastX
=
INIT_VALUE
;
el
.
dokitEntryLastY
=
INIT_VALUE
;
el
.
style
.
opacity
=
0.5
;
};
}
};
el
.
style
.
opacity
=
el
.
config
.
opacity
;
}
function
getDefaultX
(
el
){
let
defaultX
=
Math
.
round
(
window
.
out
erWidth
/
2
);
return
localStorage
.
getItem
(
'
dokitPositionLeft
'
)
?
parseInt
(
localStorage
.
getItem
(
'
dokitPositionLeft
'
))
:
defaultX
let
defaultX
=
el
.
config
.
left
||
Math
.
round
(
window
.
inn
erWidth
/
2
);
return
localStorage
.
getItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
)
?
parseInt
(
localStorage
.
getItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
))
:
defaultX
}
function
getDefaultY
(
el
){
let
defaultY
=
Math
.
round
(
window
.
outerHeight
/
2
);
return
localStorage
.
getItem
(
'
dokitPositionTop
'
)
?
parseInt
(
localStorage
.
getItem
(
'
dokitPositionTop
'
))
:
defaultY
}
function
getAvailableLeft
(
el
){
return
standardNumber
(
el
.
dokitPositionLeft
,
window
.
outerWidth
-
el
.
clientWidth
)
let
defaultY
=
el
.
config
.
top
||
Math
.
round
(
window
.
innerHeight
/
2
);
return
localStorage
.
getItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
)
?
parseInt
(
localStorage
.
getItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
))
:
defaultY
}
function
getAvailableTop
(
el
){
return
standardNumber
(
el
.
dokitPositionTop
,
window
.
outerHeight
-
el
.
clientHeight
)
}
function
standardNumber
(
number
,
max
){
if
(
number
<
0
){
return
0
// function getAvailableLeft(el){
// return standardNumber(el.dokitPositionLeft, window.innerWidth - el.clientWidth)
// }
// function getAvailableTop(el){
// return standardNumber(el.dokitPositionTop, window.innerHeight - el.clientHeight)
// }
// function standardNumber(number, max){
// if(number < 0){
// return 0
// }
// if(number >= max){
// return max
// }
// return number
// }
function
adjustPosition
(
el
)
{
if
(
el
.
dokitPositionLeft
<
0
)
{
el
.
dokitPositionLeft
=
0
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
else
if
(
el
.
dokitPositionLeft
+
el
.
getBoundingClientRect
().
width
>
window
.
innerWidth
)
{
el
.
dokitPositionLeft
=
window
.
innerWidth
-
el
.
getBoundingClientRect
().
width
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
if
(
number
>=
max
){
return
max
if
(
el
.
dokitPositionTop
<
0
)
{
el
.
dokitPositionTop
=
0
;
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
}
else
if
(
el
.
dokitPositionTop
+
el
.
getBoundingClientRect
().
height
+
el
.
config
.
safeBottom
>
window
.
innerHeight
)
{
el
.
dokitPositionTop
=
window
.
innerHeight
-
el
.
getBoundingClientRect
().
height
-
el
.
config
.
safeBottom
;
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
}
return
number
}
const
IconBack
=
'
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAzCAMAAADIDVqJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAXFQTFRFAAAANX7GNHzFM3zFM3zFNn3ENYDHNHzFM3zENIDHNH7INH3ENX3GNn7GM33ENYDFNYDGM4DINH7HM3zENH3HNHzENYDGM37FM33FNH3FNn3FNX7HN4DINHzEM33HNH7FNIDGNn7GM33ENX3FNXzHNoDENH7FNH3EM3zEN33INHzFNH3FM4DHNX3HNH3GNX7ENHzENHzFNYDFNH3FM33ENn3JM33GN4DINX7EM3zEM33GNH7FM33FM33FNIDFNH3GNX3KM37HNHzFN4DINX7FNH3EOHzHNH3GM3zFM4DGM33EM3zENHzENH3EM33FOoTFgID/NHzFOIDHM3zEM3zFNoPJM33FM33ENH3FNHzENYDL////NHzENH3FM4PFM3zFOYDGNH3FM3zFN3zINHzEM33FNoDJM3zFM33FNH3ENHzFM37FNH3ENH3FM33ENH7GNX7FM33ENH3FNH7FM37ENH7FM3zFNH3EM4jMM3zE////TdHL6gAAAHl0Uk5TAEPy+vA9RPb0QEX3P0fzPkg8Sfg7SjpL+fE5TThON082Ue81UjRT++4zVO0yVjFX/OwwWOsvWi5b6i1d/eksXitf6Cph5yli/ihk5ieh3x8CoiCg4CGf4Z3iIgGc4yOaJJnkJZjlJpaVk5KQj42LioiHhYSCgHOyD3AmCqsAAAABYktHRFt0vJU0AAAACXBIWXMAAABIAAAASABGyWs+AAABPUlEQVQ4y43UxVoCUBQE4Ctgd3cXKAYoKqioINiBrdjdXby9C+6c3ZzPWf+rE2MMS4bDmY4rk5qs7FQ6ObnU5OXDFFBTCFNUTE2JmFJqysqtcVRQUymmiprqGmtq66ipF9NATSOMq4maZidMCzWtMG3t1HSI6aSmq9sat4eaHpheLzV9YvqpGRi0xuenZghmOEDNiJhRasZggiFqxiesmQxTMyVmmpoZmEiUmlmYWJyauXmYBWoWYZaWqTEr1qRW1zhaT4jaUNQm1Na2onagdjW1B7V/wFXyEOroWFEnok4VdQZ1fqGoS6ira0XdpP4x+uStKL5EY+6gYpq6h4rEFfUgKqqoRyjlkI15ggqGFfUsKqSoFyjlTY15hfIFFPUmyq+odyilhIz5gHJ7FfUpyqOoLyilYo35/rFJ/Jo/DZ3bT7fEcIgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDQtMjFUMTc6MzI6MjgrMDg6MDBBnT5hAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTA0LTIxVDE3OjMyOjI4KzA4OjAwMMCG3QAAAABJRU5ErkJggg==
'
;
...
...
@@ -370,7 +425,15 @@ var script$3 = {
dragable
,
},
data
()
{
return
{};
return
{
btnConfig
:
{
name
:
'
dokit_entry
'
,
opacity
:
0.5
,
left
:
window
.
innerWidth
-
50
,
top
:
window
.
innerHeight
-
100
,
safeBottom
:
50
}
};
},
computed
:
{
state
(){
...
...
@@ -410,7 +473,7 @@ const render$3 = /*#__PURE__*/_withId$3((_ctx, _cache, $props, $setup, $data, $o
style
:
{
"
z-index
"
:
"
10000
"
},
onClick
:
_cache
[
1
]
||
(
_cache
[
1
]
=
(...
args
)
=>
(
$options
.
toggleShowContainer
&&
$options
.
toggleShowContainer
(...
args
)))
},
null
,
512
/* NEED_PATCH */
),
[
[
_directive_dragable
]
[
_directive_dragable
,
$data
.
btnConfig
]
]),
withDirectives
(
createVNode
(
"
div
"
,
{
class
:
"
mask
"
,
...
...
Web/packages/core/package.json
浏览文件 @
468eedb4
...
...
@@ -28,6 +28,8 @@
"bugs"
:
{
"url"
:
"https://github.com/didi/DoraemonKit/issues"
},
"dependencies"
:
{},
"dependencies"
:
{
"@dokit/web-utils"
:
"^0.0.1-alpha.0"
},
"gitHead"
:
"886ea7c19806526668e5da0179da335e7df9d012"
}
Web/packages/core/src/common/directives/dragable.js
已删除
100644 → 0
浏览文件 @
a77e5ddb
/**
* 拖拽指令 v-dragable
* 减少外部依赖
*/
const
INIT_VALUE
=
9999
const
DEFAULT_OPACITY
=
0.5
const
SAFE_BOTTOM
=
50
// 底部防误触
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
export
default
{
mounted
(
el
)
{
// 初始化变量
el
.
dokitEntryLastX
=
INIT_VALUE
el
.
dokitEntryLastY
=
INIT_VALUE
// 初始化样式
el
.
style
.
position
=
'
fixed
'
el
.
style
.
opacity
=
DEFAULT_OPACITY
el
.
dokitPositionLeft
=
getDefaultX
(
el
)
el
.
dokitPositionTop
=
getDefaultY
(
el
)
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
// 触摸事件监听
el
.
ontouchstart
=
()
=>
{
el
.
style
.
opacity
=
1
}
el
.
ontouchmove
=
(
e
)
=>
{
e
.
preventDefault
()
if
(
el
.
dokitEntryLastX
===
INIT_VALUE
)
{
el
.
dokitEntryLastX
=
e
.
touches
[
0
].
clientX
el
.
dokitEntryLastY
=
e
.
touches
[
0
].
clientY
return
}
el
.
dokitPositionTop
+=
(
e
.
touches
[
0
].
clientY
-
el
.
dokitEntryLastY
)
el
.
dokitPositionLeft
+=
(
e
.
touches
[
0
].
clientX
-
el
.
dokitEntryLastX
)
el
.
dokitEntryLastX
=
e
.
touches
[
0
].
clientX
el
.
dokitEntryLastY
=
e
.
touches
[
0
].
clientY
el
.
style
.
top
=
`
${
getAvailableTop
(
el
)}
px`
el
.
style
.
left
=
`
${
getAvailableLeft
(
el
)}
px`
}
el
.
ontouchend
=
(
e
)
=>
{
setTimeout
(()
=>
{
if
(
el
.
dokitPositionLeft
<
0
)
{
el
.
dokitPositionLeft
=
0
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
else
if
(
el
.
dokitPositionLeft
+
e
.
target
.
clientWidth
>
window
.
screen
.
availWidth
)
{
el
.
dokitPositionLeft
=
window
.
screen
.
availWidth
-
e
.
target
.
clientWidth
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
if
(
el
.
dokitPositionTop
<
0
)
{
el
.
dokitPositionTop
=
0
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
}
else
if
(
el
.
dokitPositionTop
+
e
.
target
.
clientHeight
+
SAFE_BOTTOM
>
window
.
screen
.
availHeight
)
{
el
.
dokitPositionTop
=
window
.
screen
.
availHeight
-
e
.
target
.
clientHeight
-
SAFE_BOTTOM
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
}
localStorage
.
setItem
(
'
dokitPositionTop
'
,
el
.
dokitPositionTop
);
localStorage
.
setItem
(
'
dokitPositionLeft
'
,
el
.
dokitPositionLeft
);
},
100
)
el
.
dokitEntryLastX
=
INIT_VALUE
el
.
dokitEntryLastY
=
INIT_VALUE
el
.
style
.
opacity
=
0.5
}
}
}
function
getDefaultX
(
el
){
let
defaultX
=
Math
.
round
(
window
.
outerWidth
/
2
)
return
localStorage
.
getItem
(
'
dokitPositionLeft
'
)
?
parseInt
(
localStorage
.
getItem
(
'
dokitPositionLeft
'
))
:
defaultX
}
function
getDefaultY
(
el
){
let
defaultY
=
Math
.
round
(
window
.
outerHeight
/
2
)
return
localStorage
.
getItem
(
'
dokitPositionTop
'
)
?
parseInt
(
localStorage
.
getItem
(
'
dokitPositionTop
'
))
:
defaultY
}
function
getAvailableLeft
(
el
){
return
standardNumber
(
el
.
dokitPositionLeft
,
window
.
outerWidth
-
el
.
clientWidth
)
}
function
getAvailableTop
(
el
){
return
standardNumber
(
el
.
dokitPositionTop
,
window
.
outerHeight
-
el
.
clientHeight
)
}
function
standardNumber
(
number
,
max
){
if
(
number
<
0
){
return
0
}
if
(
number
>=
max
){
return
max
}
return
number
}
\ No newline at end of file
Web/packages/core/src/components/app.vue
浏览文件 @
468eedb4
<
template
>
<div
class=
"dokit-app"
>
<div
class=
"dokit-entry-btn"
style=
"z-index: 10000;"
v-dragable
@
click=
"toggleShowContainer"
></div>
<div
class=
"dokit-entry-btn"
style=
"z-index: 10000;"
v-dragable
=
"btnConfig"
@
click=
"toggleShowContainer"
></div>
<div
class=
"mask"
v-show=
"showContainer"
@
click=
"toggleContainer"
></div>
<router-container
v-show=
"showContainer"
></router-container>
<independ-container
v-show=
"independPlugins.length"
></independ-container>
...
...
@@ -8,10 +8,10 @@
</
template
>
<
script
>
import
dragable
from
"
@common/directives/dragable
"
;
import
{
dragable
}
from
'
@dokit/web-utils
'
;
import
RouterContainer
from
'
./router-container
'
;
import
IndependContainer
from
'
./independ-container
'
;
import
{
toggleContainer
}
from
'
@store/index
'
;
import
{
toggleContainer
}
from
'
@store/index
'
;
export
default
{
components
:
{
...
...
@@ -22,7 +22,15 @@ export default {
dragable
,
},
data
()
{
return
{};
return
{
btnConfig
:
{
name
:
'
dokit_entry
'
,
opacity
:
0.5
,
left
:
window
.
innerWidth
-
50
,
top
:
window
.
innerHeight
-
100
,
safeBottom
:
50
}
};
},
computed
:
{
state
(){
...
...
Web/packages/utils/dist/index.js
浏览文件 @
468eedb4
const
isObject
=
function
(
obj
)
{
const
isObject
=
function
(
obj
)
{
return
Object
.
prototype
.
toString
.
call
(
obj
)
===
'
[object Object]
'
};
const
isFunction
=
function
(
obj
)
{
const
isFunction
=
function
(
obj
)
{
return
typeof
obj
===
'
function
'
};
const
isMobile
=
function
()
{
if
(
window
.
navigator
.
userAgent
.
match
(
/
(
phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone
)
/i
))
{
return
true
}
return
false
};
const
inBrowser
=
typeof
window
!==
'
undefined
'
;
export
{
inBrowser
,
isFunction
,
isObject
};
/**
* 拖拽指令 v-dragable
* 减少外部依赖
* 默认使用v-dragable
* 也接受传入一个config对象 v-dragable="config"
* config支持 name opacity left top safeBottom 等属性
*/
const
INIT_VALUE
=
9999
;
// const SAFE_BOTTOM = 50 // 底部防误触
let
MOUSE_DOWN_FLAG
=
false
;
const
DEFAULT_EL_CONF
=
{
name
:
''
,
// 名称 用于存储位置storage的标识,没有则不存储
opacity
:
1
,
// 默认透明度
left
:
''
,
// 初始位置, 没有则居中
top
:
''
,
// 初始位置, 没有则居中
safeBottom
:
0
};
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
const
dragable
=
{
mounted
(
el
,
binding
)
{
el
.
config
=
{
...
DEFAULT_EL_CONF
,
...
binding
.
value
};
// 初始化变量
el
.
dokitEntryLastX
=
INIT_VALUE
;
el
.
dokitEntryLastY
=
INIT_VALUE
;
// 初始化样式
el
.
style
.
position
=
'
fixed
'
;
el
.
style
.
opacity
=
el
.
config
.
opacity
;
el
.
dokitPositionLeft
=
getDefaultX
(
el
);
el
.
dokitPositionTop
=
getDefaultY
(
el
);
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
adjustPosition
(
el
);
// 触摸事件监听
el
.
ontouchstart
=
()
=>
{
moveStart
(
el
);
};
el
.
ontouchmove
=
(
e
)
=>
{
e
.
preventDefault
();
moving
(
el
,
e
);
};
el
.
ontouchend
=
(
e
)
=>
{
moveEnd
(
el
);
};
// PC鼠标事件
el
.
onmousedown
=
(
e
)
=>
{
e
.
preventDefault
();
moveStart
(
el
);
MOUSE_DOWN_FLAG
=
true
;
};
window
.
addEventListener
(
'
mousemove
'
,
(
e
)
=>
{
if
(
MOUSE_DOWN_FLAG
)
moving
(
el
,
e
);
});
window
.
addEventListener
(
'
mouseup
'
,
(
e
)
=>
{
if
(
MOUSE_DOWN_FLAG
)
{
moveEnd
(
el
);
MOUSE_DOWN_FLAG
=
false
;
}
});
window
.
addEventListener
(
'
resize
'
,
()
=>
{
adjustPosition
(
el
);
});
}
};
function
moveStart
(
el
)
{
el
.
style
.
opacity
=
1
;
}
function
moving
(
el
,
e
)
{
let
target
=
e
.
touches
?
e
.
touches
[
0
]
:
e
;
if
(
el
.
dokitEntryLastX
===
INIT_VALUE
)
{
el
.
dokitEntryLastX
=
target
.
clientX
;
el
.
dokitEntryLastY
=
target
.
clientY
;
return
}
el
.
dokitPositionTop
+=
(
target
.
clientY
-
el
.
dokitEntryLastY
);
el
.
dokitPositionLeft
+=
(
target
.
clientX
-
el
.
dokitEntryLastX
);
el
.
dokitEntryLastX
=
target
.
clientX
;
el
.
dokitEntryLastY
=
target
.
clientY
;
// el.style.top = `${getAvailableTop(el)}px`
// el.style.left = `${getAvailableLeft(el)}px`
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
function
moveEnd
(
el
,
e
)
{
setTimeout
(()
=>
{
adjustPosition
(
el
);
el
.
config
.
name
&&
localStorage
.
setItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
,
el
.
dokitPositionTop
);
el
.
config
.
name
&&
localStorage
.
setItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
,
el
.
dokitPositionLeft
);
},
100
);
el
.
dokitEntryLastX
=
INIT_VALUE
;
el
.
dokitEntryLastY
=
INIT_VALUE
;
el
.
style
.
opacity
=
el
.
config
.
opacity
;
}
function
getDefaultX
(
el
){
let
defaultX
=
el
.
config
.
left
||
Math
.
round
(
window
.
innerWidth
/
2
);
return
localStorage
.
getItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
)
?
parseInt
(
localStorage
.
getItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
))
:
defaultX
}
function
getDefaultY
(
el
){
let
defaultY
=
el
.
config
.
top
||
Math
.
round
(
window
.
innerHeight
/
2
);
return
localStorage
.
getItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
)
?
parseInt
(
localStorage
.
getItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
))
:
defaultY
}
// function getAvailableLeft(el){
// return standardNumber(el.dokitPositionLeft, window.innerWidth - el.clientWidth)
// }
// function getAvailableTop(el){
// return standardNumber(el.dokitPositionTop, window.innerHeight - el.clientHeight)
// }
// function standardNumber(number, max){
// if(number < 0){
// return 0
// }
// if(number >= max){
// return max
// }
// return number
// }
function
adjustPosition
(
el
)
{
if
(
el
.
dokitPositionLeft
<
0
)
{
el
.
dokitPositionLeft
=
0
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
else
if
(
el
.
dokitPositionLeft
+
el
.
getBoundingClientRect
().
width
>
window
.
innerWidth
)
{
el
.
dokitPositionLeft
=
window
.
innerWidth
-
el
.
getBoundingClientRect
().
width
;
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
;
}
if
(
el
.
dokitPositionTop
<
0
)
{
el
.
dokitPositionTop
=
0
;
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
}
else
if
(
el
.
dokitPositionTop
+
el
.
getBoundingClientRect
().
height
+
el
.
config
.
safeBottom
>
window
.
innerHeight
)
{
el
.
dokitPositionTop
=
window
.
innerHeight
-
el
.
getBoundingClientRect
().
height
-
el
.
config
.
safeBottom
;
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
;
}
}
export
{
dragable
,
inBrowser
,
isFunction
,
isMobile
,
isObject
};
Web/packages/utils/package.json
浏览文件 @
468eedb4
...
...
@@ -8,7 +8,7 @@
"author"
:
"duanlikang <duanlikang@didichuxing.com>"
,
"homepage"
:
"https://github.com/didi/DoraemonKit#readme"
,
"license"
:
"ISC"
,
"main"
:
"dist/
main
.js"
,
"main"
:
"dist/
index
.js"
,
"directories"
:
{
"lib"
:
"lib"
,
"test"
:
"__tests__"
...
...
Web/packages/utils/src/dragable.js
0 → 100644
浏览文件 @
468eedb4
/**
* 拖拽指令 v-dragable
* 减少外部依赖
* 默认使用v-dragable
* 也接受传入一个config对象 v-dragable="config"
* config支持 name opacity left top safeBottom 等属性
*/
const
INIT_VALUE
=
9999
// const SAFE_BOTTOM = 50 // 底部防误触
let
MOUSE_DOWN_FLAG
=
false
const
DEFAULT_EL_CONF
=
{
name
:
''
,
// 名称 用于存储位置storage的标识,没有则不存储
opacity
:
1
,
// 默认透明度
left
:
''
,
// 初始位置, 没有则居中
top
:
''
,
// 初始位置, 没有则居中
safeBottom
:
0
}
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
export
const
dragable
=
{
mounted
(
el
,
binding
)
{
el
.
config
=
{
...
DEFAULT_EL_CONF
,
...
binding
.
value
}
// 初始化变量
el
.
dokitEntryLastX
=
INIT_VALUE
el
.
dokitEntryLastY
=
INIT_VALUE
// 初始化样式
el
.
style
.
position
=
'
fixed
'
el
.
style
.
opacity
=
el
.
config
.
opacity
el
.
dokitPositionLeft
=
getDefaultX
(
el
)
el
.
dokitPositionTop
=
getDefaultY
(
el
)
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
adjustPosition
(
el
);
// 触摸事件监听
el
.
ontouchstart
=
()
=>
{
moveStart
(
el
)
}
el
.
ontouchmove
=
(
e
)
=>
{
e
.
preventDefault
()
moving
(
el
,
e
)
}
el
.
ontouchend
=
(
e
)
=>
{
moveEnd
(
el
,
e
)
}
// PC鼠标事件
el
.
onmousedown
=
(
e
)
=>
{
e
.
preventDefault
()
moveStart
(
el
)
MOUSE_DOWN_FLAG
=
true
}
window
.
addEventListener
(
'
mousemove
'
,
(
e
)
=>
{
if
(
MOUSE_DOWN_FLAG
)
moving
(
el
,
e
)
})
window
.
addEventListener
(
'
mouseup
'
,
(
e
)
=>
{
if
(
MOUSE_DOWN_FLAG
)
{
moveEnd
(
el
,
e
)
MOUSE_DOWN_FLAG
=
false
}
})
window
.
addEventListener
(
'
resize
'
,
()
=>
{
adjustPosition
(
el
)
})
}
}
function
moveStart
(
el
)
{
el
.
style
.
opacity
=
1
}
function
moving
(
el
,
e
)
{
let
target
=
e
.
touches
?
e
.
touches
[
0
]
:
e
if
(
el
.
dokitEntryLastX
===
INIT_VALUE
)
{
el
.
dokitEntryLastX
=
target
.
clientX
el
.
dokitEntryLastY
=
target
.
clientY
return
}
el
.
dokitPositionTop
+=
(
target
.
clientY
-
el
.
dokitEntryLastY
)
el
.
dokitPositionLeft
+=
(
target
.
clientX
-
el
.
dokitEntryLastX
)
el
.
dokitEntryLastX
=
target
.
clientX
el
.
dokitEntryLastY
=
target
.
clientY
// el.style.top = `${getAvailableTop(el)}px`
// el.style.left = `${getAvailableLeft(el)}px`
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
function
moveEnd
(
el
,
e
)
{
setTimeout
(()
=>
{
adjustPosition
(
el
)
el
.
config
.
name
&&
localStorage
.
setItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
,
el
.
dokitPositionTop
);
el
.
config
.
name
&&
localStorage
.
setItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
,
el
.
dokitPositionLeft
);
},
100
)
el
.
dokitEntryLastX
=
INIT_VALUE
el
.
dokitEntryLastY
=
INIT_VALUE
el
.
style
.
opacity
=
el
.
config
.
opacity
}
function
getDefaultX
(
el
){
let
defaultX
=
el
.
config
.
left
||
Math
.
round
(
window
.
innerWidth
/
2
)
return
localStorage
.
getItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
)
?
parseInt
(
localStorage
.
getItem
(
`dokitPositionLeft_
${
el
.
config
.
name
}
`
))
:
defaultX
}
function
getDefaultY
(
el
){
let
defaultY
=
el
.
config
.
top
||
Math
.
round
(
window
.
innerHeight
/
2
)
return
localStorage
.
getItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
)
?
parseInt
(
localStorage
.
getItem
(
`dokitPositionTop_
${
el
.
config
.
name
}
`
))
:
defaultY
}
// function getAvailableLeft(el){
// return standardNumber(el.dokitPositionLeft, window.innerWidth - el.clientWidth)
// }
// function getAvailableTop(el){
// return standardNumber(el.dokitPositionTop, window.innerHeight - el.clientHeight)
// }
// function standardNumber(number, max){
// if(number < 0){
// return 0
// }
// if(number >= max){
// return max
// }
// return number
// }
function
adjustPosition
(
el
)
{
if
(
el
.
dokitPositionLeft
<
0
)
{
el
.
dokitPositionLeft
=
0
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
else
if
(
el
.
dokitPositionLeft
+
el
.
getBoundingClientRect
().
width
>
window
.
innerWidth
)
{
el
.
dokitPositionLeft
=
window
.
innerWidth
-
el
.
getBoundingClientRect
().
width
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
if
(
el
.
dokitPositionTop
<
0
)
{
el
.
dokitPositionTop
=
0
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
}
else
if
(
el
.
dokitPositionTop
+
el
.
getBoundingClientRect
().
height
+
el
.
config
.
safeBottom
>
window
.
innerHeight
)
{
el
.
dokitPositionTop
=
window
.
innerHeight
-
el
.
getBoundingClientRect
().
height
-
el
.
config
.
safeBottom
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
}
}
\ No newline at end of file
Web/packages/utils/src/index.js
浏览文件 @
468eedb4
export
*
from
'
./utils
'
export
*
from
'
./dom
'
export
*
from
'
./dragable
'
\ No newline at end of file
Web/packages/utils/src/utils.js
浏览文件 @
468eedb4
export
const
isObject
=
function
(
obj
)
{
export
const
isObject
=
function
(
obj
)
{
return
Object
.
prototype
.
toString
.
call
(
obj
)
===
'
[object Object]
'
}
export
const
isFunction
=
function
(
obj
)
{
export
const
isFunction
=
function
(
obj
)
{
return
typeof
obj
===
'
function
'
}
export
const
isMobile
=
function
()
{
if
(
window
.
navigator
.
userAgent
.
match
(
/
(
phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone
)
/i
))
{
return
true
}
return
false
}
\ No newline at end of file
Web/packages/web/dist/dokit.js
浏览文件 @
468eedb4
此差异已折叠。
点击以展开。
Web/packages/web/package.json
浏览文件 @
468eedb4
...
...
@@ -30,7 +30,8 @@
"dev"
:
"npx rollup -wc"
},
"dependencies"
:
{
"@dokit/web-core"
:
"^0.0.1-alpha.0"
"@dokit/web-core"
:
"^0.0.1-alpha.0"
,
"@dokit/web-utils"
:
"^0.0.1-alpha.0"
},
"gitHead"
:
"886ea7c19806526668e5da0179da335e7df9d012"
}
Web/packages/web/src/common/directives/dragable.js
已删除
100644 → 0
浏览文件 @
a77e5ddb
/**
* 拖拽指令 v-dragable
* 减少外部依赖
*/
const
INIT_VALUE
=
9999
const
DEFAULT_OPACITY
=
0.5
const
SAFE_BOTTOM
=
50
// 底部防误触
// TODO 拖拽事件兼容 Pc处理
// TODO 默认初始位置为右下角
export
default
{
mounted
(
el
)
{
// 初始化变量
el
.
dokitEntryLastX
=
INIT_VALUE
el
.
dokitEntryLastY
=
INIT_VALUE
// 初始化样式
el
.
style
.
position
=
'
fixed
'
el
.
style
.
opacity
=
DEFAULT_OPACITY
el
.
dokitPositionLeft
=
getDefaultX
(
el
)
el
.
dokitPositionTop
=
getDefaultY
(
el
)
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
// 触摸事件监听
el
.
ontouchstart
=
()
=>
{
el
.
style
.
opacity
=
1
}
el
.
ontouchmove
=
(
e
)
=>
{
e
.
preventDefault
()
if
(
el
.
dokitEntryLastX
===
INIT_VALUE
)
{
el
.
dokitEntryLastX
=
e
.
touches
[
0
].
clientX
el
.
dokitEntryLastY
=
e
.
touches
[
0
].
clientY
return
}
el
.
dokitPositionTop
+=
(
e
.
touches
[
0
].
clientY
-
el
.
dokitEntryLastY
)
el
.
dokitPositionLeft
+=
(
e
.
touches
[
0
].
clientX
-
el
.
dokitEntryLastX
)
el
.
dokitEntryLastX
=
e
.
touches
[
0
].
clientX
el
.
dokitEntryLastY
=
e
.
touches
[
0
].
clientY
el
.
style
.
top
=
`
${
getAvailableTop
(
el
)}
px`
el
.
style
.
left
=
`
${
getAvailableLeft
(
el
)}
px`
}
el
.
ontouchend
=
(
e
)
=>
{
setTimeout
(()
=>
{
if
(
el
.
dokitPositionLeft
<
0
)
{
el
.
dokitPositionLeft
=
0
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
else
if
(
el
.
dokitPositionLeft
+
e
.
target
.
clientWidth
>
window
.
screen
.
availWidth
)
{
el
.
dokitPositionLeft
=
window
.
screen
.
availWidth
-
e
.
target
.
clientWidth
el
.
style
.
left
=
`
${
el
.
dokitPositionLeft
}
px`
}
if
(
el
.
dokitPositionTop
<
0
)
{
el
.
dokitPositionTop
=
0
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
}
else
if
(
el
.
dokitPositionTop
+
e
.
target
.
clientHeight
+
SAFE_BOTTOM
>
window
.
screen
.
availHeight
)
{
el
.
dokitPositionTop
=
window
.
screen
.
availHeight
-
e
.
target
.
clientHeight
-
SAFE_BOTTOM
el
.
style
.
top
=
`
${
el
.
dokitPositionTop
}
px`
}
localStorage
.
setItem
(
'
dokitPositionTop
'
,
el
.
dokitPositionTop
);
localStorage
.
setItem
(
'
dokitPositionLeft
'
,
el
.
dokitPositionLeft
);
},
100
)
el
.
dokitEntryLastX
=
INIT_VALUE
el
.
dokitEntryLastY
=
INIT_VALUE
el
.
style
.
opacity
=
0.5
}
}
}
function
getDefaultX
(
el
){
let
defaultX
=
Math
.
round
(
window
.
outerWidth
/
2
)
return
localStorage
.
getItem
(
'
dokitPositionLeft
'
)
?
parseInt
(
localStorage
.
getItem
(
'
dokitPositionLeft
'
))
:
defaultX
}
function
getDefaultY
(
el
){
let
defaultY
=
Math
.
round
(
window
.
outerHeight
/
2
)
return
localStorage
.
getItem
(
'
dokitPositionTop
'
)
?
parseInt
(
localStorage
.
getItem
(
'
dokitPositionTop
'
))
:
defaultY
}
function
getAvailableLeft
(
el
){
return
standardNumber
(
el
.
dokitPositionLeft
,
window
.
outerWidth
-
el
.
clientWidth
)
}
function
getAvailableTop
(
el
){
return
standardNumber
(
el
.
dokitPositionTop
,
window
.
outerHeight
-
el
.
clientHeight
)
}
function
standardNumber
(
number
,
max
){
if
(
number
<
0
){
return
0
}
if
(
number
>=
max
){
return
max
}
return
number
}
\ No newline at end of file
Web/packages/web/src/plugins/demo-single-plugin/IndependPluginDemo.vue
浏览文件 @
468eedb4
<
template
>
<div
class=
"hello-world"
v-dragable
>
<div
style=
"font-weight:bold;font-size:30px;font-style:italic;"
>
Hello Dokit
</div>
<div
class=
"hello-independ"
v-dragable
>
<div
style=
"font-weight: bold; font-size: 30px; font-style: italic"
>
Hello Dokit
</div>
<div>
Demo Independ Plugin
</div>
<div
@
click=
"remove"
style=
"background-color: red;"
>
点击移除当前独立插件
</div>
<div
@
click=
"remove"
style=
"background-color: red; color:white;margin-top:10px"
>
点击移除当前独立插件
</div>
</div>
</
template
>
<
script
>
import
dragable
from
"
@common/directives/dragable
"
;
import
{
removeIndependPlugin
}
from
'
@dokit/web-core
'
;
import
{
dragable
}
from
"
@dokit/web-utils
"
;
import
{
removeIndependPlugin
}
from
"
@dokit/web-core
"
;
export
default
{
directives
:
{
...
...
@@ -16,18 +19,21 @@ export default {
},
methods
:
{
remove
()
{
removeIndependPlugin
(
'
test
'
)
}
}
}
removeIndependPlugin
(
"
test
"
);
}
,
}
,
}
;
</
script
>
<
style
>
.hello-
world
{
<
style
scoped
>
.hello-
independ
{
display
:
inline-block
;
padding
:
10px
;
width
:
200px
;
/* padding: 10px; */
text-align
:
center
;
background-color
:
white
;
border-radius
:
20px
;
box-shadow
:
0
8px
12px
#ebedf0
;
overflow
:
hidden
;
border
:
1px
solid
red
;
}
</
style
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录