├── 6 位数密码输入框（仿照支付宝）
└── pwd
│ ├── img
│ └── blink.gif
│ ├── api.js
│ └── index.vue
├── Vue2.0 实现上拉加载下拉刷新
├── components
│ ├── img
│ │ ├── down-logo.png
│ │ └── refresh-logo.gif
│ ├── less
│ │ └── index.less
│ └── index.vue
└── index.vue
└── Vue2.x 导出Excel格式
├── src
├── app.js
├── index.ejs
└── views
│ ├── json
│ └── data.json
│ ├── excel
│ ├── Export2Excel.js
│ └── Blob.js
│ └── App.vue
├── Vue2.x 将页面中表格数据导出excel.md
├── package.json
└── webpack.config.js
/6 位数密码输入框（仿照支付宝）/pwd/img/blink.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rkatsiteli/Vue-archive/HEAD/6 位数密码输入框（仿照支付宝）/pwd/img/blink.gif
--------------------------------------------------------------------------------
/Vue2.0 实现上拉加载下拉刷新/components/img/down-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rkatsiteli/Vue-archive/HEAD/Vue2.0 实现上拉加载下拉刷新/components/img/down-logo.png
--------------------------------------------------------------------------------
/Vue2.0 实现上拉加载下拉刷新/components/img/refresh-logo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rkatsiteli/Vue-archive/HEAD/Vue2.0 实现上拉加载下拉刷新/components/img/refresh-logo.gif
--------------------------------------------------------------------------------
/Vue2.x 导出Excel格式/src/app.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import Vue from 'vue';
4 |
5 | import App from 'views/App.vue';
6 | const app = new Vue({
7 | render: h => h(App),
8 | }).$mount('#app')
--------------------------------------------------------------------------------
/Vue2.x 导出Excel格式/src/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/6 位数密码输入框（仿照支付宝）/pwd/api.js:
--------------------------------------------------------------------------------
1 | import "@/js/utils"; //公共方法
2 | import '@/js/utils/ajax';
3 | export default {
4 | getMobile(cb) {
5 | /*$.ajax({
6 | type: "POST",
7 | async: false,
8 | url: "/pub/sylla/phr-p/phr/second-auth/get-mobile",
9 | success: response => {
10 | debugger
11 | cb && cb(response);
12 | },
13 | error: error => {
14 | utils.toast(error);
15 | }
16 | });*/
17 |
18 | /***
19 | * libUtils.ajax
20 | */
21 | /*ajax.ajax({
22 | url: "/pub/sylla/phr-p/phr/second-auth/get-mobile",
23 | success: response => {
24 | debugger
25 | cb && cb(response);
26 | },
27 | error: error => {
28 | utils.toast(error);
29 | },
30 | data: {
31 | name1: 'value1',
32 | name2: 'value2'
33 | },
34 | method: "get"
35 | });*/
36 |
37 | ajax.post({
38 | async: false,
39 | url: "/pub/sylla/phr-p/phr/second-auth/get-mobile",
40 | success: response => {
41 | cb && cb(response);
42 | },
43 | error: error => {
44 | utils.toast(error);
45 | },
46 | data: {
47 | name1: 'value1',
48 | name2: 'value2'
49 | },
50 | method: "get"
51 | });
52 |
53 |
54 | console.log(1111)
55 |
56 | }
57 |
58 | };
--------------------------------------------------------------------------------
/Vue2.x 导出Excel格式/Vue2.x 将页面中表格数据导出excel.md:
--------------------------------------------------------------------------------
1 | #### Vue2.x 将页面中表格数据导出excel
2 |
3 | 第一步：安装依赖
4 | ```
5 | npm install -S file-saver xlsx
6 |
7 | npm install -D script-loader
8 | ```
9 |
10 | 二、项目中新建一个文件夹：（excel---名字任取）
11 |
12 | >里面放置两个文件**Blob.js**和 **Export2Excel.js**，文件 [ 在这里](https://github.com/Rkatsiteli/Vue-archive/tree/master/Vue2.x%20%E5%AF%BC%E5%87%BAExcel%E6%A0%BC%E5%BC%8F)。
13 |
14 |
15 | 三、在.vue文件中，写这两个方法：其中list是表格的内容
16 |
17 |
18 | ```
19 | export2Excel() {
20 | require.ensure([], () => {
21 | const { export_json_to_excel } = require('../../vendor/Export2Excel');
22 | const tHeader = ['序号', 'IMSI', 'MSISDN', '证件号码', '姓名'];
23 | const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];
24 | const list = this.tableData;
25 | const data = this.formatJson(filterVal, list);
26 | export_json_to_excel(tHeader, data, '列表excel');
27 | })
28 | },
29 | formatJson(filterVal, jsonData) {
30 | return jsonData.map(v => filterVal.map(j => v[j]))
31 | }
32 | ```
33 |
34 | [GitHub 在这里](https://github.com/Rkatsiteli/Vue-archive/tree/master/Vue2.x%20%E5%AF%BC%E5%87%BAExcel%E6%A0%BC%E5%BC%8F)
35 |
36 | ---
37 |
38 | [参考地址，在这里](https://www.cnblogs.com/Mrfan217/p/6944238.html)
39 |
40 |
--------------------------------------------------------------------------------
/Vue2.x 导出Excel格式/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "eoiHome",
3 | "version": "1.0.1",
4 | "description": "",
5 | "main": "gulpfile.js",
6 | "scripts": {
7 | "test1": "echo \"Error: no test specified\" && exit 1",
8 | "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build --mode development",
9 | "build": "set NODE_ENV=prod&&webpack --hide-modules --mode production"
10 | },
11 | "author": "",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "babel-core": "^6.26.3",
15 | "babel-loader": "^7.1.4",
16 | "babel-plugin-transform-runtime": "^6.23.0",
17 | "babel-polyfill": "^6.26.0",
18 | "babel-preset-es2015": "^6.24.1",
19 | "babel-preset-stage-0": "^6.24.1",
20 | "babel-runtime": "^6.26.0",
21 | "css-loader": "^0.28.11",
22 | "html-webpack-plugin": "^3.2.0",
23 | "json-loader": "^0.5.7",
24 | "less": "^3.0.4",
25 | "less-loader": "^4.1.0",
26 | "script-loader": "^0.7.2",
27 | "style-loader": "^0.21.0",
28 | "vue": "^2.5.16",
29 | "vue-hot-reload-api": "^2.3.0",
30 | "vue-html-loader": "^1.2.4",
31 | "vue-loader": "^14.2.2",
32 | "vue-router": "^3.0.1",
33 | "vue-style-loader": "^4.1.0",
34 | "vue-template-compiler": "^2.5.16",
35 | "vuex": "^3.0.1",
36 | "webpack": "^4.8.3",
37 | "webpack-cli": "^2.1.3",
38 | "webpack-dev-server": "^3.1.4"
39 | },
40 | "dependencies": {
41 | "file-saver": "^1.3.8",
42 | "xlsx": "^0.12.12"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/Vue2.0 实现上拉加载下拉刷新/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | - {{item.name}}
6 | - {{item.name}}
7 |
8 |
9 |
3 |
4 |
5 |
6 |
13 |
14 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/Vue2.x 导出Excel格式/src/views/excel/Blob.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /* Blob.js
3 | * A Blob implementation.
4 | * 2014-05-27
5 | *
6 | * By Eli Grey, http://eligrey.com
7 | * By Devin Samarin, https://github.com/eboyjr
8 | * License: X11/MIT
9 | * See LICENSE.md
10 | */
11 |
12 | /*global self, unescape */
13 | /*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
14 | plusplus: true */
15 |
16 | /*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
17 |
18 | (function (view) {
19 | "use strict";
20 |
21 | view.URL = view.URL || view.webkitURL;
22 |
23 | if (view.Blob && view.URL) {
24 | try {
25 | new Blob;
26 | return;
27 | } catch (e) {}
28 | }
29 |
30 | // Internally we use a BlobBuilder implementation to base Blob off of
31 | // in order to support older browsers that only have BlobBuilder
32 | var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
33 | var
34 | get_class = function(object) {
35 | return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
36 | }
37 | , FakeBlobBuilder = function BlobBuilder() {
38 | this.data = [];
39 | }
40 | , FakeBlob = function Blob(data, type, encoding) {
41 | this.data = data;
42 | this.size = data.length;
43 | this.type = type;
44 | this.encoding = encoding;
45 | }
46 | , FBB_proto = FakeBlobBuilder.prototype
47 | , FB_proto = FakeBlob.prototype
48 | , FileReaderSync = view.FileReaderSync
49 | , FileException = function(type) {
50 | this.code = this[this.name = type];
51 | }
52 | , file_ex_codes = (
53 | "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
54 | + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
55 | ).split(" ")
56 | , file_ex_code = file_ex_codes.length
57 | , real_URL = view.URL || view.webkitURL || view
58 | , real_create_object_URL = real_URL.createObjectURL
59 | , real_revoke_object_URL = real_URL.revokeObjectURL
60 | , URL = real_URL
61 | , btoa = view.btoa
62 | , atob = view.atob
63 |
64 | , ArrayBuffer = view.ArrayBuffer
65 | , Uint8Array = view.Uint8Array
66 | ;
67 | FakeBlob.fake = FB_proto.fake = true;
68 | while (file_ex_code--) {
69 | FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
70 | }
71 | if (!real_URL.createObjectURL) {
72 | URL = view.URL = {};
73 | }
74 | URL.createObjectURL = function(blob) {
75 | var
76 | type = blob.type
77 | , data_URI_header
78 | ;
79 | if (type === null) {
80 | type = "application/octet-stream";
81 | }
82 | if (blob instanceof FakeBlob) {
83 | data_URI_header = "data:" + type;
84 | if (blob.encoding === "base64") {
85 | return data_URI_header + ";base64," + blob.data;
86 | } else if (blob.encoding === "URI") {
87 | return data_URI_header + "," + decodeURIComponent(blob.data);
88 | } if (btoa) {
89 | return data_URI_header + ";base64," + btoa(blob.data);
90 | } else {
91 | return data_URI_header + "," + encodeURIComponent(blob.data);
92 | }
93 | } else if (real_create_object_URL) {
94 | return real_create_object_URL.call(real_URL, blob);
95 | }
96 | };
97 | URL.revokeObjectURL = function(object_URL) {
98 | if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
99 | real_revoke_object_URL.call(real_URL, object_URL);
100 | }
101 | };
102 | FBB_proto.append = function(data/*, endings*/) {
103 | var bb = this.data;
104 | // decode data to a binary string
105 | if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
106 | var
107 | str = ""
108 | , buf = new Uint8Array(data)
109 | , i = 0
110 | , buf_len = buf.length
111 | ;
112 | for (; i < buf_len; i++) {
113 | str += String.fromCharCode(buf[i]);
114 | }
115 | bb.push(str);
116 | } else if (get_class(data) === "Blob" || get_class(data) === "File") {
117 | if (FileReaderSync) {
118 | var fr = new FileReaderSync;
119 | bb.push(fr.readAsBinaryString(data));
120 | } else {
121 | // async FileReader won't work as BlobBuilder is sync
122 | throw new FileException("NOT_READABLE_ERR");
123 | }
124 | } else if (data instanceof FakeBlob) {
125 | if (data.encoding === "base64" && atob) {
126 | bb.push(atob(data.data));
127 | } else if (data.encoding === "URI") {
128 | bb.push(decodeURIComponent(data.data));
129 | } else if (data.encoding === "raw") {
130 | bb.push(data.data);
131 | }
132 | } else {
133 | if (typeof data !== "string") {
134 | data += ""; // convert unsupported types to strings
135 | }
136 | // decode UTF-16 to binary string
137 | bb.push(unescape(encodeURIComponent(data)));
138 | }
139 | };
140 | FBB_proto.getBlob = function(type) {
141 | if (!arguments.length) {
142 | type = null;
143 | }
144 | return new FakeBlob(this.data.join(""), type, "raw");
145 | };
146 | FBB_proto.toString = function() {
147 | return "[object BlobBuilder]";
148 | };
149 | FB_proto.slice = function(start, end, type) {
150 | var args = arguments.length;
151 | if (args < 3) {
152 | type = null;
153 | }
154 | return new FakeBlob(
155 | this.data.slice(start, args > 1 ? end : this.data.length)
156 | , type
157 | , this.encoding
158 | );
159 | };
160 | FB_proto.toString = function() {
161 | return "[object Blob]";
162 | };
163 | FB_proto.close = function() {
164 | this.size = this.data.length = 0;
165 | };
166 | return FakeBlobBuilder;
167 | }(view));
168 |
169 | view.Blob = function Blob(blobParts, options) {
170 | var type = options ? (options.type || "") : "";
171 | var builder = new BlobBuilder();
172 | if (blobParts) {
173 | for (var i = 0, len = blobParts.length; i < len; i++) {
174 | builder.append(blobParts[i]);
175 | }
176 | }
177 | return builder.getBlob(type);
178 | };
179 | }(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
180 |
--------------------------------------------------------------------------------