简介
mofron-layout-float是一款能够实现浮动布局效果的npm包，更重要的是它可以与React、Angular、Vue等前端框架无缝对接，对前端开发工程师来说十分方便。
它能够帮助我们实现一个优雅、灵活、可适应性强的页面布局，既不沾染太多的CSS，也能避免笨重的JS DOM操作。
安装
由于mofron-layout-float是一个npm包，因此我们需要先通过npm安装它。具体步骤如下：
npm install mofron-layout-float -S
使用方法
在React中使用
首先我们需要找到我们的布局容器，然后再进行布局。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
------ - ------------ --------- - ---- ----------------------
-- ------------
----- ----- - -
---------------- ----------
------- ---- ----- ------
-------- ------
-
----- --- ------- --------- -
-------- -
------ -
-----
--------- -----------
---- ------------- ---------- -- ----------------
-
-- -------
-------------
- ------ ---- ------- ---- ---- ------- --------- ---------- --
- ------ ---- ------- ---- ---- ------- --------- ----------- --
- ------ ---- ------- ---- ---- ------- --------- ------------- --
- ------ ---- ------- ---- ---- ------- --------- -------------- -
--
-
------
------
-
-
-在Angular中使用
我们需要在组件的ts文件中进行定义
-- -------------------- ---- -------
------ - ---------- -------------- ---------- ---------- - ---- ----------------
------ - ---------- ----------- - ---- ----------------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- -------------------- ---------- ------------- -
---------------------------------- - ------- ----- -- ------------- -----------
----------------- -
----- ------------- ----------- - --------------------------------
-- -------
------------------------------------ -
- ------ ---- ------- ---- ---- ------- --------- ---------- --
- ------ ---- ------- ---- ---- ------- --------- ----------- --
- ------ ---- ------- ---- ---- ------- --------- ------------- --
- ------ ---- ------- ---- ---- ------- --------- -------------- -
--
-
-<div #floatLayoutContainer style="background-color: #f5f5f5; border: 1px solid #ddd; padding: 30px"></div>
在Vue中使用
和Angular类似，我们需要在组件的js文件中进行定义
-- -------------------- ---- -------
------ - ---------- ----------- - ---- ----------------------
------ ------- -
----- ---------------
--------- -
----- ------------ - ---------------------
-- -------
------------------------------------ -
- ------ ---- ------- ---- ---- ------- --------- ---------- --
- ------ ---- ------- ---- ---- ------- --------- ----------- --
- ------ ---- ------- ---- ---- ------- --------- ------------- --
- ------ ---- ------- ---- ---- ------- --------- -------------- -
--
-
-<template>
<div>
<h1>Hello World!</h1>
<div ref="container" style="background-color: #f5f5f5; border: 1px solid #ddd; padding: 30px"></div>
</div>
</template>参数说明
const floatLayoutOptions = [
{
width: number, // 指定当前浮动元素的宽度，必填项
height: number, //指定当前浮动元素的高度，必填项
gap: string, // 指定当前浮动元素与下一个浮动元素的间距，可选项，默认为'0px'
position: string // 指定当前浮动元素的位置：'top-left', 'top-right', 'bottom-left', 'bottom-right'，可选项，默认为'top-left'
}
];示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
------ - ------------ --------- - ---- ----------------------
-- ------------
----- ----- - -
---------------- ----------
------- ---- ----- ------
-------- ------
-
----- --- ------- --------- -
-------- -
------ -
-----
--------- -----------
---- ------------- ---------- -- ----------------
-
-- -------
-------------
- ------ ---- ------- ---- ---- ------- --------- ---------- --
- ------ ---- ------- ---- ---- ------- --------- ----------- --
- ------ ---- ------- ---- ---- ------- --------- ------------- --
- ------ ---- ------- ---- ---- ------- --------- -------------- -
--
-
------
------
-
-
-
-------------------- --- ---------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600576bd81e8991b448eab28