Use Isotope (isótopo) en el proyecto en Vue2 o Vue3 para filtrar y clasificar el artefacto de diseño mágico, ¡la implementación exclusiva de toda la red!

prefacio

Isotope es una biblioteca de JavaScript para diseños de cuadrícula que lo ayuda a crear diseños de cuadrícula hermosos y dinámicos. Isotope admite efectos de filtrado, clasificación y animación, lo que puede hacer que su sitio web sea más animado e interesante. En la actualidad, no solo JQuery es compatible con Isotope, sino que también los marcos como Vue, React y Angular lo han encapsulado y convertido en componentes, que son convenientes para importar proyectos y usarlos. Sin embargo, con la actualización de las versiones del marco como Vue, muchos de estos componentes no se han seguido actualizando y no son compatibles con los marcos front-end de versión alta. Es decir, cuando los componentes se introdujeron hace muchos años en un proyecto de marco frontal de versión alta, habrá más o menos errores informados e inutilizables. Por lo tanto, UP aquí se da cuenta de cómo usar el artefacto Isotope (isótopo) en proyectos Vue2 o Vue3, que es bastante simple y se realiza exclusivamente en toda la red.

Isotope官网：Isotope · Filtra y ordena diseños mágicos

1. Código de ejemplo

1. Método de escritura Vue2.X

(1)/src/views/Example/Isotope/index_vue2.vue

<template>
  <div class="isotope_container">
    <div class="isotope_filter_navbar">
      <span data-filter="*" class="actived">All</span>
      <span data-filter=".Vue">Vue</span>
      <span data-filter=".React">React</span>
      <span data-filter=".Angular">Angular</span>
    </div>

    <div class="isotope_filter_grid">
      <div class="isotope_filter_grid_item Vue">
        <img src="/images/404.png" alt="" />
        <h1>HelloWorld! 1</h1>
      </div>
      <div class="isotope_filter_grid_item Vue">
        <img src="/images/404.png" alt="" />
        <h1>HelloWorld! 2</h1>
      </div>
      <div class="isotope_filter_grid_item Vue React">
        <img src="/images/404.png" alt="" /> 
        <h1>HelloWorld! 3</h1>
      </div>
      <div class="isotope_filter_grid_item Vue React">
        <img src="/images/404.png" alt="" />
        <h1>HelloWorld! 4</h1>
      </div>
      <div class="isotope_filter_grid_item React">
        <img src="/images/404.png" alt="" />
        <h1>HelloWorld! 5</h1>
      </div>
      <div class="isotope_filter_grid_item React">
        <img src="/images/404.png" alt="" />
        <h1>HelloWorld! 6</h1>
      </div>
      <div class="isotope_filter_grid_item Angular">
        <img src="/images/404.png" alt="" />
        <h1>HelloWorld! 7</h1>
      </div>
      <div class="isotope_filter_grid_item Angular">
        <img src="/images/404.png" alt="" />
        <h1>HelloWorld! 8</h1>
      </div>
    </div>
  </div>
</template>

<script>
import Isotope from 'isotope-layout'

