什么是 vueisotope？
vueisotope 是一个用于Vue.js的砌墙式图库，基于 Isotope 库实现。 它提供了按钮筛选和搜索等功能，可以方便地在Vue框架内部使用。
安装和使用
安装 vueisotope 包非常简单，只需要在你的项目目录中运行以下命令：
npm install vueisotope然后导入 vueisotope 库并在你的 Vue 组件中使用。
-- -------------------- ---- ------- ---------- ---- -------------------------- ------------------- ------------- ------------- ------ -- ------ ------------- ---- ---------------------- --------------- -------------------- ------ ----------- -------- ------ - ----------------- ----------- - ---- ------------ ------ ------- - ----- -------------- ----------- - ----------------- ------------ -- ------ - ------ - ------ - - ---- -------------------- -- - ---- -------------------- -- - ---- -------------------- -- - ---- -------------------- -- -- - -- - ---------展开代码
上面的代码中，我们首先导入 vueisotope 中的 IsotopeContainer 和 IsotopeItem 组件，然后在 MyComponent 中注册它们。在 template 中，我们使用了 isotope-container 和 isotope-item 标签分别作为容器和元素的组件，循环渲染 items 中的每个元素，并在 img 标签中展示图片。
这是最简单的使用方法，你可以根据自己的具体需要进一步定制化设置，在下面会有更多相关的指导。
属性和方法
vueisotope 包含了多个可用的属性和方法，用于定制化设置和操作 DOM 元素，下面是它们的详细说明：
IsotopeContainer
tag：容器标签名称，类型String，默认为div。options：代表整个 Isotope 实例的选项对象，类型Object，默认为{itemSelector: '.isotope-item'}。参考 Isotope 选项文档 查看所有可用的选项。reLayout：触发重新排版的函数，可用于动态改变容器内元素的位置或大小后，手动调用该函数来重新排版，在大量数据渲染或元素变动频繁时提高性能，类型Function。
IsotopeItem
tag：元素标签名称，类型String，默认为div。filter：元素的过滤器字符串，类型String。hide：隐藏元素，类型Boolean，默认为false。stamp：将元素标记为不可移动的区域，类型Boolean或者{selector: 'foo'}可以是选择器字符串或者元素，参考 Isotope 空间文档。unStamp：取消标记，类型Boolean。isotopeId：元素的唯一标识，类型String，默认为空字符串或自动生成。
你可以通过以下方式来访问容器和元素实例：
this.$refs.container.isotope // 容器实例 this.$refs.item1.isotopeItem // 元素实例
配置示例
下面是一个更为复杂的示例，演示了如何使用 vueisotope 库实现一个按照项目分类筛选的动态列表。
-- -------------------- ---- ------- ---------- ---- -------------------------- ---- ---------------- ------- ---------------------------------- ------- -------------------------- ----------- ------- -------------------------------------- ------- -------------------------------------- ------- --------------------------------------- ------ ------------------ ---------------------- ------------- ------------- ------ -- ------------ ------------ ---------------------- ---- ---------------------- ---- ---------------- ------ ---------- ------- ----- --------- ------ ------ --------------- -------------------- ------ ----------- -------- ------ - ----------------- ----------- - ---- ------------ ------ ------- - ----- ------------------- ----------- - ----------------- ------------ -- ------ - ------ - ------------ - - ---- --------------------- ------ ----- --- ----- ----- --- ------- ----- -- - ---- --------------------- ------ ----- --- ----- ----- --- ------- ------- -- - ---- --------------------- ------ ----- --- ----- ----- --- ------- ------- -- - ---- --------------------- ------ ----- --- ----- ----- --- ------- -------- -- - ---- --------------------- ------ ----- --- ----- ----- --- ------- ----- -- - ---- --------------------- ------ ----- --- ----- ----- --- ------- ------- -- -- - -- -------- - ------------- - -------------------------------------------- ------- ----------- -- -- -- - ---------展开代码
上面的代码中，我们在一个复杂的列表容器中使用了 vueisotope，并添加了分类筛选功能。我们在 template 中创建了一个 div 父级标签，并在里面创建了筛选按钮和 isotope-container 标签，在后者内部循环渲染了每个 isotope-item 标签。
每个 isotope-item 中都包含一个图片标签和文本标签，用于展示对应的列表项和详细信息。我们在 data 中定义了 filterItems 数组，包含了每个列表项的属性，其中的 filter 字段用于定义分类信息，指定为 web、print、brand 或 motion 中的一个。
在 methods 中我们定义了一个 filter 函数，通过调用 isotope.arrange 方法并更新筛选参数来实现列表项的筛选。
结论
vueisotope 是一个非常优秀的用于 Vue.js 的砌墙式图库，它强大而简单易用，提供了多个可用的属性和方法，帮助你快速创建独特的自定义列表。本文提供了一些使用教程和示例，希望能帮助你更好地理解和使用该库，提高你的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63553
