├── src
├── assets
│ ├── demo.jpg
│ └── logo.png
├── main.js
├── qrcode
│ ├── index.js
│ └── qrcode.vue
└── App.vue
├── .babelrc
├── .gitignore
├── .editorconfig
├── index.html
├── package.json
├── README.md
├── webpack.config.js
└── yarn.lock
/src/assets/demo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/song776158074/vue-qrcode/HEAD/src/assets/demo.jpg
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/song776158074/vue-qrcode/HEAD/src/assets/logo.png
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", { "modules": false }],
4 | "stage-3"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 |
4 | new Vue({
5 | el: '#app',
6 | render: h => h(App)
7 | })
8 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | yarn-error.log
6 |
7 | # Editor directories and files
8 | .idea
9 | *.suo
10 | *.ntvs*
11 | *.njsproj
12 | *.sln
13 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | qrcode
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/qrcode/index.js:
--------------------------------------------------------------------------------
1 | // sumFunction 插件对应组件的名字
2 | import qrcode from './qrcode';
3 |
4 | // Vue.js 的插件应当有一个公开方法 install 。第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
5 | // 参考：https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6
6 | // 此处注意，组件需要添加name属性，代表注册的组件名称，也可以修改成其他的
7 |
8 | qrcode.install = Vue => Vue.component(qrcode.name, qrcode);//注册组件
9 |
10 |
11 | // 标签的方式引入，留到后面再另开新篇讨论
12 | //const install = function(Vue, opts = {}) {
13 | // Vue.component(sumFunction.name, sumFunction);
14 | //}
15 |
16 | /* 支持使用标签的方式引入 Vue是全局变量时，自动install */
17 | //if (typeof window !== 'undefined' && window.Vue) {
18 | // install(window.Vue);
19 | //}
20 |
21 |
22 |
23 | export default qrcode;
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
25 |
26 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue_qrcodes",
3 | "description": "基于qrcode.js二维码封装的vue组件",
4 | "version": "1.0.9",
5 | "author": "sabo-_-",
6 | "license": "",
7 | "private": false,
8 | "main": "dist/qrcode.js",
9 | "scripts": {
10 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
11 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
12 | },
13 | "dependencies": {
14 | "qrcodejs2": "0.0.2",
15 | "vue": "^2.5.11"
16 | },
17 | "browserslist": [
18 | "> 1%",
19 | "last 2 versions",
20 | "not ie <= 8"
21 | ],
22 | "devDependencies": {
23 | "babel-core": "^6.26.0",
24 | "babel-loader": "^7.1.2",
25 | "babel-preset-env": "^1.6.0",
26 | "babel-preset-stage-3": "^6.24.1",
27 | "cross-env": "^5.0.5",
28 | "css-loader": "^0.28.7",
29 | "file-loader": "^1.1.4",
30 | "vue-loader": "^13.0.5",
31 | "vue-template-compiler": "^2.4.4",
32 | "webpack": "^3.6.0",
33 | "webpack-dev-server": "^2.9.1"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # qrcode
2 |
3 | > 基于qrcode.js二维码封装的vue组件
4 |
5 | ## Install
6 |
7 | ```
8 | npm install vue_qrcodes
9 | or
10 | yarn add vue_qrcodes
11 | ```
12 |
13 | ## Example
14 |
15 | [Demo]
16 |
17 | ```
18 |
19 |
20 |
21 |
22 |
23 |
24 |
33 | ```
34 |
35 | 
36 |
37 | ## Props
38 |
39 | | Property | Description | Type | Accepted Values | Default |
40 | |-|-|-|-|-|
41 | | url | 二维码输入的内容 | String | - | www.baidu.com |
42 | | iconurl | 二维码中间小图片地址 | String | - | https://cn.vuejs.org/images/logo.png |
43 | | wid | 二维码宽度 | Number | - | 70 |
44 | | hei | 二维码高度 | Number | - | 70 |
45 | | colorDark | 二维码颜色 | String | - | #000000 |
46 | | colorLight | 二维码背景色 | String | - | #ffffff |
47 | | imgwid | 二维码中间小图片宽度 | Number | - | 30 |
48 | | imghei | 二维码中间小图片高度 | Number | - | 30 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | // 执行环境
2 | const NODE_ENV = process.env.NODE_ENV;
3 | console.log("-----NODE_ENV===",NODE_ENV);
4 | var path = require('path')
5 | var webpack = require('webpack')
6 |
7 | module.exports = {
8 | entry: NODE_ENV == 'development' ? './src/main.js' : './src/qrcode/index.js',
9 | output: {
10 | path: path.resolve(__dirname, './dist'),
11 | publicPath: '/dist/',
12 | filename: 'qrcode.js',
13 | library: 'qrcode', // 指定的就是你使用require时的模块名
14 | libraryTarget: 'umd', // 指定输出格式
15 | umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
16 | },
17 | module: {
18 | rules: [
19 | {
20 | test: /\.css$/,
21 | use: [
22 | 'vue-style-loader',
23 | 'css-loader'
24 | ],
25 | }, {
26 | test: /\.vue$/,
27 | loader: 'vue-loader',
28 | options: {
29 | loaders: {
30 | }
31 | // other vue-loader options go here
32 | }
33 | },
34 | {
35 | test: /\.js$/,
36 | loader: 'babel-loader',
37 | exclude: /node_modules/
38 | },
39 | {
40 | test: /\.(png|jpg|gif|svg)$/,
41 | loader: 'file-loader',
42 | options: {
43 | name: '[name].[ext]?[hash]'
44 | }
45 | }
46 | ]
47 | },
48 | resolve: {
49 | alias: {
50 | 'vue$': 'vue/dist/vue.esm.js'
51 | },
52 | extensions: ['*', '.js', '.vue', '.json']
53 | },
54 | devServer: {
55 | historyApiFallback: true,
56 | noInfo: true,
57 | overlay: true
58 | },
59 | performance: {
60 | hints: false
61 | },
62 | devtool: '#eval-source-map'
63 | }
64 |
65 | if (process.env.NODE_ENV === 'production') {
66 | module.exports.devtool = '#source-map'
67 | // http://vue-loader.vuejs.org/en/workflow/production.html
68 | module.exports.plugins = (module.exports.plugins || []).concat([
69 | new webpack.DefinePlugin({
70 | 'process.env': {
71 | NODE_ENV: '"production"'
72 | }
73 | }),
74 | new webpack.optimize.UglifyJsPlugin({
75 | sourceMap: true,
76 | compress: {
77 | warnings: false
78 | }
79 | }),
80 | new webpack.LoaderOptionsPlugin({
81 | minimize: true
82 | })
83 | ])
84 | }
85 |
--------------------------------------------------------------------------------
/src/qrcode/qrcode.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
![]()
4 |
5 |
6 |