Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
bd2039ac
提交
bd2039ac
authored
6月 11, 2021
作者:
Vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: remove useExpose
上级
3b2c40be
显示空白字符变更
内嵌
并排
正在显示
10 个修改的文件
包含
208 行增加
和
211 行删除
+208
-211
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+4
-0
BasicTable.vue
src/components/Table/src/BasicTable.vue
+2
-3
Tree.vue
src/components/Tree/src/Tree.vue
+2
-3
index.ts
src/components/Verify/index.ts
+6
-5
DragVerify.less
src/components/Verify/src/DragVerify.less
+0
-87
DragVerify.vue
src/components/Verify/src/DragVerify.vue
+129
-37
ImgRotate.less
src/components/Verify/src/ImgRotate.less
+0
-51
ImgRotate.vue
src/components/Verify/src/ImgRotate.vue
+65
-16
typing.ts
src/components/Verify/src/typing.ts
+0
-0
useExpose.ts
src/hooks/core/useExpose.ts
+0
-9
没有找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
bd2039ac
## Wip
### ✨ Refactor
-
移除
`useExpose`
,使用组件自身提供的
`expose`
代替
### ✨ Features
-
**CropperImage**
`Cropper`
头像裁剪新增圆形裁剪功能
...
...
src/components/Table/src/BasicTable.vue
浏览文件 @
bd2039ac
...
...
@@ -59,7 +59,6 @@
import
{
createTableContext
}
from
'./hooks/useTableContext'
;
import
{
useTableFooter
}
from
'./hooks/useTableFooter'
;
import
{
useTableForm
}
from
'./hooks/useTableForm'
;
import
{
useExpose
}
from
'/@/hooks/core/useExpose'
;
import
{
useDesign
}
from
'/@/hooks/web/useDesign'
;
import
{
omit
}
from
'lodash-es'
;
...
...
@@ -91,7 +90,7 @@
'change'
,
'columns-change'
,
],
setup
(
props
,
{
attrs
,
emit
,
slots
})
{
setup
(
props
,
{
attrs
,
emit
,
slots
,
expose
})
{
const
tableElRef
=
ref
<
ComponentRef
>
(
null
);
const
tableData
=
ref
<
Recordable
[]
>
([]);
...
...
@@ -290,7 +289,7 @@
};
createTableContext
({
...
tableAction
,
wrapRef
,
getBindValues
});
useExpose
<
TableActionType
>
(
tableAction
);
expose
(
tableAction
);
emit
(
'register'
,
tableAction
,
formActions
);
...
...
src/components/Tree/src/Tree.vue
浏览文件 @
bd2039ac
...
...
@@ -25,7 +25,6 @@
import
{
useTree
}
from
'./useTree'
;
import
{
useContextMenu
}
from
'/@/hooks/web/useContextMenu'
;
import
{
useExpose
}
from
'/@/hooks/core/useExpose'
;
import
{
useDesign
}
from
'/@/hooks/web/useDesign'
;
import
{
basicProps
}
from
'./props'
;
...
...
@@ -44,7 +43,7 @@
inheritAttrs
:
false
,
props
:
basicProps
,
emits
:
[
'update:expandedKeys'
,
'update:selectedKeys'
,
'update:value'
,
'change'
,
'check'
],
setup
(
props
,
{
attrs
,
slots
,
emit
})
{
setup
(
props
,
{
attrs
,
slots
,
emit
,
expose
})
{
const
state
=
reactive
<
State
>
({
checkStrictly
:
props
.
checkStrictly
,
expandedKeys
:
props
.
expandedKeys
||
[],
...
...
@@ -277,7 +276,7 @@
},
};
useExpose
<
TreeActionType
>
(
instance
);
expose
(
instance
);
function
renderAction
(
node
:
TreeItem
)
{
const
{
actionList
}
=
props
;
...
...
src/components/Verify/index.ts
浏览文件 @
bd2039ac
import
{
createAsyncComponent
}
from
'/@/utils/factory/createAsyncComponent'
;
import
{
withInstall
}
from
'/@/utils/index'
;
import
basicDragVerify
from
'./src/DragVerify.vue'
;
import
rotateDragVerify
from
'./src/ImgRotate.vue'
;
export
const
BasicDragVerify
=
createAsyncComponent
(()
=>
import
(
'./src/DragVerify'
));
export
const
RotateDragVerify
=
createAsyncComponent
(()
=>
import
(
'./src/ImgRotate'
));
export
*
from
'./src/types'
;
export
const
BasicDragVerify
=
withInstall
(
basicDragVerify
);
export
const
RotateDragVerify
=
withInstall
(
rotateDragVerify
);
export
*
from
'./src/typing'
;
src/components/Verify/src/DragVerify.less
deleted
100644 → 0
浏览文件 @
3b2c40be
@radius: 4px;
.darg-verify {
position: relative;
overflow: hidden;
text-align: center;
background-color: rgb(238, 238, 238);
border: 1px solid #ddd;
border-radius: @radius;
&-bar {
position: absolute;
width: 0;
height: 36px;
background-color: @success-color;
border-radius: @radius;
&.to-left {
width: 0 !important;
transition: width 0.3s;
}
}
&-content {
position: absolute;
top: 0;
font-size: 12px;
-webkit-text-size-adjust: none;
background-color: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, #333),
color-stop(0.4, #333),
color-stop(0.5, #fff),
color-stop(0.6, #333),
color-stop(1, #333)
);
animation: slidetounlock 3s infinite;
-webkit-background-clip: text;
-moz-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-fill-color: transparent;
&.success {
-webkit-text-fill-color: @white;
}
& > * {
-webkit-text-fill-color: #333;
}
}
&-action {
position: absolute;
top: 0;
left: 0;
display: flex;
cursor: move;
background-color: @white;
border-radius: @radius;
justify-content: center;
align-items: center;
&__icon {
cursor: inherit;
}
&.to-left {
left: 0 !important;
transition: left 0.3s;
}
}
}
@-webkit-keyframes slidetounlock {
0% {
background-position: -120px 0;
}
100% {
background-position: 120px 0;
}
}
src/components/Verify/src/DragVerify.
tsx
→
src/components/Verify/src/DragVerify.
vue
浏览文件 @
bd2039ac
import
{
defineComponent
,
ref
,
computed
,
unref
,
reactive
,
watch
,
watchEffect
}
from
'vue'
;
import
{
useTimeoutFn
}
from
'/@/hooks/core/useTimeout'
;
import
{
useEventListener
}
from
'/@/hooks/event/useEventListener'
;
import
{
basicProps
}
from
'./props'
;
import
{
getSlot
}
from
'/@/utils/helper/tsxHelper'
;
import
'./DragVerify.less'
;
import
{
CheckOutlined
,
DoubleRightOutlined
}
from
'@ant-design/icons-vue'
;
import
type
{
DragVerifyActionType
}
from
'./types'
;
import
{
useExpose
}
from
'/@/hooks/core/useExpose'
;
export
default
defineComponent
({
<
script
lang=
"tsx"
>
import
{
defineComponent
,
ref
,
computed
,
unref
,
reactive
,
watch
,
watchEffect
}
from
'vue'
;
import
{
useTimeoutFn
}
from
'/@/hooks/core/useTimeout'
;
import
{
useEventListener
}
from
'/@/hooks/event/useEventListener'
;
import
{
basicProps
}
from
'./props'
;
import
{
getSlot
}
from
'/@/utils/helper/tsxHelper'
;
import
{
CheckOutlined
,
DoubleRightOutlined
}
from
'@ant-design/icons-vue'
;
export
default
defineComponent
({
name
:
'BaseDargVerify'
,
props
:
basicProps
,
emits
:
[
'success'
,
'update:value'
,
'change'
,
'start'
,
'move'
,
'end'
],
setup
(
props
,
{
emit
,
slots
})
{
setup
(
props
,
{
emit
,
slots
,
expose
})
{
const
state
=
reactive
({
isMoving
:
false
,
isPassing
:
false
,
...
...
@@ -26,21 +25,14 @@ export default defineComponent({
const
contentElRef
=
ref
<
HTMLDivElement
|
null
>
(
null
);
const
actionElRef
=
ref
<
HTMLDivElement
|
null
>
(
null
);
watch
(
()
=>
state
.
isPassing
,
(
isPassing
)
=>
{
if
(
isPassing
)
{
const
{
startTime
,
endTime
}
=
state
;
const
time
=
(
endTime
-
startTime
)
/
1000
;
emit
(
'success'
,
{
isPassing
,
time
:
time
.
toFixed
(
1
)
});
emit
(
'update:value'
,
isPassing
);
emit
(
'change'
,
isPassing
);
}
useEventListener
({
el
:
document
,
name
:
'mouseup'
,
listener
:
()
=>
{
if
(
state
.
isMoving
)
{
resume
();
}
);
watchEffect
(()
=>
{
state
.
isPassing
=
!!
props
.
value
;
},
});
const
getActionStyleRef
=
computed
(()
=>
{
...
...
@@ -53,6 +45,7 @@ export default defineComponent({
...
actionStyle
,
};
});
const
getWrapStyleRef
=
computed
(()
=>
{
const
{
height
,
width
,
circle
,
wrapStyle
}
=
props
;
const
h
=
parseInt
(
height
as
string
);
...
...
@@ -88,24 +81,31 @@ export default defineComponent({
};
});
watch
(
()
=>
state
.
isPassing
,
(
isPassing
)
=>
{
if
(
isPassing
)
{
const
{
startTime
,
endTime
}
=
state
;
const
time
=
(
endTime
-
startTime
)
/
1000
;
emit
(
'success'
,
{
isPassing
,
time
:
time
.
toFixed
(
1
)
});
emit
(
'update:value'
,
isPassing
);
emit
(
'change'
,
isPassing
);
}
}
);
watchEffect
(()
=>
{
state
.
isPassing
=
!!
props
.
value
;
});
function
getEventPageX
(
e
:
MouseEvent
|
TouchEvent
)
{
return
(
e
as
MouseEvent
).
pageX
||
(
e
as
TouchEvent
).
touches
[
0
].
pageX
;
}
useEventListener
({
el
:
document
,
name
:
'mouseup'
,
listener
:
()
=>
{
if
(
state
.
isMoving
)
{
resume
();
}
},
});
function
handleDragStart
(
e
:
MouseEvent
|
TouchEvent
)
{
if
(
state
.
isPassing
)
{
return
;
}
const
actionEl
=
unref
(
actionElRef
);
if
(
!
actionEl
)
return
;
emit
(
'start'
,
e
);
...
...
@@ -113,6 +113,7 @@ export default defineComponent({
state
.
startTime
=
new
Date
().
getTime
();
state
.
isMoving
=
true
;
}
function
getOffset
(
el
:
HTMLDivElement
)
{
const
actionWidth
=
parseInt
(
el
.
style
.
width
);
const
{
width
}
=
props
;
...
...
@@ -120,6 +121,7 @@ export default defineComponent({
const
offset
=
widthNum
-
actionWidth
-
6
;
return
{
offset
,
widthNum
,
actionWidth
};
}
function
handleDragMoving
(
e
:
MouseEvent
|
TouchEvent
)
{
const
{
isMoving
,
moveDistance
}
=
state
;
if
(
isMoving
)
{
...
...
@@ -211,7 +213,7 @@ export default defineComponent({
contentEl
.
style
.
width
=
unref
(
getContentStyleRef
).
width
;
}
useExpose
<
DragVerifyActionType
>
({
expose
({
resume
,
});
...
...
@@ -280,4 +282,94 @@ export default defineComponent({
);
};
},
});
});
</
script
>
<
style
lang=
"less"
>
@radius
:
4px
;
.darg-verify
{
position
:
relative
;
overflow
:
hidden
;
text-align
:
center
;
background-color
:
rgb
(
238
,
238
,
238
);
border
:
1px
solid
#ddd
;
border-radius
:
@
radius
;
&-bar
{
position
:
absolute
;
width
:
0
;
height
:
36px
;
background-color
:
@
success-color
;
border-radius
:
@
radius
;
&.to-left
{
width
:
0
!important
;
transition
:
width
0.3s
;
}
}
&
-content
{
position
:
absolute
;
top
:
0
;
font-size
:
12px
;
-webkit-text-size-adjust
:
none
;
background-color
:
-webkit-gradient
(
linear
,
left
top
,
right
top
,
color-stop
(
0
,
#333
),
color-stop
(
0.4
,
#333
),
color-stop
(
0.5
,
#fff
),
color-stop
(
0.6
,
#333
),
color-stop
(
1
,
#333
)
);
animation
:
slidetounlock
3s
infinite
;
-webkit-background-clip
:
text
;
-moz-user-select
:
none
;
-webkit-user-select
:
none
;
-o-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
-webkit-text-fill-color
:
transparent
;
&.success
{
-webkit-text-fill-color
:
@
white
;
}
&
>
*
{
-webkit-text-fill-color
:
#333
;
}
}
&
-action
{
position
:
absolute
;
top
:
0
;
left
:
0
;
display
:
flex
;
cursor
:
move
;
background-color
:
@
white
;
border-radius
:
@
radius
;
justify-content
:
center
;
align-items
:
center
;
&__icon
{
cursor
:
inherit
;
}
&
.to-left
{
left
:
0
!important
;
transition
:
left
0.3s
;
}
}
}
@-webkit-keyframes
slidetounlock
{
0
%
{
background-position
:
-120px
0
;
}
100
%
{
background-position
:
120px
0
;
}
}
</
style
>
src/components/Verify/src/ImgRotate.less
deleted
100644 → 0
浏览文件 @
3b2c40be
.ir-dv {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
&-img__wrap {
position: relative;
overflow: hidden;
border-radius: 50%;
img {
width: 100%;
border-radius: 50%;
&.to-origin {
transition: transform 0.3s;
}
}
}
&-img__tip {
position: absolute;
bottom: 10px;
left: 0;
z-index: 1;
display: block;
width: 100%;
height: 30px;
font-size: 12px;
line-height: 30px;
color: @white;
text-align: center;
&.success {
background-color: fade(@success-color, 60%);
}
&.error {
background-color: fade(@error-color, 60%);
}
&.normal {
background-color: rgba(0, 0, 0, 0.3);
}
}
&-drag__bar {
margin-top: 20px;
}
}
src/components/Verify/src/ImgRotate.
tsx
→
src/components/Verify/src/ImgRotate.
vue
浏览文件 @
bd2039ac
import
'./ImgRotate.less'
;
import
type
{
MoveData
,
DragVerifyActionType
}
from
'./types'
;
import
{
defineComponent
,
computed
,
unref
,
reactive
,
watch
,
ref
,
getCurrentInstance
}
from
'vue'
;
import
{
useTimeoutFn
}
from
'/@/hooks/core/useTimeout'
;
import
BasicDragVerify
from
'./DragVerify'
;
import
{
hackCss
}
from
'/@/utils/domUtils'
;
import
{
rotateProps
}
from
'./props'
;
import
{
useI18n
}
from
'/@/hooks/web/useI18n'
;
export
default
defineComponent
({
<
script
lang=
"tsx"
>
import
type
{
MoveData
,
DragVerifyActionType
}
from
'./typing'
;
import
{
defineComponent
,
computed
,
unref
,
reactive
,
watch
,
ref
,
getCurrentInstance
}
from
'vue'
;
import
{
useTimeoutFn
}
from
'/@/hooks/core/useTimeout'
;
import
BasicDragVerify
from
'./DragVerify.vue'
;
import
{
hackCss
}
from
'/@/utils/domUtils'
;
import
{
rotateProps
}
from
'./props'
;
import
{
useI18n
}
from
'/@/hooks/web/useI18n'
;
export
default
defineComponent
({
name
:
'ImgRotateDargVerify'
,
inheritAttrs
:
false
,
props
:
rotateProps
,
...
...
@@ -169,4 +164,58 @@ export default defineComponent({
);
};
},
});
});
</
script
>
<
style
lang=
"less"
>
.ir-dv
{
position
:
relative
;
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
&-img__wrap
{
position
:
relative
;
overflow
:
hidden
;
border-radius
:
50%
;
img
{
width
:
100%
;
border-radius
:
50%
;
&.to-origin
{
transition
:
transform
0.3s
;
}
}
}
&
-img__tip
{
position
:
absolute
;
bottom
:
10px
;
left
:
0
;
z-index
:
1
;
display
:
block
;
width
:
100%
;
height
:
30px
;
font-size
:
12px
;
line-height
:
30px
;
color
:
@
white
;
text-align
:
center
;
&.success
{
background-color
:
fade
(
@
success-color
,
60%
);
}
&
.error
{
background-color
:
fade
(
@
error-color
,
60%
);
}
&
.normal
{
background-color
:
rgba
(
0
,
0
,
0
,
0.3
);
}
}
&
-drag__bar
{
margin-top
:
20px
;
}
}
</
style
>
src/components/Verify/src/typ
es
.ts
→
src/components/Verify/src/typ
ing
.ts
浏览文件 @
bd2039ac
File moved
src/hooks/core/useExpose.ts
deleted
100644 → 0
浏览文件 @
3b2c40be
import
{
getCurrentInstance
}
from
'vue'
;
// expose public api
export
function
useExpose
<
T
>
(
apis
:
T
)
{
const
instance
=
getCurrentInstance
();
if
(
instance
)
{
Object
.
assign
(
instance
.
proxy
,
apis
);
}
}
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论