Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
一臭打代码的 aka 潘先生です
vue-vben-admin
提交
3b2c40be
V
vue-vben-admin
项目概览
一臭打代码的 aka 潘先生です
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3b2c40be
编写于
6月 11, 2021
作者:
V
Vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor(virtual-scroll): refactor virtualScroll component
上级
1c1755cf
变更
16
隐藏空白更改
内联
并排
Showing
16 changed file
with
215 addition
and
218 deletion
+215
-218
src/components/Markdown/index.ts
src/components/Markdown/index.ts
+4
-3
src/components/Markdown/src/Markdown.vue
src/components/Markdown/src/Markdown.vue
+3
-4
src/components/Markdown/src/typing.ts
src/components/Markdown/src/typing.ts
+0
-0
src/components/StrengthMeter/index.ts
src/components/StrengthMeter/index.ts
+4
-1
src/components/StrengthMeter/src/StrengthMeter.vue
src/components/StrengthMeter/src/StrengthMeter.vue
+0
-3
src/components/Time/index.ts
src/components/Time/index.ts
+4
-1
src/components/Time/src/Time.vue
src/components/Time/src/Time.vue
+1
-2
src/components/Tinymce/index.ts
src/components/Tinymce/index.ts
+4
-2
src/components/Tinymce/src/Editor.vue
src/components/Tinymce/src/Editor.vue
+0
-5
src/components/Tinymce/src/ImgUpload.vue
src/components/Tinymce/src/ImgUpload.vue
+1
-1
src/components/VirtualScroll/index.ts
src/components/VirtualScroll/index.ts
+3
-2
src/components/VirtualScroll/src/VirtualScroll.tsx
src/components/VirtualScroll/src/VirtualScroll.tsx
+0
-148
src/components/VirtualScroll/src/VirtualScroll.vue
src/components/VirtualScroll/src/VirtualScroll.vue
+190
-0
src/components/VirtualScroll/src/index.less
src/components/VirtualScroll/src/index.less
+0
-18
src/components/VirtualScroll/src/props.ts
src/components/VirtualScroll/src/props.ts
+0
-27
src/components/registerGlobComp.ts
src/components/registerGlobComp.ts
+1
-1
未找到文件。
src/components/Markdown/index.ts
浏览文件 @
3b2c40be
import
{
createAsyncComponent
}
from
'
/@/utils/factory/createAsyncComponent
'
;
export
const
MarkDown
=
createAsyncComponent
(()
=>
import
(
'
./src/Markdown.vue
'
))
;
import
{
withInstall
}
from
'
/@/utils
'
;
import
markDown
from
'
./src/Markdown.vue
'
;
export
*
from
'
./src/types
'
;
export
const
MarkDown
=
withInstall
(
markDown
);
export
*
from
'
./src/typing
'
;
src/components/Markdown/src/Markdown.vue
浏览文件 @
3b2c40be
...
...
@@ -14,18 +14,17 @@
}
from
'
vue
'
;
import
Vditor
from
'
vditor
'
;
import
'
vditor/dist/index.css
'
;
import
{
propTypes
}
from
'
/@/utils/propTypes
'
;
import
{
useLocale
}
from
'
/@/locales/useLocale
'
;
import
{
useModalContext
}
from
'
../../Modal
'
;
import
{
useRootSetting
}
from
'
/@/hooks/setting/useRootSetting
'
;
type
Lang
=
'
zh_CN
'
|
'
en_US
'
|
'
ja_JP
'
|
'
ko_KR
'
|
undefined
;
export
default
defineComponent
({
inheritAttrs
:
false
,
props
:
{
height
:
propTypes
.
number
.
def
(
360
)
,
value
:
propTypes
.
string
.
def
(
''
)
,
height
:
{
type
:
Number
,
default
:
360
}
,
value
:
{
type
:
String
,
default
:
''
}
,
},
emits
:
[
'
change
'
,
'
get
'
],
setup
(
props
,
{
attrs
,
emit
})
{
...
...
src/components/Markdown/src/typ
es
.ts
→
src/components/Markdown/src/typ
ing
.ts
浏览文件 @
3b2c40be
文件已移动
src/components/StrengthMeter/index.ts
浏览文件 @
3b2c40be
export
{
default
as
StrengthMeter
}
from
'
./src/StrengthMeter.vue
'
;
import
{
withInstall
}
from
'
/@/utils
'
;
import
strengthMeter
from
'
./src/StrengthMeter.vue
'
;
export
const
StrengthMeter
=
withInstall
(
strengthMeter
);
src/components/StrengthMeter/src/StrengthMeter.vue
浏览文件 @
3b2c40be
...
...
@@ -20,10 +20,7 @@
<
script
lang=
"ts"
>
import
{
defineComponent
,
computed
,
ref
,
watch
,
unref
,
watchEffect
}
from
'
vue
'
;
import
{
Input
}
from
'
ant-design-vue
'
;
// @ts-ignore
import
{
zxcvbn
}
from
'
@zxcvbn-ts/core
'
;
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
import
{
propTypes
}
from
'
/@/utils/propTypes
'
;
...
...
src/components/Time/index.ts
浏览文件 @
3b2c40be
export
{
default
as
Time
}
from
'
./src/Time.vue
'
;
import
{
withInstall
}
from
'
/@/utils/index
'
;
import
time
from
'
./src/Time.vue
'
;
export
const
Time
=
withInstall
(
time
);
src/components/Time/src/Time.vue
浏览文件 @
3b2c40be
...
...
@@ -3,10 +3,8 @@
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
ref
,
watch
}
from
'
vue
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
import
{
useIntervalFn
}
from
'
@vueuse/core
'
;
import
{
formatToDateTime
,
formatToDate
,
dateUtil
}
from
'
/@/utils/dateUtil
'
;
import
{
isNumber
,
isObject
,
isString
}
from
'
/@/utils/is
'
;
import
{
propTypes
}
from
'
/@/utils/propTypes
'
;
...
...
@@ -15,6 +13,7 @@
const
ONE_MINUTES
=
ONE_SECONDS
*
60
;
const
ONE_HOUR
=
ONE_MINUTES
*
60
;
const
ONE_DAY
=
ONE_HOUR
*
24
;
export
default
defineComponent
({
name
:
'
Time
'
,
props
:
{
...
...
src/components/Tinymce/index.ts
浏览文件 @
3b2c40be
import
Tinymce
from
'
./src/Editor.vue
'
;
export
{
Tinymce
};
import
{
withInstall
}
from
'
/@/utils/index
'
;
import
tinymce
from
'
./src/Editor.vue
'
;
export
const
Tinymce
=
withInstall
(
tinymce
);
src/components/Tinymce/src/Editor.vue
浏览文件 @
3b2c40be
...
...
@@ -16,7 +16,6 @@
import
type
{
RawEditorSettings
}
from
'
tinymce
'
;
import
tinymce
from
'
tinymce/tinymce
'
;
import
'
tinymce/themes/silver
'
;
import
'
tinymce/icons/default/icons
'
;
import
'
tinymce/plugins/advlist
'
;
import
'
tinymce/plugins/anchor
'
;
...
...
@@ -58,11 +57,8 @@
onUnmounted
,
onDeactivated
,
}
from
'
vue
'
;
import
ImgUpload
from
'
./ImgUpload.vue
'
;
import
{
toolbar
,
plugins
}
from
'
./tinymce
'
;
import
{
buildShortUUID
}
from
'
/@/utils/uuid
'
;
import
{
bindHandlers
}
from
'
./helper
'
;
import
{
onMountedOrActivated
}
from
'
/@/hooks/core/onMountedOrActivated
'
;
...
...
@@ -96,7 +92,6 @@
required
:
false
,
default
:
400
,
},
width
:
{
type
:
[
Number
,
String
]
as
PropType
<
string
|
number
>
,
required
:
false
,
...
...
src/components/Tinymce/src/ImgUpload.vue
浏览文件 @
3b2c40be
...
...
@@ -52,9 +52,9 @@
function
handleChange
(
info
:
Recordable
)
{
const
file
=
info
.
file
;
const
status
=
file
?.
status
;
const
url
=
file
?.
response
?.
url
;
const
name
=
file
?.
name
;
if
(
status
===
'
uploading
'
)
{
if
(
!
uploading
)
{
emit
(
'
uploading
'
,
name
);
...
...
src/components/VirtualScroll/index.ts
浏览文件 @
3b2c40be
import
{
createAsyncComponent
}
from
'
/@/utils/factory/createAsyncComponent
'
;
import
{
withInstall
}
from
'
/@/utils/index
'
;
import
vScroll
from
'
./src/VirtualScroll.vue
'
;
export
const
VScroll
=
createAsyncComponent
(()
=>
import
(
'
./src/VirtualScroll
'
)
);
export
const
VScroll
=
withInstall
(
vScroll
);
src/components/VirtualScroll/src/VirtualScroll.tsx
已删除
100644 → 0
浏览文件 @
1c1755cf
import
{
defineComponent
,
computed
,
ref
,
unref
,
reactive
,
onMounted
,
watch
,
nextTick
,
CSSProperties
,
}
from
'
vue
'
;
import
{
useEventListener
}
from
'
/@/hooks/event/useEventListener
'
;
import
{
props
as
basicProps
}
from
'
./props
'
;
import
{
getSlot
}
from
'
/@/utils/helper/tsxHelper
'
;
import
'
./index.less
'
;
const
prefixCls
=
'
virtual-scroll
'
;
function
convertToUnit
(
str
:
string
|
number
|
null
|
undefined
,
unit
=
'
px
'
):
string
|
undefined
{
if
(
str
==
null
||
str
===
''
)
{
return
undefined
;
}
else
if
(
isNaN
(
+
str
!
))
{
return
String
(
str
);
}
else
{
return
`
${
Number
(
str
)}${
unit
}
`
;
}
}
export
default
defineComponent
({
name
:
'
VirtualScroll
'
,
props
:
basicProps
,
setup
(
props
,
{
slots
})
{
const
wrapElRef
=
ref
<
HTMLDivElement
|
null
>
(
null
);
const
state
=
reactive
({
first
:
0
,
last
:
0
,
scrollTop
:
0
,
});
const
getBenchRef
=
computed
(()
=>
{
return
parseInt
(
props
.
bench
as
string
,
10
);
});
const
getItemHeightRef
=
computed
(()
=>
{
return
parseInt
(
props
.
itemHeight
as
string
,
10
);
});
const
getFirstToRenderRef
=
computed
(()
=>
{
return
Math
.
max
(
0
,
state
.
first
-
unref
(
getBenchRef
));
});
const
getLastToRenderRef
=
computed
(()
=>
{
return
Math
.
min
((
props
.
items
||
[]).
length
,
state
.
last
+
unref
(
getBenchRef
));
});
const
getContainerStyleRef
=
computed
(():
CSSProperties
=>
{
return
{
height
:
convertToUnit
((
props
.
items
||
[]).
length
*
unref
(
getItemHeightRef
)),
};
});
const
getWrapStyleRef
=
computed
(():
CSSProperties
=>
{
const
styles
:
Recordable
<
string
>
=
{};
const
height
=
convertToUnit
(
props
.
height
);
const
minHeight
=
convertToUnit
(
props
.
minHeight
);
const
minWidth
=
convertToUnit
(
props
.
minWidth
);
const
maxHeight
=
convertToUnit
(
props
.
maxHeight
);
const
maxWidth
=
convertToUnit
(
props
.
maxWidth
);
const
width
=
convertToUnit
(
props
.
width
);
if
(
height
)
styles
.
height
=
height
;
if
(
minHeight
)
styles
.
minHeight
=
minHeight
;
if
(
minWidth
)
styles
.
minWidth
=
minWidth
;
if
(
maxHeight
)
styles
.
maxHeight
=
maxHeight
;
if
(
maxWidth
)
styles
.
maxWidth
=
maxWidth
;
if
(
width
)
styles
.
width
=
width
;
return
styles
;
});
watch
([()
=>
props
.
itemHeight
,
()
=>
props
.
height
],
()
=>
{
onScroll
();
});
function
getLast
(
first
:
number
):
number
{
const
wrapEl
=
unref
(
wrapElRef
);
if
(
!
wrapEl
)
{
return
0
;
}
const
height
=
parseInt
(
props
.
height
||
0
,
10
)
||
wrapEl
.
clientHeight
;
return
first
+
Math
.
ceil
(
height
/
unref
(
getItemHeightRef
));
}
function
getFirst
():
number
{
return
Math
.
floor
(
state
.
scrollTop
/
unref
(
getItemHeightRef
));
}
function
onScroll
()
{
const
wrapEl
=
unref
(
wrapElRef
);
if
(
!
wrapEl
)
{
return
;
}
state
.
scrollTop
=
wrapEl
.
scrollTop
;
state
.
first
=
getFirst
();
state
.
last
=
getLast
(
state
.
first
);
}
function
renderChildren
()
{
const
{
items
=
[]
}
=
props
;
return
items
.
slice
(
unref
(
getFirstToRenderRef
),
unref
(
getLastToRenderRef
)).
map
(
genChild
);
}
function
genChild
(
item
:
any
,
index
:
number
)
{
index
+=
unref
(
getFirstToRenderRef
);
const
top
=
convertToUnit
(
index
*
unref
(
getItemHeightRef
));
return
(
<
div
class
=
{
`
${
prefixCls
}
__item`
}
style
=
{
{
top
}
}
key
=
{
index
}
>
{
getSlot
(
slots
,
'
default
'
,
{
index
,
item
})
}
</
div
>
);
}
onMounted
(()
=>
{
state
.
last
=
getLast
(
0
);
nextTick
(()
=>
{
const
wrapEl
=
unref
(
wrapElRef
);
if
(
!
wrapEl
)
{
return
;
}
useEventListener
({
el
:
wrapEl
,
name
:
'
scroll
'
,
listener
:
onScroll
,
wait
:
0
,
});
});
});
return
()
=>
(
<
div
class
=
{
prefixCls
}
style
=
{
unref
(
getWrapStyleRef
)
}
ref
=
{
wrapElRef
}
>
<
div
class
=
{
`
${
prefixCls
}
__container`
}
style
=
{
unref
(
getContainerStyleRef
)
}
>
{
renderChildren
()
}
</
div
>
</
div
>
);
},
});
src/components/VirtualScroll/src/VirtualScroll.vue
0 → 100644
浏览文件 @
3b2c40be
<
script
lang=
"tsx"
>
import
{
defineComponent
,
computed
,
ref
,
unref
,
reactive
,
onMounted
,
watch
,
nextTick
,
CSSProperties
,
}
from
'
vue
'
;
import
{
useEventListener
}
from
'
/@/hooks/event/useEventListener
'
;
import
{
getSlot
}
from
'
/@/utils/helper/tsxHelper
'
;
type
NumberOrNumberString
=
PropType
<
string
|
number
|
undefined
>
;
const
props
=
{
height
:
[
Number
,
String
]
as
NumberOrNumberString
,
maxHeight
:
[
Number
,
String
]
as
NumberOrNumberString
,
maxWidth
:
[
Number
,
String
]
as
NumberOrNumberString
,
minHeight
:
[
Number
,
String
]
as
NumberOrNumberString
,
minWidth
:
[
Number
,
String
]
as
NumberOrNumberString
,
width
:
[
Number
,
String
]
as
NumberOrNumberString
,
bench
:
{
type
:
[
Number
,
String
]
as
NumberOrNumberString
,
default
:
0
,
},
itemHeight
:
{
type
:
[
Number
,
String
]
as
NumberOrNumberString
,
required
:
true
,
},
items
:
{
type
:
Array
as
PropType
<
any
[]
>
,
default
:
()
=>
[],
},
};
const
prefixCls
=
'
virtual-scroll
'
;
function
convertToUnit
(
str
:
string
|
number
|
null
|
undefined
,
unit
=
'
px
'
):
string
|
undefined
{
if
(
str
==
null
||
str
===
''
)
{
return
undefined
;
}
else
if
(
isNaN
(
+
str
!
))
{
return
String
(
str
);
}
else
{
return
`
${
Number
(
str
)}${
unit
}
`
;
}
}
export
default
defineComponent
({
name
:
'
VirtualScroll
'
,
props
,
setup
(
props
,
{
slots
})
{
const
wrapElRef
=
ref
<
HTMLDivElement
|
null
>
(
null
);
const
state
=
reactive
({
first
:
0
,
last
:
0
,
scrollTop
:
0
,
});
const
getBenchRef
=
computed
(()
=>
{
return
parseInt
(
props
.
bench
as
string
,
10
);
});
const
getItemHeightRef
=
computed
(()
=>
{
return
parseInt
(
props
.
itemHeight
as
string
,
10
);
});
const
getFirstToRenderRef
=
computed
(()
=>
{
return
Math
.
max
(
0
,
state
.
first
-
unref
(
getBenchRef
));
});
const
getLastToRenderRef
=
computed
(()
=>
{
return
Math
.
min
((
props
.
items
||
[]).
length
,
state
.
last
+
unref
(
getBenchRef
));
});
const
getContainerStyleRef
=
computed
(():
CSSProperties
=>
{
return
{
height
:
convertToUnit
((
props
.
items
||
[]).
length
*
unref
(
getItemHeightRef
)),
};
});
const
getWrapStyleRef
=
computed
(():
CSSProperties
=>
{
const
styles
:
Recordable
<
string
>
=
{};
const
height
=
convertToUnit
(
props
.
height
);
const
minHeight
=
convertToUnit
(
props
.
minHeight
);
const
minWidth
=
convertToUnit
(
props
.
minWidth
);
const
maxHeight
=
convertToUnit
(
props
.
maxHeight
);
const
maxWidth
=
convertToUnit
(
props
.
maxWidth
);
const
width
=
convertToUnit
(
props
.
width
);
if
(
height
)
styles
.
height
=
height
;
if
(
minHeight
)
styles
.
minHeight
=
minHeight
;
if
(
minWidth
)
styles
.
minWidth
=
minWidth
;
if
(
maxHeight
)
styles
.
maxHeight
=
maxHeight
;
if
(
maxWidth
)
styles
.
maxWidth
=
maxWidth
;
if
(
width
)
styles
.
width
=
width
;
return
styles
;
});
watch
([()
=>
props
.
itemHeight
,
()
=>
props
.
height
],
()
=>
{
onScroll
();
});
function
getLast
(
first
:
number
):
number
{
const
wrapEl
=
unref
(
wrapElRef
);
if
(
!
wrapEl
)
{
return
0
;
}
const
height
=
parseInt
(
props
.
height
||
0
,
10
)
||
wrapEl
.
clientHeight
;
return
first
+
Math
.
ceil
(
height
/
unref
(
getItemHeightRef
));
}
function
getFirst
():
number
{
return
Math
.
floor
(
state
.
scrollTop
/
unref
(
getItemHeightRef
));
}
function
onScroll
()
{
const
wrapEl
=
unref
(
wrapElRef
);
if
(
!
wrapEl
)
{
return
;
}
state
.
scrollTop
=
wrapEl
.
scrollTop
;
state
.
first
=
getFirst
();
state
.
last
=
getLast
(
state
.
first
);
}
function
renderChildren
()
{
const
{
items
=
[]
}
=
props
;
return
items
.
slice
(
unref
(
getFirstToRenderRef
),
unref
(
getLastToRenderRef
)).
map
(
genChild
);
}
function
genChild
(
item
:
any
,
index
:
number
)
{
index
+=
unref
(
getFirstToRenderRef
);
const
top
=
convertToUnit
(
index
*
unref
(
getItemHeightRef
));
return
(
<
div
class
=
{
`
${
prefixCls
}
__item`
}
style
=
{{
top
}}
key
=
{
index
}
>
{
getSlot
(
slots
,
'
default
'
,
{
index
,
item
})}
<
/div
>
);
}
onMounted
(()
=>
{
state
.
last
=
getLast
(
0
);
nextTick
(()
=>
{
const
wrapEl
=
unref
(
wrapElRef
);
if
(
!
wrapEl
)
{
return
;
}
useEventListener
({
el
:
wrapEl
,
name
:
'
scroll
'
,
listener
:
onScroll
,
wait
:
0
,
});
});
});
return
()
=>
(
<
div
class
=
{
prefixCls
}
style
=
{
unref
(
getWrapStyleRef
)}
ref
=
{
wrapElRef
}
>
<
div
class
=
{
`
${
prefixCls
}
__container`
}
style
=
{
unref
(
getContainerStyleRef
)}
>
{
renderChildren
()}
<
/div
>
<
/div
>
);
},
});
</
script
>
<
style
scoped
lang=
"less"
>
.virtual-scroll {
position: relative;
display: block;
width: 100%;
max-width: 100%;
overflow: auto;
flex: 1 1 auto;
&__container {
display: block;
}
&__item {
position: absolute;
right: 0;
left: 0;
}
}
</
style
>
src/components/VirtualScroll/src/index.less
已删除
100644 → 0
浏览文件 @
1c1755cf
.virtual-scroll {
position: relative;
display: block;
width: 100%;
max-width: 100%;
overflow: auto;
flex: 1 1 auto;
&__container {
display: block;
}
&__item {
position: absolute;
right: 0;
left: 0;
}
}
src/components/VirtualScroll/src/props.ts
已删除
100644 → 0
浏览文件 @
1c1755cf
// Helpers
import
type
{
PropType
}
from
'
vue
'
;
// Types
export
type
NumberOrNumberString
=
PropType
<
string
|
number
|
undefined
>
;
export
const
props
=
{
height
:
[
Number
,
String
]
as
NumberOrNumberString
,
maxHeight
:
[
Number
,
String
]
as
NumberOrNumberString
,
maxWidth
:
[
Number
,
String
]
as
NumberOrNumberString
,
minHeight
:
[
Number
,
String
]
as
NumberOrNumberString
,
minWidth
:
[
Number
,
String
]
as
NumberOrNumberString
,
width
:
[
Number
,
String
]
as
NumberOrNumberString
,
bench
:
{
type
:
[
Number
,
String
]
as
NumberOrNumberString
,
default
:
0
,
},
itemHeight
:
{
type
:
[
Number
,
String
]
as
NumberOrNumberString
,
required
:
true
,
},
items
:
{
type
:
Array
as
PropType
<
any
[]
>
,
default
:
()
=>
[],
},
};
src/components/registerGlobComp.ts
浏览文件 @
3b2c40be
...
...
@@ -11,7 +11,7 @@ import { App } from 'vue';
const
compList
=
[
Icon
,
AntButton
.
Group
];
export
function
registerGlobComp
(
app
:
App
)
{
compList
.
forEach
((
comp
:
any
)
=>
{
compList
.
forEach
((
comp
)
=>
{
app
.
component
(
comp
.
name
||
comp
.
displayName
,
comp
);
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录