Vue-iclock NPM

vue-iclock

Introduction

:rocket: a cute clock components with vuejs

DEMO

Screenshot

Try to move the mouse to the face.

if you set type: 'scroll' and language: 'zh' or 'en', hoverAnimation: true

if you set type: 'text' and info = 'Itagn'

if you want to change the expression, and you should set emoji: 'angry' or 'jiong'

let the cute clock wear glasses, and you should set glasses: true

if you set display is invalid

Install

//  by npm
$ npm install vue-iclock --save
//  by cnpm
$ cnpm install vue-iclock --save
//  by yarn
$ yarn add vue-iclock --save

Usage

<template>
    <iclock :display="clock" id="clock"></iclock>
</template>
<script>
import { Iclock } from 'vue-iclock';
export default {
    components: {
        Iclock
    },
    data() {
        return {
            clock: {
                type: 'clock',
                className: '#clock',
                emoji: 'smile',
                hoverAnimation: true,
                glasses: false,
                scale: 1
            }
        }
    }
}
</script>
<style>
#clock{
    position: absolute;
    top: 0;
    left: 0;
}
</style>

Api

display

You can follow the instructions below to set

Type: Object
Default: {
    type: 'scroll',  //  value: 'scroll' || 'text' || 'clock'
    info: 'o w o',  //  if this.type is 'text', and show this.info
    className: '',  //  set className when more than one iclock component on the page
    scale: 1,  //  Magnification
    emoji: 'smile',  //  value: 'smile' || 'angry' || 'jiong'
    glasses: false,  //  Choose whether to wear glasses
    hoverAnimation: fasle,  //  Choose whether to open animation of clock
    language: 'zh',  //  language, value: 'zh' || 'en'
    dateColor: '#999',  //  set date-color
    fontColor: 'orange',  //  set font-color
    fontSize: '1.5rem',  //  set font-size
    fontStyle: 'Helvetica,"Microsoft YaHei"' // set font-family
}