├── .babelrc ├── demo ├── logo.png ├── assets │ ├── logo.png │ └── qrcode.png ├── gh-pages.js ├── index.js ├── index.html └── App.vue ├── .gitignore ├── src ├── index.js └── vue-qart.vue ├── CHANGELOG.MD ├── .travis.yml ├── LICENSE ├── package.json ├── webpack.config.js ├── webpack.config.build.js └── README.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015"] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/superman66/vue-qart/HEAD/demo/logo.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | .idea/ 5 | dist/ 6 | assets/ -------------------------------------------------------------------------------- /demo/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/superman66/vue-qart/HEAD/demo/assets/logo.png -------------------------------------------------------------------------------- /demo/assets/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/superman66/vue-qart/HEAD/demo/assets/qrcode.png -------------------------------------------------------------------------------- /demo/gh-pages.js: -------------------------------------------------------------------------------- 1 | var ghpages = require('gh-pages'); 2 | 3 | ghpages.publish('assets', function(err) {}); -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by superman on 17/2/6. 3 | */ 4 | import VueQArt from './vue-qart.vue'; 5 | export default VueQArt; -------------------------------------------------------------------------------- /CHANGELOG.MD: -------------------------------------------------------------------------------- 1 | 2 | # CHANGELOG 3 | * 2017-5-3 Add download button option & Update qartjs 4 | * 2017-5-4 Add Change qrcode url dynamic 5 | -------------------------------------------------------------------------------- /demo/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }); 9 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-qart 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | language: node_js 4 | node_js: 5 | - 8.5.0 6 | 7 | env: 8 | - BROWSER=ChromeCi 9 | - BROWSER=Firefox 10 | cache: 11 | directories: 12 | - node_modules # NPM packages 13 | 14 | script: 15 | - npm run build 16 | 17 | deploy: 18 | provider: npm 19 | email: supermanchc@gmail.com 20 | api_key: $NPM_TOKEN 21 | skip-cleanup: true 22 | on: 23 | tags: true 24 | 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017-present superman66 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 | -------------------------------------------------------------------------------- /src/vue-qart.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 55 | 56 | -------------------------------------------------------------------------------- /demo/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 39 | 40 | 69 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-qart", 3 | "description": "the Vue 2.x component of QArt.js", 4 | "version": "2.2.0", 5 | "author": "supermanchc@gmail.com", 6 | "repository": "https://github.com/superman66/vue-qart", 7 | "main": "dist/vue-qart.js", 8 | "scripts": { 9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot", 10 | "prepages": "cross-env NODE_ENV=production webpack --progress", 11 | "pages": "node demo/gh-pages.js", 12 | "build": "rm -rf dist/ && cross-env NODE_ENV=production webpack --config webpack.config.build.js --progress --hide-modules", 13 | "release": "nrm use npm && npm publish" 14 | }, 15 | "dependencies": { 16 | "qartjs": "1.1.1" 17 | }, 18 | "peerDependencies": { 19 | "vue": "^2.5.0" 20 | }, 21 | "files": [ 22 | "dist/" 23 | ], 24 | "devDependencies": { 25 | "babel-core": "^6.0.0", 26 | "babel-loader": "^6.0.0", 27 | "babel-preset-es2015": "^6.0.0", 28 | "cross-env": "^3.0.0", 29 | "css-loader": "^0.25.0", 30 | "cz-conventional-changelog": "^2.1.0", 31 | "file-loader": "^0.9.0", 32 | "gh-pages": "^1.1.0", 33 | "vue": "^2.5.0", 34 | "vue-loader": "^10.0.0", 35 | "vue-template-compiler": "^2.1.0", 36 | "webpack": "^2.2.0", 37 | "webpack-dev-server": "^2.2.0", 38 | "html-webpack-plugin": "^2.30.1", 39 | "webpack-merge": "^2.6.1" 40 | }, 41 | "config": { 42 | "commitizen": { 43 | "path": "./node_modules/cz-conventional-changelog" 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | const webpack = require('webpack'); 3 | const HtmlwebpackPlugin = require('html-webpack-plugin') 4 | 5 | let plugins = [ 6 | new HtmlwebpackPlugin({ 7 | title: 'Vue-Qart', 8 | filename: 'index.html', 9 | template: 'demo/index.html', 10 | inject: true, 11 | hash: true, 12 | path: path.resolve(__dirname, 'assets'), 13 | }), 14 | ] 15 | 16 | if (process.env.NODE_ENV === 'production') { 17 | plugins = plugins.concat([ 18 | new webpack.DefinePlugin({ 19 | 'process.env': { 20 | NODE_ENV: '"production"', 21 | }, 22 | }), 23 | new webpack.optimize.UglifyJsPlugin({ 24 | sourceMap: false, 25 | compress: { 26 | warnings: false, 27 | }, 28 | }), 29 | new webpack.LoaderOptionsPlugin({ 30 | minimize: true, 31 | }), 32 | ]) 33 | } 34 | module.exports = { 35 | entry: path.resolve(__dirname, 'demo/index'), 36 | devServer: { 37 | hot: true, 38 | contentBase: path.resolve(__dirname, '/demo'), 39 | publicPath: '/', 40 | }, 41 | output: { 42 | path: path.resolve(__dirname, 'assets'), 43 | filename: 'bundle.js', 44 | publicPath: './', 45 | }, 46 | module: { 47 | rules: [ 48 | { 49 | test: /\.vue$/, 50 | loader: 'vue-loader', 51 | options: { 52 | loaders: { 53 | scss: 'vue-style-loader!css-loader!sass-loader', 54 | sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax', 55 | }, 56 | }, 57 | }, 58 | { 59 | test: /\.js$/, 60 | loader: 'babel-loader', 61 | exclude: /node_modules/, 62 | }, 63 | { 64 | test: /\.(png|jpg|gif|svg)$/, 65 | loader: 'file-loader', 66 | options: { 67 | name: '[name].[ext]?[hash]', 68 | }, 69 | }, 70 | ], 71 | }, 72 | resolve: { 73 | alias: { 74 | vue$: 'vue/dist/vue.common.js', 75 | }, 76 | }, 77 | performance: { 78 | hints: false, 79 | }, 80 | devtool: process.env.NODE_ENV === 'production' ? '' : '#eval-source-map', 81 | plugins, 82 | } 83 | -------------------------------------------------------------------------------- /webpack.config.build.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | 5 | 6 | module.exports = { 7 | entry: './src/index.js', 8 | output: { 9 | path: path.resolve(__dirname, './dist'), 10 | publicPath: '/dist/', 11 | filename: 'vue-qart.js', 12 | library: 'VueQArt', 13 | libraryTarget: 'umd' 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.vue$/, 19 | loader: 'vue-loader', 20 | options: { 21 | loaders: { 22 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 23 | // the "scss" and "sass" values for the lang attribute to the right configs here. 24 | // other preprocessors should work out of the box, no loader config like this necessary. 25 | 'scss': 'vue-style-loader!css-loader!sass-loader', 26 | 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 27 | } 28 | // other vue-loader options go here 29 | } 30 | }, 31 | { 32 | test: /\.js$/, 33 | loader: 'babel-loader', 34 | exclude: /node_modules/ 35 | }, 36 | { 37 | test: /\.(png|jpg|gif|svg)$/, 38 | loader: 'file-loader', 39 | options: { 40 | name: '[name].[ext]?[hash]' 41 | } 42 | } 43 | ] 44 | }, 45 | resolve: { 46 | alias: { 47 | 'vue$': 'vue/dist/vue.common.js' 48 | } 49 | }, 50 | devServer: { 51 | historyApiFallback: true, 52 | noInfo: true 53 | }, 54 | performance: { 55 | hints: false 56 | }, 57 | devtool: process.env.NODE_ENV === 'production' ? '' : '#eval-source-map' 58 | } 59 | 60 | if (process.env.NODE_ENV === 'production') { 61 | // module.exports.devtool = '#source-map' 62 | // http://vue-loader.vuejs.org/en/workflow/production.html 63 | module.exports.plugins = (module.exports.plugins || []).concat([ 64 | new webpack.DefinePlugin({ 65 | 'process.env': { 66 | NODE_ENV: '"production"' 67 | } 68 | }), 69 | new webpack.optimize.UglifyJsPlugin({ 70 | sourceMap: false, 71 | compress: { 72 | warnings: false 73 | } 74 | }), 75 | new webpack.LoaderOptionsPlugin({ 76 | minimize: true 77 | }) 78 | ]) 79 | } 80 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Travis](https://img.shields.io/travis/superman66/vue-qart.svg?style=plastic)](https://travis-ci.org/superman66/vue-qart) [![npm](https://img.shields.io/npm/v/vue-qart.svg?style=plastic)](https://www.npmjs.com/package/vue-qart) [![npm](https://img.shields.io/npm/dt/vue-qart.svg?style=plastic)](https://www.npmjs.com/package/vue-qart) 2 | # vue-qart 3 | ## You should read it before you using vue-qart 4 | >because of qart.js's author doesn't publish the lastest version to npm. so, the new options `size`, `version`,`background`,`fillType` doesn't work in vue-qart until qart.js' author publish the lastest version. 5 | 6 | >For More Detail, seeing this issue: [size option doesn't works](https://github.com/kciter/qart.js/issues/20) 7 | 8 | the Vue 2.x Component for [kciter's qart.js](https://github.com/kciter/qart.js) 9 |
10 | 11 |
12 | Check the [DEMO](http://superman66.github.io/vue-qart/) 13 | ## Installation 14 | **install with NPM** 15 | ```javascript 16 | npm install vue-qart --save 17 | ``` 18 | **Import** 19 | ```javascript 20 | import VueQArt from 'vue-qart' 21 | 22 | new Vue({ 23 | components: {VueQArt} 24 | }) 25 | ``` 26 | ## Usage 27 | **In template** 28 | 29 | ```html 30 | 31 | ``` 32 | **Set config value** 33 | 34 | ```javascript 35 | data () { 36 | return { 37 | msg: 'Welcome to Your Vue.js App', 38 | config: { 39 | value: 'https://www.baidu.com', 40 | imagePath: './examples/assets/logo.png', 41 | filter: 'color' 42 | } 43 | } 44 | } 45 | ``` 46 | **for imagePath prop, you can use base64 instead of image path.** 47 | 48 | For more details you should definitely check out [qart.js](https://github.com/kciter/qart.js) 49 | 50 | 51 | **download to image** 52 | 53 | passing `download` props, to show download button, it support: 54 | - text - button text 55 | - visible - setting download button visible or not 56 | - style - setting download button style 57 | - type - image type,such as `image/png` 58 | - filename 59 | 60 | 61 | you can download the qrcode to image by using `canvas.toDataURL()` 62 | ```javascript 63 | const myCanvas = this.$refs.qart.children[0]; 64 | const type = 'image/png'; 65 | let image = myCanvas.toDataURL(type).replace(type, "image/octet-stream"); 66 | window.location.href = image; // it will save locally 67 | ``` 68 | 69 | ## Build Setup 70 | ```bash 71 | # install dependencies 72 | npm install 73 | 74 | # serve with hot reload at localhost:8080/demo/ 75 | npm run dev 76 | 77 | # build demo 78 | npm run demo 79 | 80 | # export the directive as a library 81 | npm run build 82 | ``` 83 | --------------------------------------------------------------------------------