我找到了个bug

[lijialong1313]

当同时引入MDUI（1.0.1）和mdui.editor（1.0.2）时，mdui的mdui-fab样式会被覆盖，这会导致显示在右下角的mdui-fab浮动按钮变为长方形。

修复方式： 找到mdui的 `/**

• =============================================================================
• **** Fab 浮动操作按钮 ****
• ============================================================================= */`

位置，然后引入一次即可

就是加载这段css（下面再发）

[lijialong1313]

/**

• =============================================================================
• **** Fab 浮动操作按钮 ****
• ============================================================================= / / 浮动操作按钮 / .mdui-fab { width: 56px; min-width: 56px; height: 56px; margin: auto; padding: 0 !important; overflow: hidden; font-size: 24px; line-height: normal !important; border-radius: 50%; -webkit-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); } .mdui-fab:hover { -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } .mdui-fab:active { -webkit-box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12); box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12); } .mdui-fab .mdui-icon { position: absolute; top: 0; left: 0; width: 24px; margin-top: 16px; margin-left: 16px; line-height: 24px; } / mini 型浮动操作按钮 / .mdui-fab-mini { width: 40px; min-width: 40px; height: 40px; } .mdui-fab-mini .mdui-icon { margin-top: 8px; margin-left: 8px; } / 固定到右下角的 FAB 按钮 / .mdui-fab-fixed, .mdui-fab-wrapper { position: fixed !important; / 手机平板上距离屏幕右下角 16px / right: 16px; bottom: 16px; } @media (min-width: 1024px) { .mdui-fab-fixed, .mdui-fab-wrapper { / 电脑上距离屏幕右下角 24px / right: 24px; bottom: 24px; } } / 含菜单的浮动操作按钮 / .mdui-fab-wrapper { position: relative; z-index: 4000; width: 56px; height: 56px; padding-top: 8px; text-align: center; } .mdui-fab-wrapper > .mdui-fab .mdui-icon:not(.mdui-fab-opened) { opacity: 1; -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } .mdui-fab-wrapper > .mdui-fab .mdui-icon.mdui-fab-opened { -webkit-transform: rotate(225deg); transform: rotate(225deg); opacity: 0; -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } .mdui-fab-wrapper > .mdui-fab.mdui-fab-opened .mdui-icon:not(.mdui-fab-opened) { -webkit-transform: rotate(225deg); transform: rotate(225deg); opacity: 0; } .mdui-fab-wrapper > .mdui-fab.mdui-fab-opened .mdui-icon.mdui-fab-opened { -webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 1; } .mdui-fab-wrapper > .mdui-fab-mini { margin-top: 8px; } .mdui-fab-wrapper .mdui-fab-dial { position: absolute; right: 0; bottom: 64px; left: 0; height: 0; text-align: center; visibility: visible; } .mdui-fab-wrapper .mdui-fab-dial .mdui-fab { margin: 8px 0; -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1); } .mdui-fab-wrapper .mdui-fab-dial.mdui-fab-dial-show .mdui-fab { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } / 添加类 .mdui-fab-hide 以动画的形式隐藏按钮 */ .mdui-fab, .mdui-fab-mini, .mdui-fab-wrapper { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.2s, -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.2s; will-change: transform; } .mdui-fab.mdui-fab-hide, .mdui-fab-mini.mdui-fab-hide, .mdui-fab-wrapper.mdui-fab-hide { -webkit-transform: scale(0) translateZ(0); transform: scale(0) translateZ(0); }