vue3-skycons

1.0.3 • Public • Published

Installation

NPM

npm install --save vue3-skycons

Examples

Using Component

Vue 3
<template>
   <skycon condition="rain" size="128" color="orangered" paused/>
</template>
<script setup>
import Skycon from "vue3-skycons";
</script>
Vue 2
<template>
    <skycon condition="rain" size="128" color="orangered" paused/>
</template>

<script>
import Skycon from "vue3-skycons";

export default {
  components: {
    Skycon
  }
}
</script>

vue3-skycons Attributes

Name Description Type Default
condition Weather condition string
size Icon size string/number 64
color Icon color string black
paused Start with paused animation boolean false
speed The animation speed string/number 1

Event example

<template>
  <skycon condition="snow" size="128" paused @load="onLoad" />
</template>

<script setup>
import Skycon from "vue3-skycons";

const onLoad = (player) => {
      console.log("loaded");
      setInterval(() => {
        if (player.paused) {
          player.play();
        } else {
          player.pause();
        }
      }, 1000);
    }
</scrip>

Animation Speed

The speed attributes is a decimal number to control the animation speed. It is a multiplyer to the original speed. 1 means the normal speed. 0.5 means half the normal speed. 2 means twice as fast as the normal speed.

<template>
  <skycon condition="wind" size="128" speed="1" />
  <skycon condition="wind" size="128" speed="3" />
  <skycon condition="wind" size="128" speed="0.5" />
</template>

<script setup>
import Skycon from "vue3-skycons";
</script>

Readme

Keywords

Package Sidebar

Install

npm i vue3-skycons

Weekly Downloads

4

Version

1.0.3

License

ISC

Unpacked Size

38.1 kB

Total Files

6

Last publish

Collaborators

  • jinhuan