ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.11k stars 14.64k forks source link

[bug report] customize the theme, and the drawer component pops up and flashes. #21123

Open contr0l opened 3 years ago

contr0l commented 3 years ago

Element UI version

2.15.3

OS/Browsers version

window 10/Google Chrome版本 91.0.4472.114(正式版本) (64 位)

Vue version

2.6.10

Reproduction Link

https://codepen.io/csk001/pen/KKmzgme

Steps to reproduce

codepen中无法自定义主题,可以访问链接http://117.78.27.224:8006/theme 通过引入scss的方式切换主题。 / 改变 icon 字体路径变量,必需 / $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index";

访问重现链接,点击第一行按钮中的【默认按钮】弹出抽屉,不正常弹出。使用默认主题可以正常弹出

What is Expected?

切换主题,drawer能正常弹出

What is actually happening?

弹出drawer时,组件会先弹出正常宽度,然后宽度变小,再显示正常宽度

element-bot commented 3 years ago

Translation of this issue:

Element UI version

2.15.3

OS/Browsers version

Windows 10 / Google Chrome version 91.0.4472.114 (official version) (64 bit)

Vue version

2.6.10

Reproduction Link

https://codepen.io/csk001/pen/KKmzgme

Steps to reproduce

You can't customize the theme in codepen. You can access the link http://117.78.27.224:8006/theme

SCSS is introduced to switch topics. /To change the icon font path variable, you must/

$--font-path: '~element-ui/lib/theme-chalk/fonts'; @import \"~element-ui/packages/theme-chalk/src/index\";

Visit the recurrence link and click the [default button] in the first line to pop up the drawer, which will pop up abnormally. The default theme will pop up normally

What is Expected?

Switch the theme, and the drawer will pop up normally

What is actually happening?

When the drawer is ejected, the component will first eject the normal width, then the width will decrease, and then the normal width will be displayed