Когда в предыдущем проекте еще использовался jQuery, нужно было сделать на странице плавающий эффект, похожий на снег. В то время использовался компонент с открытым исходным кодомjquery.let_it_snow.

В то время этот компонент поддерживал только одно изображение, а продукт требовал разных вещей, поэтому я разветвил его и добавил поддержку нескольких изображений.К счастью, код оригинального компонента был проще для понимания, поэтому я получилGitHub.com/Бобо-Чен/…

В этом году стек технологий начал мигрировать на Vue, и он не подходит для использования компонентов, которые полагаются на jQuery, поэтому для компонента let_it_snow и некоторого хорошего практического опыта, встречающегося в повседневном использовании, я написал компонент на основе Vue.vue-let-it-snow

Адрес опытаБета-версия IM. Чтобы иметь возможность /demo/v UE- сейчас...

Usage

Установить:

npm install --save vue-let-it-snow

существуетindex.jsПрименение в:

import Vue from 'vue'
import LetItSnow from 'vue-let-it-snow';

Vue.use(LetItSnow);

В компоненте, который вы хотите иметь флаттер, вы можете использовать его напрямую

<template>
	<let-it-snow
      v-bind="snowConf"
      :show="show"    
    ></let-it-snow>
<template> 

export default {
  name: 'app',
  data () {
  	return {
        snowConf: {
            windPower : 1,  
            speed : 3,
            count : 12,
            size : 10,
            opacity : 1,
            images: ['https://raw.githubusercontent.com/bob-chen/let_it_snow/master/demo/snow.png',
                    'https://raw.githubusercontent.com/bob-chen/let_it_snow/master/demo/sock.png',
                    'https://raw.githubusercontent.com/bob-chen/let_it_snow/master/demo/tree.png']
        },
        show: false      
    }
  },
  mounted () {
      this.show = true
    //   setTimeout( () => {
    //       this.show = false
    //   }, 5000)

    //   setTimeout( () => {
    //       this.show = true
    //   }, 10000)      
  }  
}

Общий эффект такой (гифка не такая гладкая):

Props

propsПримерно то же самое, что и jQuery-версия let_it_snow, с добавлением новой функции для управления отображением и скрытием.showи поддержка нескольких изображенийimages.

Props	Description	Default
speed	Скорость падения, необязательное значение от 0 до 5, чем больше, тем быстрее.	0
interaction	Может ли он взаимодействовать с упавшими вещами, обратите внимание, что если он может взаимодействовать, он заблокирует содержимое страницы.	false
size	Размер выпадающего предмета, опционально число 0-10+	2
count	Установите количество дисплеев.	200
opacity	Базовая прозрачность снега при имитации снега вместо изображения.	0
color	Цвет снега при имитации снега вместо картинки.	#ffffff
windPower	Скорость ветра, если вы хотите, чтобы ветер дул слева, установите положительное число и установите отрицательное число справа.	0
images	Список URL-адресов изображений для упавших вещей, если он установлен, не используйте имитацию снега.	[]
show	Используется для управления отображением или скрытием этого компонента.	false

разное

Это первый раз, когда я опубликовал этот единственный компонент Vue, и среда упаковки еще какое-то время металась. Есть много онлайн-статей. Лично рекомендуется сначала прочитать инструкции в документации Vue, чтобы избежать множества обходных путей:Packaging Vue Components for npm

Для упаковки компонентов используется накопительный пакет, который требует сборки версий umd, esm и min.Как правило, npm install в нашем проекте использует версию umd.

В документации Vue говорится только об упаковке, на самом деле нам также нужно использовать webpack для написания некоторых демонстраций, чтобы проверить доступность написанных компонентов. Я тут некоторое время ворочался, и позже будет удобнее подумать о том, чтобы сделать это йоменскими лесами.

Затем, следует ли использовать Async/Await, чтобы гарантировать, что изображение будет добавлено в Canvas после загрузки.

Ну вот и все :-)

Адрес гитхаба:GitHub.com/Bobo-Chen/vu…

разбитые мысли

Запишите некоторые мысли, напишите о науке, технике и гуманитарных науках, напишите о жизненном положении, напишите об опыте чтения, в основном о чепухе и сантиментах. Добро пожаловать, чтобы обратить внимание и общаться.

Официальный аккаунт WeChat: Поэма программиста и дистанция

Публичный идентификатор : MonkeyCoder-Life