什么是 wovue-cols
wovue-cols 是一个 Vue.js 组件，可以帮助开发者快速地创建响应式的栅格布局。开发者可以通过简单的配置来自定义栅格布局，同时也可以使用预设的样式。
安装
npm install wovue-cols
使用
在你的 Vue.js 项目中引入 wovue-cols 组件：
import WoVueCols from 'wovue-cols';
然后在你的 Vue 组件中使用 WoVueCols：
-- -------------------- ---- -------
----------
-----
---------- -------------------
------------ -------
------------ -------
------------ -------
------------ -------
------------
------
-----------
--------
------ --------- ---- -------------
------ ------- -
----------- -
---------
--
------ -
------ -
--------- -
-
----- ---
-------- ----------
--
-
----- --
-------- ----------
--
-
----- --
-------- ----------
--
-
----- --
-------- ----------
--
-
----- --
-------- ----------
--
-
----- --
-------- ----------
-
-
-
-
-
---------在这个例子中，myConfig 中定义了栅格布局的配置信息：第一个 content 占据了 12 个栅格，第二和第三个 content 各占据了 6 个栅格，最后三个 content 各占据了 4 个栅格。同时，每个 content 上也设置了不同的类名，以便更好地调整其样式。
响应式
wovue-cols 组件支持响应式，你可以为不同的设备设置不同的栅格布局配置。例如，你想让在手机屏幕上每行只显示一个 content，而在台式机或笔记本电脑上每行可以显示多个 content。你可以针对不同尺寸的屏幕设置不同的栅格布局：
-- -------------------- ---- -------
----------
-----
---------- -------------------
------------ -------
------------ -------
------------ -------
------------ -------
------------
------
-----------
--------
------ --------- ---- -------------
------ ------- -
----------- -
---------
--
------ -
------ -
--------- -
-
----- ---
-------- -----------
--- ------ -- -------- ------------
--- ------ -- -------- ------------
--- ------ -- -------- -----------
--
-
----- ---
-------- -----------
--- ------ -- -------- ------------
--- ------ -- -------- ------------
--- ------ -- -------- -----------
--
-
----- ---
-------- -----------
--- ------ -- -------- ------------
--- ------ -- -------- ------------
--- ------ -- -------- -----------
--
-
----- ---
-------- -----------
--- ------ -- -------- ------------
--- ------ -- -------- ------------
--- ------ -- -------- -----------
-
-
-
-
-
---------在这个例子中，我们为每个 content 都设置了栅格布局的配置，并分别为不同的设备设置了不同的配置。这将使得栅格布局在不同的设备上自适应地调整自己的表现。
预设样式
wovue-cols 同样也提供了预设的样式，可以直接使用：
-- -------------------- ---- -------
----------
-----
---------- ------------------ ------------
------------ -------
------------ -------
------------ -------
------------
------
-----------
--------
------ --------- ---- -------------
------ ------- -
----------- -
---------
--
------ -
------ -
--------- -
-
----- -
--
-
----- -
--
-
----- -
-
-
-
-
-
---------在这个例子中，我们为 WoVueCols 添加了 preset 属性，并将其设置为了 'wo'，表示使用 wovue-cols 预设的样式。我们不再需要为每个 content 单独设置类名， wovue-cols 会自动地为他们应用样式。
总结
wovue-cols 是一个帮助开发者快速创建响应式栅格布局的 Vue.js 组件。它提供了简单的配置方式，可以让开发者定制自己的栅格布局，同时也提供了预设的样式，方便快速地创建布局。开发者还可以为不同的设备设置不同的栅格布局配置，以使布局在不同的设备上自适应调整自己的表现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671138dd3466f61ffe533