Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
33550662
提交
33550662
authored
10月 17, 2020
作者:
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: fix expandTransition
上级
a0b09e74
隐藏空白字符变更
内嵌
并排
正在显示
5 个修改的文件
包含
120 行增加
和
37 行删除
+120
-37
settings.json
.vscode/settings.json
+11
-3
index.ts
src/components/Transition/index.ts
+12
-9
CollapseTransition.tsx
src/components/Transition/src/CollapseTransition.tsx
+8
-21
ExpandTransition.ts
src/components/Transition/src/ExpandTransition.ts
+4
-4
ExpandTransition.vue
src/components/Transition/src/ExpandTransition.vue
+85
-0
没有找到文件。
.vscode/settings.json
浏览文件 @
33550662
...
...
@@ -116,15 +116,21 @@
//
================
Eslint
===================
//
===========================================
"eslint.enable"
:
true
,
//
是否开启eslint
"eslint.options"
:
{
//
配置
"plugins"
:
[
"html"
,
"vue"
,
"javascript"
,
"jsx"
,
"typescript"
]
"plugins"
:
[
"html"
,
"vue"
,
"javascript"
,
"jsx"
,
"typescript"
]
},
"eslint.autoFixOnSave"
:
true
,
//
保存自动格式化
//
===========================================
//
================
Vetur
====================
//
===========================================
"vetur.experimental.templateInterpolationService"
:
true
,
"vetur.format.options.tabSize"
:
2
,
"vetur.format.defaultFormatter.html"
:
"js-beautify-html"
,
//
使用js-beautify-html格式化
"vetur.format.defaultFormatter.scss"
:
"prettier"
,
//
使用js-beautify-html格式化
...
...
@@ -244,7 +250,9 @@
"[markdown]"
:
{
"editor.defaultFormatter"
:
"esbenp.prettier-vscode"
},
"cSpell.words"
:
[
"yfboilerplate"
],
"cSpell.words"
:
[
"yfboilerplate"
],
"editor.codeActionsOnSave"
:
{
"source.fixAll.eslint"
:
true
}
...
...
src/components/Transition/index.ts
浏览文件 @
33550662
import
{
// createSimpleTransition,
createJavascriptTransition
,
}
from
'./src/CreateTransition'
;
//
import {
//
// createSimpleTransition,
//
createJavascriptTransition,
//
} 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 const FadeTransition = createSimpleTransition('fade-transition');
// export const ScaleTransition = createSimpleTransition('scale-transition');
...
...
@@ -20,12 +21,14 @@ export { default as CollapseTransition } from './src/CollapseTransition';
// export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition');
// Javascript transitions
export
const
ExpandTransition
=
createJavascriptTransition
(
'expand-transition'
,
ExpandTransitionGenerator
()
);
//
export const ExpandTransition = createJavascriptTransition(
//
'expand-transition',
//
ExpandTransitionGenerator()
//
);
// export const ExpandXTransition = createJavascriptTransition(
// 'expand-x-transition',
// ExpandTransitionGenerator('', true)
// );
export
{
default
as
ExpandTransition
}
from
'./src/ExpandTransition.vue'
;
src/components/Transition/src/CollapseTransition.tsx
浏览文件 @
33550662
import
type
{
PropType
}
from
'vue'
;
// collapse 展开折叠
import
{
defineComponent
}
from
'vue'
;
import
{
getSlot
}
from
'/@/utils/helper/tsxHelper'
;
import
{
createJavascriptTransition
}
from
'./CreateTransition'
;
import
ExpandTransition
Generator
from
'./ExpandTransition
'
;
//
import { createJavascriptTransition } from './CreateTransition';
import
ExpandTransition
from
'./ExpandTransition.vue
'
;
export
const
ExpandTransition
=
createJavascriptTransition
(
'expand-transition'
,
ExpandTransitionGenerator
()
);
//
export const ExpandTransition = createJavascriptTransition(
//
'expand-transition',
//
ExpandTransitionGenerator()
//
);
export
default
defineComponent
({
name
:
'CollapseTransition'
,
components
:
{
ExpandTransition
,
},
props
:
{
// 是否打开折叠功能
enable
:
{
type
:
Boolean
as
PropType
<
boolean
>
,
default
:
true
,
},
},
setup
(
props
,
{
slots
})
{
return
()
=>
props
.
enable
?
<
ExpandTransition
>
{
()
=>
getSlot
(
slots
)
}
</
ExpandTransition
>
:
getSlot
(
slots
);
setup
(
_
,
{
slots
})
{
return
()
=>
<
ExpandTransition
>
{
()
=>
getSlot
(
slots
)
}
</
ExpandTransition
>;
},
});
src/components/Transition/src/ExpandTransition.ts
浏览文件 @
33550662
...
...
@@ -34,9 +34,9 @@ export default function (expandedParentClass = '', x = false) {
el
.
style
.
setProperty
(
'transition'
,
'none'
,
'important'
);
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
...
...
@@ -47,7 +47,7 @@ export default function (expandedParentClass = '', x = false) {
}
requestAnimationFrame
(()
=>
{
el
.
style
[
sizeProperty
]
=
offset
;
//
el.style[sizeProperty] = offset;
});
},
...
...
@@ -84,6 +84,6 @@ export default function (expandedParentClass = '', x = false) {
const
size
=
el
.
_initialStyle
[
sizeProperty
];
el
.
style
.
overflow
=
el
.
_initialStyle
.
overflow
!
;
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
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论