export default {
  data() {
    return {
      // ...
    }
  },
  mounted() {
    this.handleInitIsotope()
  },
  methods: {
    /**
     * 初始化 Isotope 组件
     */
    async handleInitIsotope() {
      // 1.获取 isotope 导航条
      const navbar = await document.querySelector('.isotope_filter_navbar')

      // 2.实例化 isotope 对象
      const isotope = await new Isotope(
        '.isotope_filter_grid', // 容器
        {
          layoutMode: 'fitRows', // 布局模式
          itemSelector: '.isotope_filter_grid_item', // 元素
        }
      )

      // 3.为导航条注册点击事件
      navbar.addEventListener('click', (e) => {
        const { target } = e
        const filterOption = target.getAttribute('data-filter') // 筛选的类别
        if (filterOption) {
          // 给元素移除 actived 样式
          navbar
            .querySelectorAll('span')
            .forEach(
              (btn) => btn.classList.remove('actived')
            )

          // 给目标元素加上 actived 样式
          target.classList.add('actived')

          // 筛选
          isotope.arrange({ filter: filterOption })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.isotope_container {
  position: relative;

  .isotope_filter_navbar {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;

    span {
      display: inline-block;
      color: #999999;
      font-family: gotham-book;
      font-size: 24px;
      font-weight: bold;
      text-transform: uppercase;
      margin: 0px 30px 0 0;
      text-decoration: none;
      transition: all 0.4s ease-in-out;
      text-transform: capitalize; // 首字母大写
      cursor: pointer;

      &.actived {
        color: #000;
      }

      &:hover {
        color: #000;
      }
    }
  }

  .isotope_filter_grid {

    .isotope_filter_grid_item {
      display: flex;
      width: 25vw;
      height: 20vw;

      img {
        display: block;
        flex: 1;
        margin: 20px;
        object-fit: cover;
        background-color: #000;
      }

      h1 {
        display: grid;
        align-items: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        color: #fff;
        font-weight: lighter;
      }
    }
  }
}
</style>

2. Método de escritura Vue3.X

(1)/src/views/Example/Isotope/index_vue3.vue

<template>
  <div class="isotope_container">
    <div class="isotope_filter_navbar">
      <span data-filter="*" class="actived">All</span>
      <span data-filter=".Vue">Vue</span>
      <span data-filter=".React">React</span>
      <span data-filter=".Angular">Angular</span>
    </div>

    <div class="isotope_filter_grid">
      <div class="isotope_filter_grid_item Vue">
        <img src="/images/clients/404.png" alt="" />
        <h1>HelloWorld! 1</h1>
      </div>
      <div class="isotope_filter_grid_item Vue">
        <img src="/images/clients/404.png" alt="" />
        <h1>HelloWorld! 2</h1>
      </div>
      <div class="isotope_filter_grid_item Vue React">
        <img src="/images/clients/404.png" alt="" /> 
        <h1>HelloWorld! 3</h1>
      </div>
      <div class="isotope_filter_grid_item Vue React">
        <img src="/images/clients/404.png" alt="" />
        <h1>HelloWorld! 4</h1>
      </div>
      <div class="isotope_filter_grid_item React">
        <img src="/images/clients/404.png" alt="" />
        <h1>HelloWorld! 5</h1>
      </div>
      <div class="isotope_filter_grid_item React">
        <img src="/images/clients/404.png" alt="" />
        <h1>HelloWorld! 6</h1>
      </div>
      <div class="isotope_filter_grid_item Angular">
        <img src="/images/clients/404.png" alt="" />
        <h1>HelloWorld! 7</h1>
      </div>
      <div class="isotope_filter_grid_item Angular">
        <img src="/images/clients/404.png" alt="" />
        <h1>HelloWorld! 8</h1>
      </div>
    </div>
  </div>
</template>

<script>
import Isotope from 'isotope-layout'

export default {
  data() {
    return {
      // ...
    }
  },
  mounted() {
    this.handleInitIsotope()
  },
  methods: {
    async handleInitIsotope() {
      // 1.获取 isotope 导航条
      const navbar = await document.querySelector('.isotope_filter_navbar')
      console.log('navbar =>', navbar)

      // 2.实例化 isotope 对象
      const isotope = await new Isotope(
        '.isotope_filter_grid', // 容器
        {
          layoutMode: 'fitRows', // 布局模式
          itemSelector: '.isotope_filter_grid_item', // 元素
        }
      )
      console.log('isotope =>', isotope)

      // 3.为导航条注册点击事件
      navbar.addEventListener('click', (e) => {
        const { target } = e
        console.log('target =>', target)
        const filterOption = target.getAttribute('data-filter') // 筛选的类别
        if (filterOption) {
          // 给元素移除 actived 样式
          navbar
            .querySelectorAll('span')
            .forEach(
              (btn) => btn.classList.remove('actived')
            )

          // 给目标元素加上 actived 样式
          target.classList.add('actived')

          // 筛选
          isotope.arrange({ filter: filterOption })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.isotope_container {
  position: relative;

  .isotope_filter_navbar {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;

    span {
      display: inline-block;
      color: #999999;
      font-family: gotham-book;
      font-size: 24px;
      font-weight: bold;
      text-transform: uppercase;
      margin: 0px 30px 0 0;
      text-decoration: none;
      transition: all 0.4s ease-in-out;
      text-transform: capitalize; // 首字母大写
      cursor: pointer;

      &.actived {
        color: #000;
      }

      &:hover {
        color: #000;
      }
    }
  }

  .isotope_filter_grid {

    .isotope_filter_grid_item {
      position: relative;
      display: flex;
      width: 25vw;
      height: 25vw;
      text-align: center;

      img {
        display: block;
        flex: 1;
        margin: 20px;
        object-fit: cover;
        background-color: #000;
      }

      h1 {
        display: grid;
        align-items: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        color: #fff;
        font-weight: lighter;
      }
    }
  }
}
</style>

2. Efecto de operación

(1) Los efectos anteriores son los mismos