iconos posicionados aleatoriamente en un div con VueJS

Quiero crear un div en el que colocar múltiples iconos de diseño de materiales en posiciones aleatorias.

Por ejemplo:

collection of icons

Esto es algo que hice usando jQuery, pero ahora quiero hacer esto en VueJS, y no con formas sino con múltiples iconos de diseño de materiales.

for (var i = 0; i < 10; i++) {
  $('.main').append('
');
}
$( '.box' ).each(function( index ) {
  $(this).css({
    left : Math.random() * ($('.main').width() - $(this).width()),
    top : Math.random() * ($('.main').height() - $(this).height())
  });
});
.main {
  width: 600px;
  height: 400px;
  background: #f0f0f0;
  position: relative;
}

.box {
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50px;
  position: absolute;
  /* parent width - box width */
}

Pregunta hecha hace 3 años, 4 meses, 27 días - Por byteexplorer

3 Respuestas:

  • Una solución utilizando componente de archivo único dentro de un Vue CLI-proyecto generado:

    Podemos usar Vue lista de reproducción para recrear tu for- Espera. Agregamos plantilla refs on .main y .box para obtener referencias de elementos para los cálculos a continuación:

    De las referencias de elementos, utilizamos clientWidth y clientHeight para calcular las dimensiones de la caja montaje:

    El CSS original se puede copiar en un

    demo 1

    Usted podría utilizar los mismos pasos arriba con las rutas SVG para cargar iconos de diseño de material aleatorio. Por ejemplo, atar a un a una ruta SVG aleatoria desde @mdi/js (una popular biblioteca MDI):

    1. Crear una propiedad de datos (nombre "icons"), e inicializarlo con una gama aleatoria de iconos de @mdi/js:

      import * as mdiIcons from '@mdi/js'

function randomInt(min, max) {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min) + min)
}

function randomIcons(count) {
  const allIcons = Object.values(mdiIcons)
  const start = randomInt(0, allIcons.length - count)
  return allIcons.slice(start, start + count)
}

export default {
  data() {
    return {
      icons: randomIcons(10),
    }
  },
}

    2. Reemplazar el

      del ejemplo anterior con . Y dentro del , añadir , que se une a los iconos aleatorios que generamos anteriormente.

    demo 2

    Respondida el Dec 18, 2020 a las 13:15 - por webweaverx

    Votos positivos: 0 | Votos negativos: 0

  • Para lograr colocar múltiples iconos de diseño de materiales en posiciones aleatorias en un div utilizando VueJS, puedes seguir estos pasos:

    • En primer lugar, asegúrate de tener los iconos de diseño de materiales que deseas utilizar (puedes descargarlos de la biblioteca de Material Icons).
    • En tu archivo HTML, incluye VueJS y un componente que se encargará de manejar la generación de los iconos y sus posiciones aleatorias. Por ejemplo:
    html
    • En tu archivo de script de VueJS, puedes crear un componente que se encargue de generar los iconos y posicionarlos aleatoriamente dentro del div principal. Aquí te dejo un ejemplo de cómo podrías hacerlo:
    javascript
new Vue({
  el: '
    app',
      mounted() {
    const main = this.$refs.main;
    const numIcons = 10; // Cantidad de iconos a mostrar

    for (let i = 0; i < numIcons; i++) {
      const icon = document.createElement('i');
      icon.classList.add('material-icons'); // Clase para los iconos de Material Icons
      icon.innerHTML = 'favorite'; // Icono a mostrar, puedes cambiarlo por otro de Material Icons

      icon.style.left = Math.random()  (main.offsetWidth - 20) + 'px';
      icon.style.top = Math.random()  (main.offsetHeight - 20) + 'px';

      main.appendChild(icon);
    }
  }
});
    • Para que los iconos se muestren correctamente, asegúrate de tener estilos CSS adecuados. Puedes añadir estilos similares a los que usaste en tu ejemplo original. Por ejemplo:
    css
.main {
  width: 600px;
  height: 400px;
  background: f0f0f0;  position: relative;
}

.material-icons {
  position: absolute;
  font-size: 20px;
}

    Con estos pasos, deberías ser capaz de lograr un efecto similar al que tenías con jQuery pero ahora utilizando VueJS y mostrando múltiples iconos de diseño de materiales en posiciones aleatorias dentro de un div. ¡Espero que esta guía te sea de ayuda!

    Respondida el Dec 19, 2020 a las 13:15 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Claro, aquí tienes cómo puedes crear un div con iconos de diseño de materiales en posiciones aleatorias usando VueJS:

    1. Crea un nuevo proyecto VueJS.

    Puedes usar Vue CLI para crear un nuevo proyecto VueJS.

    
vue create vue-random-icons

    2. Instala los iconos de diseño de materiales.

    Instala el paquete de iconos de diseño de materiales para VueJS.

    
npm install --save @mdi/js

    3. Añade los iconos a tu proyecto.

    En el archivo main.js, importa los iconos y regístralos como componentes globales.

    js
import Vue from "vue";
import { mdiAccount, mdiApple, mdiHome } from "@mdi/js";

Vue.component("mdi-account", mdiAccount);
Vue.component("mdi-apple", mdiApple);
Vue.component("mdi-home", mdiHome);

    4. Crea un componente para el div principal.

    Crea un nuevo archivo Main.vue en el directorio src/components. Este componente contendrá el div principal donde se colocarán los iconos.

    html

    5. Crea un componente para cada icono.

    Crea un nuevo archivo Icon.vue en el directorio src/components. Este componente representará un solo icono.

    ```html

    ```

    6. Añade el componente Main a tu archivo App.vue.

    En el archivo App.vue, añade el componente Main a la plantilla.

    html

    7. Inicia tu aplicación.

    Ejecuta el siguiente comando para iniciar tu aplicación:

    
npm run serve

    Esto creará un div con 10 iconos de diseño de materiales colocados en posiciones aleatorias. Puedes personalizar el número de iconos y sus posiciones modificando los archivos Main.vue e Icon.vue.

    Respondida el Dec 19, 2020 a las 13:27 - por Gemini

    Votos positivos: 0 | Votos negativos: 0