Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
weixin_54851307
vue-vben-admin
提交
33550662
V
vue-vben-admin
项目概览
weixin_54851307
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
1
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,发现更多精彩内容 >>
提交
33550662
编写于
10月 17, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: fix expandTransition
上级
a0b09e74
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
120 addition
and
37 deletion
+120
-37
.vscode/settings.json
.vscode/settings.json
+11
-3
src/components/Transition/index.ts
src/components/Transition/index.ts
+12
-9
src/components/Transition/src/CollapseTransition.tsx
src/components/Transition/src/CollapseTransition.tsx
+8
-21
src/components/Transition/src/ExpandTransition.ts
src/components/Transition/src/ExpandTransition.ts
+4
-4
src/components/Transition/src/ExpandTransition.vue
src/components/Transition/src/ExpandTransition.vue
+85
-0
未找到文件。
.vscode/settings.json
浏览文件 @
33550662
...
@@ -116,15 +116,21 @@
...
@@ -116,15 +116,21 @@
//
================
Eslint
===================
//
================
Eslint
===================
//
===========================================
//
===========================================
"eslint.enable"
:
true
,
//
是否开启eslint
"eslint.enable"
:
true
,
//
是否开启eslint
"eslint.options"
:
{
"eslint.options"
:
{
//
配置
//
配置
"plugins"
:
[
"html"
,
"vue"
,
"javascript"
,
"jsx"
,
"typescript"
]
"plugins"
:
[
"html"
,
"vue"
,
"javascript"
,
"jsx"
,
"typescript"
]
},
},
"eslint.autoFixOnSave"
:
true
,
//
保存自动格式化
"eslint.autoFixOnSave"
:
true
,
//
保存自动格式化
//
===========================================
//
===========================================
//
================
Vetur
====================
//
================
Vetur
====================
//
===========================================
//
===========================================
"vetur.experimental.templateInterpolationService"
:
true
,
"vetur.format.options.tabSize"
:
2
,
"vetur.format.options.tabSize"
:
2
,
"vetur.format.defaultFormatter.html"
:
"js-beautify-html"
,
//
使用js-beautify-html格式化
"vetur.format.defaultFormatter.html"
:
"js-beautify-html"
,
//
使用js-beautify-html格式化
"vetur.format.defaultFormatter.scss"
:
"prettier"
,
//
使用js-beautify-html格式化
"vetur.format.defaultFormatter.scss"
:
"prettier"
,
//
使用js-beautify-html格式化
...
@@ -244,7 +250,9 @@
...
@@ -244,7 +250,9 @@
"[markdown]"
:
{
"[markdown]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
},
},
"cSpell.words"
:
[
"yfboilerplate"
],
"cSpell.words"
:
[
"yfboilerplate"
],
"editor.codeActionsOnSave"
:
{
"editor.codeActionsOnSave"
:
{
"source.fixAll.eslint"
:
true
"source.fixAll.eslint"
:
true
}
}
...
...
src/components/Transition/index.ts
浏览文件 @
33550662
import
{
//
import {
// createSimpleTransition,
//
// createSimpleTransition,
createJavascriptTransition
,
//
createJavascriptTransition,
}
from
'
./src/CreateTransition
'
;
//
} from './src/CreateTransition';
import
ExpandTransitionGenerator
from
'
./src/ExpandTransition
'
;
//
import ExpandTransitionGenerator from './src/ExpandTransition';
export
{
default
as
CollapseTransition
}
from
'
./src/CollapseTransition
'
;
export
{
default
as
CollapseTransition
}
from
'
./src/CollapseTransition
'
;
// export { default as CollapseTransition } from './src/CollapseTransition';
// export const FadeTransition = createSimpleTransition('fade-transition');
// export const FadeTransition = createSimpleTransition('fade-transition');
// export const ScaleTransition = createSimpleTransition('scale-transition');
// export const ScaleTransition = createSimpleTransition('scale-transition');
...
@@ -20,12 +21,14 @@ export { default as CollapseTransition } from './src/CollapseTransition';
...
@@ -20,12 +21,14 @@ export { default as CollapseTransition } from './src/CollapseTransition';
// export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition');
// export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition');
// Javascript transitions
// Javascript transitions
export
const
ExpandTransition
=
createJavascriptTransition
(
//
export const ExpandTransition = createJavascriptTransition(
'
expand-transition
'
,
//
'expand-transition',
ExpandTransitionGenerator
()
//
ExpandTransitionGenerator()
);
//
);
// export const ExpandXTransition = createJavascriptTransition(
// export const ExpandXTransition = createJavascriptTransition(
// 'expand-x-transition',
// 'expand-x-transition',
// ExpandTransitionGenerator('', true)
// ExpandTransitionGenerator('', true)
// );
// );
export
{
default
as
ExpandTransition
}
from
'
./src/ExpandTransition.vue
'
;
src/components/Transition/src/CollapseTransition.tsx
浏览文件 @
33550662
import
type
{
PropType
}
from
'
vue
'
;
// collapse 展开折叠
// collapse 展开折叠
import
{
defineComponent
}
from
'
vue
'
;
import
{
defineComponent
}
from
'
vue
'
;
import
{
getSlot
}
from
'
/@/utils/helper/tsxHelper
'
;
import
{
getSlot
}
from
'
/@/utils/helper/tsxHelper
'
;
import
{
createJavascriptTransition
}
from
'
./CreateTransition
'
;
//
import { createJavascriptTransition } from './CreateTransition';
import
ExpandTransition
Generator
from
'
./ExpandTransition
'
;
import
ExpandTransition
from
'
./ExpandTransition.vue
'
;
export
const
ExpandTransition
=
createJavascriptTransition
(
//
export const ExpandTransition = createJavascriptTransition(
'
expand-transition
'
,
//
'expand-transition',
ExpandTransitionGenerator
()
//
ExpandTransitionGenerator()
);
//
);
export
default
defineComponent
({
export
default
defineComponent
({
name
:
'
CollapseTransition
'
,
name
:
'
CollapseTransition
'
,
components
:
{
setup
(
_
,
{
slots
})
{
ExpandTransition
,
return
()
=>
<
ExpandTransition
>
{
()
=>
getSlot
(
slots
)
}
</
ExpandTransition
>;
},
props
:
{
// 是否打开折叠功能
enable
:
{
type
:
Boolean
as
PropType
<
boolean
>
,
default
:
true
,
},
},
setup
(
props
,
{
slots
})
{
return
()
=>
props
.
enable
?
<
ExpandTransition
>
{
()
=>
getSlot
(
slots
)
}
</
ExpandTransition
>
:
getSlot
(
slots
);
},
},
});
});
src/components/Transition/src/ExpandTransition.ts
浏览文件 @
33550662
...
@@ -34,9 +34,9 @@ export default function (expandedParentClass = '', x = false) {
...
@@ -34,9 +34,9 @@ export default function (expandedParentClass = '', x = false) {
el
.
style
.
setProperty
(
'
transition
'
,
'
none
'
,
'
important
'
);
el
.
style
.
setProperty
(
'
transition
'
,
'
none
'
,
'
important
'
);
el
.
style
.
overflow
=
'
hidden
'
;
el
.
style
.
overflow
=
'
hidden
'
;
const
offset
=
`
${
el
[
offsetProperty
]}
px`
;
//
const offset = `${el[offsetProperty]}px`;
el
.
style
[
sizeProperty
]
=
'
0
'
;
//
el.style[sizeProperty] = '0';
void
el
.
offsetHeight
;
// force reflow
void
el
.
offsetHeight
;
// force reflow
...
@@ -47,7 +47,7 @@ export default function (expandedParentClass = '', x = false) {
...
@@ -47,7 +47,7 @@ export default function (expandedParentClass = '', x = false) {
}
}
requestAnimationFrame
(()
=>
{
requestAnimationFrame
(()
=>
{
el
.
style
[
sizeProperty
]
=
offset
;
//
el.style[sizeProperty] = offset;
});
});
},
},
...
@@ -84,6 +84,6 @@ export default function (expandedParentClass = '', x = false) {
...
@@ -84,6 +84,6 @@ export default function (expandedParentClass = '', x = false) {
const
size
=
el
.
_initialStyle
[
sizeProperty
];
const
size
=
el
.
_initialStyle
[
sizeProperty
];
el
.
style
.
overflow
=
el
.
_initialStyle
.
overflow
!
;
el
.
style
.
overflow
=
el
.
_initialStyle
.
overflow
!
;
if
(
size
!=
null
)
el
.
style
[
sizeProperty
]
=
size
;
if
(
size
!=
null
)
el
.
style
[
sizeProperty
]
=
size
;
delete
(
el
as
any
).
_initialStyle
;
Reflect
.
deleteProperty
(
el
,
'
_initialStyle
'
)
;
}
}
}
}
src/components/Transition/src/ExpandTransition.vue
0 → 100644
浏览文件 @
33550662
<
template
>
<transition
v-on=
"on"
>
<slot></slot>
</transition>
</
template
>
<
script
lang=
"ts"
>
import
{
addClass
,
removeClass
}
from
'
/@/utils/domUtils
'
;
import
{
defineComponent
}
from
'
vue
'
;
export
default
defineComponent
({
name
:
'
CollapseTransition
'
,
setup
()
{
return
{
on
:
{
beforeEnter
(
el
:
any
)
{
addClass
(
el
,
'
collapse-transition
'
);
if
(
!
el
.
dataset
)
el
.
dataset
=
{};
el
.
dataset
.
oldPaddingTop
=
el
.
style
.
paddingTop
;
el
.
dataset
.
oldPaddingBottom
=
el
.
style
.
paddingBottom
;
el
.
style
.
height
=
'
0
'
;
el
.
style
.
paddingTop
=
0
;
el
.
style
.
paddingBottom
=
0
;
},
enter
(
el
:
any
)
{
el
.
dataset
.
oldOverflow
=
el
.
style
.
overflow
;
if
(
el
.
scrollHeight
!==
0
)
{
el
.
style
.
height
=
el
.
scrollHeight
+
'
px
'
;
el
.
style
.
paddingTop
=
el
.
dataset
.
oldPaddingTop
;
el
.
style
.
paddingBottom
=
el
.
dataset
.
oldPaddingBottom
;
}
else
{
el
.
style
.
height
=
''
;
el
.
style
.
paddingTop
=
el
.
dataset
.
oldPaddingTop
;
el
.
style
.
paddingBottom
=
el
.
dataset
.
oldPaddingBottom
;
}
el
.
style
.
overflow
=
'
hidden
'
;
},
afterEnter
(
el
:
any
)
{
// for safari: remove class then reset height is necessary
removeClass
(
el
,
'
collapse-transition
'
);
el
.
style
.
height
=
''
;
el
.
style
.
overflow
=
el
.
dataset
.
oldOverflow
;
},
beforeLeave
(
el
:
any
)
{
if
(
!
el
.
dataset
)
el
.
dataset
=
{};
el
.
dataset
.
oldPaddingTop
=
el
.
style
.
paddingTop
;
el
.
dataset
.
oldPaddingBottom
=
el
.
style
.
paddingBottom
;
el
.
dataset
.
oldOverflow
=
el
.
style
.
overflow
;
el
.
style
.
height
=
el
.
scrollHeight
+
'
px
'
;
el
.
style
.
overflow
=
'
hidden
'
;
},
leave
(
el
:
any
)
{
if
(
el
.
scrollHeight
!==
0
)
{
// for safari: add class after set height, or it will jump to zero height suddenly, weired
addClass
(
el
,
'
collapse-transition
'
);
el
.
style
.
height
=
0
;
el
.
style
.
paddingTop
=
0
;
el
.
style
.
paddingBottom
=
0
;
}
},
afterLeave
(
el
:
any
)
{
removeClass
(
el
,
'
collapse-transition
'
);
el
.
style
.
height
=
''
;
el
.
style
.
overflow
=
el
.
dataset
.
oldOverflow
;
el
.
style
.
paddingTop
=
el
.
dataset
.
oldPaddingTop
;
el
.
style
.
paddingBottom
=
el
.
dataset
.
oldPaddingBottom
;
},
},
};
},
});
</
script
>
<
style
lang=
"less"
scoped
>
.collapse-transition {
transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out,
0.2s padding-bottom ease-in-out;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录