├── .gitattributes ├── .github └── workflows │ └── superlinter.yml ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── package.json ├── src ├── index.js ├── v3bus.js └── vue3-progress.vue ├── types └── index.d.ts └── webpack.config.js /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=Vue 2 | -------------------------------------------------------------------------------- /.github/workflows/superlinter.yml: -------------------------------------------------------------------------------- 1 | name: vue3 progress ci 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | 9 | strategy: 10 | matrix: 11 | node-version: ["12.x"] 12 | 13 | steps: 14 | - uses: actions/checkout@v2 15 | - name: Use Node.js ${{ matrix.node-version }} 16 | uses: actions/setup-node@v1 17 | with: 18 | node-version: ${{ matrix.node-version }} 19 | - run: npm install 20 | - run: npm run build 21 | env: 22 | CI: true 23 | - name: Archive production artifacts 24 | uses: actions/upload-artifact@v2 25 | with: 26 | name: vue3-progress 27 | path: | 28 | ${{ github.workspace }} 29 | !package-lock.json 30 | !node_modules 31 | !.git* 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | demo 3 | 4 | package-lock.json 5 | node_modules/ 6 | 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 meloalright 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![cover](https://user-images.githubusercontent.com/11075892/98070512-4b2e7780-1e9c-11eb-885f-b13c91cee889.png) 2 | 3 | # vue3-progress 4 | 5 | [![license](https://img.shields.io/npm/l/vue3-progress?color=%2351bff4)](https://revolunet.mit-license.org/) [![npm](https://img.shields.io/npm/v/vue3-progress?color=%2333efc7)](https://www.npmjs.com/package/vue3-progress) [![downloads](https://img.shields.io/npm/dm/vue3-progress?color=%23ad43a7)](https://www.npmjs.com/package/vue3-progress) 6 | 7 | `A vue3 progress bar component in which custom colors are supported` 8 | 9 | `一款 vue3 进度条组件 支持自定义喜欢的颜色` 10 | 11 | This Vue Component is now Type Script Compatible! 12 | 13 | ## Demo 14 | 15 | [Live Demo](https://vue3-progress.netlify.app/) 16 | 17 | ## Install 18 | 19 | ```shell 20 | $ npm i vue3-progress 21 | ``` 22 | 23 | ## Usage 24 | 25 | `main.js` 26 | 27 | ```js 28 | import Vue3Progress from "vue3-progress"; 29 | 30 | const options = { 31 | position: "fixed", 32 | height: "3px", 33 | // color: "", 34 | }; 35 | 36 | createApp(App).use(Vue3Progress, options).mount("#app"); 37 | ``` 38 | 39 | `App.vue` 40 | 41 | ```vue 42 | 48 | 49 | 69 | ``` 70 | 71 | ## APIs 72 | 73 | ```JavaScript 74 | this.$progress.start() // start the loading 75 | ``` 76 | 77 | ```JavaScript 78 | this.$progress.finish() // finish the loading 79 | ``` 80 | 81 | ```JavaScript 82 | this.$progress.height(4) // resize the height of loading bar to 4px 83 | ``` 84 | 85 | ## License 86 | 87 | [MIT](https://opensource.org/licenses/MIT) 88 | 89 | ## Links 90 | 91 | [Vue.js - The Progressive JavaScript Framework](https://vuejs.org/) 92 | 93 | [vue-ins-progress-bar 一款 ins 风格的 vue 进度条组件](https://github.com/meloalright/vue-ins-progress-bar) 94 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"], 3 | }; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-progress", 3 | "version": "0.0.1-beta2", 4 | "description": "A vue3 component of progress bar.", 5 | "main": "./dist/index.bundle.js", 6 | "typings": "types/index.d.ts", 7 | "module": "./src/index.js", 8 | "scripts": { 9 | "build": "webpack", 10 | "postinstall": "echo ☘ vue3-progress" 11 | }, 12 | "dependencies": {}, 13 | "devDependencies": { 14 | "vue": "^3.0.2", 15 | "@babel/core": "^7.12.3", 16 | "@vue/cli-plugin-babel": "^4.5.8", 17 | "@vue/compiler-sfc": "^3.0.0", 18 | "babel-loader": "^8.1.0", 19 | "css-loader": "^3.5.3", 20 | "style-loader": "^2.0.0", 21 | "vue-loader-v16": "npm:vue-loader@^16.0.0-beta.7", 22 | "webpack": "^5.3.2", 23 | "webpack-cli": "^4.1.0" 24 | }, 25 | "repository": { 26 | "type": "git", 27 | "url": "git+https://github.com/meloalright/vue3-progress.git" 28 | }, 29 | "keywords": [ 30 | "vue3", 31 | "progress", 32 | "progressbar" 33 | ], 34 | "author": "meloalright", 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/meloalright/vue3-progress/issues" 38 | }, 39 | "homepage": "https://github.com/meloalright/vue3-progress#readme" 40 | } 41 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | import Vue3Progress from "./vue3-progress.vue"; 4 | import v3bus from "./v3bus"; 5 | 6 | function install(app, options = {}) { 7 | const inBrowser = typeof window !== "undefined"; 8 | 9 | const DEFAULT_OPTION = { 10 | position: "fixed", 11 | height: "3px", 12 | }; 13 | 14 | let progress = { 15 | $init: false, 16 | state: { 17 | timer: { fadeAway: null, fill: null }, 18 | isFull: false, 19 | isWFA: false, 20 | }, 21 | init() { 22 | this.$init = true; 23 | }, 24 | __fillBeginning() { 25 | this.state.isFull = false; 26 | v3bus.__notify_begin(); 27 | }, 28 | __fillFinally() { 29 | this.state.isFull = true; 30 | this.state.timer.fill = null; 31 | }, 32 | __fadeBeginning() { 33 | this.state.isWFA = false; 34 | v3bus.__notify_fade(); 35 | }, 36 | __fadeFinally() { 37 | this.state.timer.fadeAway = null; 38 | this.state.isFull = null; 39 | v3bus.__notify_after_fade(); 40 | }, 41 | __isFilling() { 42 | return this.state.timer.fill; 43 | }, 44 | __isFading() { 45 | return this.state.timer.fadeAway; 46 | }, 47 | __killFading() { 48 | clearTimeout(this.state.timer.fadeAway); 49 | this.state.isWFA = false; 50 | this.state.timer.fadeAway = null; 51 | }, 52 | __waiting() { 53 | this.state.isWFA = true; 54 | }, 55 | __isWaiting() { 56 | return this.state.isWFA; 57 | }, 58 | start() { 59 | if (!this.$init) return; 60 | this.__killFading(); 61 | if (this.__isFilling()) return; 62 | this.__fillBeginning(); 63 | this.state.timer.fill = setTimeout(() => { 64 | this.__fillFinally(); 65 | if (this.__isWaiting()) { 66 | this.finish(); 67 | } 68 | }, 500); 69 | }, 70 | height(h) { 71 | window.V3P_OPT.height = `${h}px`; 72 | v3bus.__notify_height(); 73 | }, 74 | __hide() { 75 | if (this.__isFading()) return; 76 | if (this.__isFilling()) { 77 | this.__waiting(); 78 | return; 79 | } 80 | this.__fadeBeginning(); 81 | this.state.timer.fadeAway = setTimeout(() => { 82 | this.__fadeFinally(); 83 | }, 200); 84 | }, 85 | finish() { 86 | if (!this.$init) return; 87 | this.__hide(); 88 | }, 89 | }; 90 | 91 | let progressOptions = Object.assign(DEFAULT_OPTION, options); 92 | 93 | if (inBrowser) { 94 | window.V3P_OPT = progressOptions; 95 | progress.init(progressOptions); 96 | } 97 | 98 | app.component("vue3-progress", Vue3Progress); 99 | 100 | app.config.globalProperties.$progress = progress; 101 | } 102 | 103 | export default { 104 | install, 105 | }; 106 | -------------------------------------------------------------------------------- /src/v3bus.js: -------------------------------------------------------------------------------- 1 | import { nextTick } from "vue"; 2 | export default { 3 | __on_notify_begin: null, 4 | __on_notify_fade: null, 5 | __on_notify_after_fade: null, 6 | __on_notify_height: null, 7 | setEventHandlers: function ({ begin, fade, afterFade, height }) { 8 | this.__on_notify_begin = begin; 9 | this.__on_notify_fade = fade; 10 | this.__on_notify_after_fade = afterFade; 11 | this.__on_notify_height = height; 12 | }, 13 | __notify_begin: function () { 14 | nextTick(() => { 15 | this.__on_notify_begin && this.__on_notify_begin(); 16 | }); 17 | }, 18 | __notify_fade: function () { 19 | nextTick(() => { 20 | this.__on_notify_fade && this.__on_notify_fade(); 21 | }); 22 | }, 23 | __notify_after_fade: function () { 24 | nextTick(() => { 25 | this.__on_notify_after_fade && this.__on_notify_after_fade(); 26 | }); 27 | }, 28 | __notify_height: function () { 29 | nextTick(() => { 30 | this.__on_notify_height && this.__on_notify_height(); 31 | }); 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /src/vue3-progress.vue: -------------------------------------------------------------------------------- 1 | 4 | 45 | 119 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | export default class Vue3Progress { 2 | static install(Vue: any, options?: any): void 3 | } 4 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const { VueLoaderPlugin } = require("vue-loader-v16"); 3 | 4 | module.exports = { 5 | entry: "./src/index.js", 6 | output: { 7 | path: path.resolve(__dirname, "dist"), 8 | filename: "index.bundle.js", 9 | libraryTarget: "umd", 10 | library: "vue3Progress", 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.vue$/, 16 | loader: "vue-loader-v16", 17 | }, 18 | { 19 | test: /\.js$/, 20 | exclude: /node_modules/, 21 | loader: "babel-loader", 22 | }, 23 | { test: /\.css$/, use: ["style-loader", "css-loader"] }, 24 | ], 25 | }, 26 | plugins: [new VueLoaderPlugin()], 27 | externals: { 28 | vue: "vue", 29 | }, 30 | }; 31 | --------------------------------------------------------------------------------