├── .eslintrc
├── .gitignore
├── .npmignore
├── example
├── index.js
└── index.html
├── .babelrc
├── cooking.example.conf.js
├── cooking.conf.js
├── package.json
├── src
├── index.js
└── indicator.vue
└── README.md
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["vue"],
3 | "extends": ["elemefe"]
4 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .idea
3 | .DS_Store
4 | npm-debug.log
5 | dist/
6 | lib/
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist
4 | coverage
5 | .idea
6 | .jshintrc
7 | npm-debug.log
8 | src/
9 | example/
10 | cooking.config.js
11 | cooking.example.config.js
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import Indicator from '../src/index.js';
2 | let btn = document.getElementById('button');
3 | btn.addEventListener('click', () => {
4 | Indicator.open('加载中...');
5 | setTimeout(() => Indicator.close(), 2000);
6 | });
7 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "stage-0", "stage-2"],
3 | "plugins": [
4 | "transform-runtime",
5 | ["component", [{
6 | "libraryName": "mint-spinner",
7 | "style": true
8 | }]
9 | ]
10 | ],
11 | "comments": false
12 | }
--------------------------------------------------------------------------------
/cooking.example.conf.js:
--------------------------------------------------------------------------------
1 | var cooking = require('cooking');
2 |
3 | cooking.set({
4 | entry: {
5 | build: './example/index.js'
6 | },
7 | dist: './example/dist',
8 | publicPath: '/example/dist/',
9 | template: false,
10 |
11 | devServer: false,
12 |
13 | extends: ['vue2', 'lint', 'saladcss']
14 | });
15 |
16 | cooking.add('externals.vue', 'Vue');
17 |
18 | module.exports = cooking.resolve();
--------------------------------------------------------------------------------
/cooking.conf.js:
--------------------------------------------------------------------------------
1 | var cooking = require('cooking');
2 |
3 | cooking.set({
4 | entry: {
5 | index: './src/index.js'
6 | },
7 | dist: './lib',
8 | publicPath: '/lib/',
9 | template: false,
10 |
11 | devServer: false,
12 | format: 'umd',
13 | moduleName: 'VueIndicator',
14 | extractCSS: 'index.css',
15 |
16 | extends: ['vue2', 'lint', 'saladcss']
17 | });
18 |
19 | cooking.add('externals.vue', 'vue');
20 |
21 | module.exports = cooking.resolve();
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
15 | vue-indicator examples
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mint-indicator",
3 | "version": "2.0.0",
4 | "description": "A mobile indicator component for vue.js",
5 | "main": "lib/index.js",
6 | "scripts": {
7 | "dev": "cooking watch -c cooking.conf.js,cooking.example.conf.js",
8 | "build": "cooking build",
9 | "prepublish": "npm run build"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "git+ssh://git@github.com:mint-ui/mint-indicator.git"
14 | },
15 | "author": "yi.shyang@ele.me",
16 | "license": "MIT",
17 | "dependencies": {
18 | "mint-spinner": "^2.0.0"
19 | },
20 | "bugs": {
21 | "url": "https://github.com/mint-ui/mint-indicator/issues"
22 | },
23 | "homepage": "https://github.com/mint-ui/mint-indicator#readme",
24 | "devDependencies": {
25 | "babel-plugin-component": "^0.1.3",
26 | "cooking-vue2": "^0.2.3",
27 | "vue": "^2.0.2"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import 'mint-spinner/lib/style.css';
3 |
4 | const Indicator = Vue.extend(require('./indicator.vue'));
5 | let instance;
6 | let timer;
7 |
8 | module.exports = {
9 | open(options = {}) {
10 | if (!instance) {
11 | instance = new Indicator({
12 | el: document.createElement('div')
13 | });
14 | }
15 | if (instance.visible) return;
16 | instance.text = typeof options === 'string' ? options : options.text || '';
17 | instance.spinnerType = options.spinnerType || 'snake';
18 | document.body.appendChild(instance.$el);
19 | if (timer) {
20 | clearTimeout(timer);
21 | }
22 |
23 | Vue.nextTick(() => {
24 | instance.visible = true;
25 | });
26 | },
27 |
28 | close() {
29 | if (instance) {
30 | Vue.nextTick(() => {
31 | instance.visible = false;
32 | timer = setTimeout(() => {
33 | if (instance.$el) {
34 | instance.$el.style.display = 'none';
35 | }
36 | }, 400);
37 | });
38 | }
39 | }
40 | };
41 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Overview
2 | vue-indicator is a mobile loading indicator plugin for vue.js.
3 |
4 | # Installation
5 | First, install `vue-indicator` from npm:
6 | ```bash
7 | $ npm install vue-indicator
8 | ```
9 |
10 | Then use it:
11 | ```Javascript
12 | // ES6 mudule
13 | import Indicator from 'vue-indicator';
14 |
15 | // CommonJS
16 | const Indicator = require('vue-indicator').default;
17 | ```
18 |
19 | # Usage
20 | Open an indicator:
21 | ```Javascript
22 | Indicator.open();
23 | ```
24 |
25 | Open an indicator with a string:
26 | ```Javascript
27 | Indicator.open('Loading...');
28 | ```
29 |
30 | Open an indicator with an object:
31 | ```Javascript
32 | Indicator.open({ text:'Loading...', spinnerType: 'fading-circle' });
33 | ```
34 |
35 | Then close it:
36 | ```Javascript
37 | Indicator.close();
38 | ```
39 |
40 | # API
41 | | Option | Description | Value | Default |
42 | |-------------|----------------|-------------------------------------------------------------|---------|
43 | | text | indicator text | String | |
44 | | spinnerType | spinner type | 'snake', 'fading-circle', 'double-bounce', 'triple-bounce' | 'snake' |
45 |
46 | # License
47 | MIT
48 |
--------------------------------------------------------------------------------
/src/indicator.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | {{ text }}
7 |
8 |
9 |