vue-night-switch has the power to switch night/daytime. You can use it as vue-directive or vue-component.
Demo
Scan the qr-code using your phone
Or visit http://adoug.club:3000/vueNightSwitch
in your phone
Install
npm install vue-night-switch --save
Usage: as an directive
You can add v-night
to any HTML Element
CommonJs
You can use any build tool supports CommonJs
// register globallyvar nightDirective = require('vue-night-switch').NightDirectiveVue.use(nightDirective) // or for an single instancevar nightDirective = require('vue-night-switch').NightDirectivenew Vue({ directives: {nightDirective}})
ES6
ES6 module is also supported with build tools support babel
import {NightDirective} from 'vue-night-switch'
Usage: as an vue component
Just add tag <night-switch />
. It has default style.
CommonJs
var NightSwitch = Vue
ES6
Vue
Usage: Directly use
Include vue-night-switch.js in your JavaScript bundle or add it to your HTML page like this:
The file places in dist/vue-night-switch.js
Other
npm run build
: get bundle in /dist
built by webpack
npm run test
: get unit test result supported by karma
By the way, if you has interest, the project is developed by fis3
you can build and cat examples/demo1.html
by:
fis3 release -d ./dev
fis3 server start --www ./dev