├── package.json
├── LICENSE
├── .gitignore
├── index.vue
└── README.md


/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vueqr-new",
 3 |   "version": "1.0.1",
 4 |   "description": "vue二维码组件,方便快捷,你会爱上它！",
 5 |   "main": "index.vue",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/Jack-In/vueQr-new.git"
 9 |   },
10 |   "scripts": {
11 |     "dev": "npm install qrcode@1.2.0 --save-dev"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "qr",
16 |     "qrcode"
17 |   ],
18 |   "bugs": {
19 |     "url": "https://github.com/Jack-In/vueQr-new/issues"
20 |   },
21 |   "homepage": "https://github.com/Jack-In/vueQr-new.git",
22 |   "author": "jack-in",
23 |   "license": "MIT",
24 |   "dependencies": {
25 |     "qrcode": "^1.2.0"
26 |   },
27 |   "devDependencies": {
28 |     "qrcode": "^1.2.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Jack
 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 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | 


--------------------------------------------------------------------------------
/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div ref="qr" class="qrBox">
 3 |     <img :src="src">
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import QRCode from 'qrcode'
 9 | export default {
10 |   data() {
11 |     return {
12 |       src: '',
13 |       textBase: 'demo',
14 |       configBase: {
15 |         // 容错等级
16 |         errorCorrectionLevel: 'H',
17 |         // 图片类型
18 |         type: 'image/png',
19 |         rendererOpts: {
20 |           quality: 0.3
21 |         },
22 |         // 边框与二维码之间的间距
23 |         margin: 2,
24 |         // 缩放倍数
25 |         scale: 4,
26 |         width: 500,
27 |         maskPattern: 1,
28 |         color: {
29 |           dark: '#000000',
30 |           light: '#ffffff'
31 |         },
32 |         style: {
33 |           width: '128px',
34 |           border: '1px solid #ccc'
35 |         }
36 |       }
37 |     }
38 |   },
39 |   props: ['config', 'text'],
40 |   mounted() {
41 |     this.makeQRCode(this.config, this.text)
42 |   },
43 |   methods: {
44 |     makeQRCode(config, text) {
45 |       QRCode.toDataURL(
46 |         text || this.textBase,
47 |         config || this.configBase,
48 |         (err, url) => {
49 |           console.log(err)
50 |           this.src = url
51 |         })
52 |       if (!config) {
53 |         for (const k in this.configBase.style) {
54 |           this.$refs.qr.style[k] = this.configBase.style[k]
55 |         }
56 |       } else {
57 |         for (const k in config.style) {
58 |           this.$refs.qr.style[k] = this.config.style[k]
59 |         }
60 |       }
61 |     }
62 |   }
63 | }
64 | </script>
65 | <style>
66 | .qrBox img {
67 |   vertical-align: top;
68 |   width: 100%;
69 |   height: 100%;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue components
 2 | 
 3 |   [![npm](https://img.shields.io/npm/v/vueqr-new.svg?style=flat-square)](https://www.npmjs.com/package/vueqr-new)
 4 |   [![npm](https://img.shields.io/npm/dt/vueqr-new.svg?style=flat-square)](https://www.npmjs.com/package/vueqr-new)
 5 |   [![npm](https://img.shields.io/npm/l/vueqr-new.svg?style=flat-square)](https://github.com/Jack-In/vueQr-new/master/license)
 6 | 
 7 | > ### 快速安装
 8 |   ### install
 9 |   快速添加 `vueqr-new` 组件到 app 中
10 |   ```bash
11 |   npm install --save vueqr-new
12 |   ```
13 |   ### components
14 |   ```html
15 |   <template>
16 |     <div>
17 |       <vue-qr :config="config" :text="text"></vue-qr>
18 |     </div>
19 |   </template>
20 |   <script>
21 |   import vueQr from 'vueqr-new'
22 |   const config = {
23 |     // 容错等级
24 |     errorCorrectionLevel: 'H',
25 |     // 图片类型
26 |     type: 'image/png',
27 |     rendererOpts: {
28 |     quality: 0.3
29 |     },
30 |     // 边框与二维码之间的间距
31 |     margin: 0,
32 |     // 缩放倍数
33 |     scale: 4,
34 |     width: 500,
35 |     maskPattern:1,
36 |     color: {
37 |     dark: '#000000',
38 |     light : "#ffffff"
39 |     },
40 |     style: {
41 |     width: '128px',
42 |     border: '1px solid #ccc'
43 |     }
44 |   }
45 |   export default {
46 |     data() {
47 |       return {
48 |         text: 'https://example.com',
49 |         config: config
50 |       }
51 |     },
52 |     components: {
53 |         vueQr
54 |     }
55 |   }
56 |   </script>
57 |   ```
58 | ## Component props
59 | 
60 | | 属性 | 类型 | 属性描述 |
61 | |------|------|--------------|---------|
62 | | config | Object | qrcode option |
63 | | text | String | qrcode value |
64 | 
65 | ## 参考代码
66 | ["node-qrcode"](https://github.com/soldair/node-qrcode)
67 | > ### License
68 | 
69 | [MIT](https://github.com/Jack-In/vueQr-new/blob/master/LICENSE)
70 | 


--------------------------------------------------------------------------------