WEUI控件JS用法

  1 /* dialog */
  2     document.querySelector('#alertBtn').addEventListener('click', function () {
  3         _weui2.default.alert('自定义标题的alert', function () {
  4             console.log('ok');
  5         }, {
  6             title: '自定义标题'
  7         });
  8     });
  9 
 10     /* confirm */
 11     document.querySelector('#confirmBtn').addEventListener('click', function () {
 12         _weui2.default.confirm('自定义标题的confirm', function () {
 13             console.log('yes');
 14         }, function () {
 15             console.log('no');
 16         }, {
 17             title: '自定义标题'
 18         });
 19     });
 20 
 21     /* toast */
 22     document.querySelector('#toastBtn').addEventListener('click', function () {
 23         _weui2.default.toast('操作成功', {
 24             duration: 3000,
 25             className: "bears"
 26         });
 27     });
 28 
 29     /* loading */
 30     document.querySelector('#loadingBtn').addEventListener('click', function () {
 31         var loading = _weui2.default.loading('loading');
 32         setTimeout(function () {
 33             loading.hide();
 34         }, 3000);
 35     });
 36 
 37     /* actionSheet */
 38     document.querySelector('#actionSheetBtn').addEventListener('click', function () {
 39         _weui2.default.actionSheet([{
 40             label: '拍照',
 41             onClick: function onClick() {
 42                 console.log('拍照');
 43             }
 44         }, {
 45             label: '从相册选择',
 46             onClick: function onClick() {
 47                 console.log('从相册选择');
 48             }
 49         }, {
 50             label: '其他',
 51             onClick: function onClick() {
 52                 console.log('其他');
 53             }
 54         }], [{
 55             label: '取消',
 56             onClick: function onClick() {
 57                 console.log('取消');
 58             }
 59         }], {
 60             className: "custom-classname"
 61         });
 62     });
 63 
 64     /* topTips */
 65     document.querySelector('#topTipsBtn').addEventListener('click', function () {
 66         _weui2.default.topTips('请填写正确的字段', {
 67             duration: 3000,
 68             className: "custom-classname",
 69             callback: function callback() {
 70                 console.log('close');
 71             }
 72         });
 73     });
 74 
 75     /* picker */
 76     // 普通选择器
 77     document.querySelector('#pickerBtn').addEventListener('click', function () {
 78         _weui2.default.picker([{
 79             label: '飞机票',
 80             value: 0
 81         }, {
 82             label: '火车票(disabled)',
 83             disabled: true,
 84             value: 1
 85         }, {
 86             label: '的士票(disabled)',
 87             disabled: true,
 88             value: 2
 89         }, {
 90             label: '住宿费',
 91             value: 3
 92         }, {
 93             label: '礼品费',
 94             value: 11
 95         }, {
 96             label: '活动费',
 97             value: 5
 98         }, {
 99             label: '通讯费',
100             value: 6
101         }, {
102             label: '补助',
103             value: 7
104         }, {
105             label: '通讯费',
106             value: 8
107         }, {
108             label: '其他',
109             value: 9
110         }], {
111             defaultValue: [11],
112             className: 'custom-classname',
113             onChange: function onChange(result) {
114                 //console.log(item, index);
115                 console.log(result);
116             },
117             onConfirm: function onConfirm(result) {
118                 console.log(result);
119             },
120             id: 'picker'
121         });
122     });
123 
124     // 时间选择器
125     document.querySelector('#datePickerBtn').addEventListener('click', function () {
126         _weui2.default.datePicker({
127             start: '2016-12-29',
128             end: '2030-12-29',
129             /**
130              * https://zh.wikipedia.org/wiki/Cron
131              * cron 表达式后三位
132              * 示例：
133              *  * * *                每天
134              *  5 * *                每个月的5日
135              *  1-10 * *             每个月的前10日
136              *  1,5,10 * *           每个月的1号、5号、10号
137              *  *\/2 * *             每个月的 1、3、5、7...日，注意写的时候斜杠“/”前面没有反斜杠“\”，这是因为是注释所以需要转义
138              *  * 2 0                2月的每个周日
139              *  * * 0,6              每个周末
140              *  * * 3                每周三
141              */
142             cron: '* */2 0',
143             defaultValue: [2017, 7, 9],
144             onChange: function onChange(result) {
145                 console.log(result);
146             },
147             onConfirm: function onConfirm(result) {
148                 console.log(result);
149             },
150             id: 'datePicker'
151         });
152     });
153 
154     // 多列选择器
155     document.querySelector('#multiPickerBtn').addEventListener('click', function () {
156         _weui2.default.picker([{
157             label: '1',
158             value: '1'
159         }, {
160             label: '2',
161             value: '2'
162         }, {
163             label: '3',
164             value: '3'
165         }], [{
166             label: 'A',
167             value: 'A'
168         }, {
169             label: 'B',
170             value: 'B'
171         }, {
172             label: 'C',
173             value: 'C'
174         }], {
175             defaultValue: ['3', 'A'],
176             onChange: function onChange(result) {
177                 console.log(result);
178             },
179             onConfirm: function onConfirm(result) {
180                 console.log(result);
181             },
182             id: 'multiPickerBtn'
183         });
184     });
185 
186     // 级联选择器
187     document.querySelector('#cascadePickerBtn').addEventListener('click', function () {
188         _weui2.default.picker([{
189             label: '广东',
190             value: 0,
191             children: [{
192                 label: '广州',
193                 value: 0,
194                 children: [{
195                     label: '海珠',
196                     value: 0
197                 }, {
198                     label: '番禺',
199                     value: 1
200                 }]
201             }, {
202                 label: '佛山',
203                 value: 1,
204                 children: [{
205                     label: '禅城',
206                     value: 0
207                 }, {
208                     label: '南海',
209                     value: 1
210                 }]
211             }]
212         }, {
213             label: '广西',
214             value: 1,
215             children: [{
216                 label: '南宁',
217                 value: 0,
218                 children: [{
219                     label: '青秀',
220                     value: 0
221                 }, {
222                     label: '兴宁',
223                     value: 1
224                 }]
225             }, {
226                 label: '桂林',
227                 value: 1,
228                 children: [{
229                     label: '象山',
230                     value: 0
231                 }, {
232                     label: '秀峰',
233                     value: 1
234                 }]
235             }]
236         }], {
237             depth: 3,
238             defaultValue: [0, 1, 1],
239             onChange: function onChange(result) {
240                 console.log(result);
241             },
242             onConfirm: function onConfirm(result) {
243                 console.log(result);
244             },
245             id: 'cascadePicker'
246         });
247     });
248 
249     /* searchbar */
250     _weui2.default.searchBar('#searchBar');
251 
252     /* slider 因为需要获取长度，所以必须要在slider显示的时候才调用weui.slider*/
253     var isSetSlider = false;
254     function setSlider() {
255         if (isSetSlider) return;
256         isSetSlider = true;
257 
258         // 普通slider
259         var sliderValue = document.getElementById("sliderValue");
260         _weui2.default.slider('#slider', {
261             defaultValue: 50,
262             onChange: function onChange(percent) {
263                 sliderValue.innerHTML = Math.round(percent);
264                 console.log(percent);
265             }
266         });
267 
268         // 带step的slider
269         var sliderStepValue = document.getElementById("sliderStepValue");
270         _weui2.default.slider('#sliderStep', {
271             step: 10,
272             defaultValue: 40,
273             onChange: function onChange(percent) {
274                 sliderStepValue.innerHTML = Math.round(percent);
275                 console.log(percent);
276             }
277         });
278 
279         // 分块的slider
280         var sliderBlockValue = document.getElementById("sliderBlockValue");
281         _weui2.default.slider('#sliderBlock', {
282             step: 100 / 3,
283             defaultValue: 33.333,
284             onChange: function onChange(percent) {
285                 sliderBlockValue.innerHTML = Math.round(percent);
286                 console.log(percent);
287             }
288         });
289     }
290 
291     /* tab */
292     _weui2.default.tab('#tab', {
293         defaultIndex: 0,
294         onChange: function onChange(index) {
295             console.log(index);
296 
297             if (index == 3) {
298                 setSlider(); // 设置slider
299             }
300         }
301     });
302 
303     /* form */
304     // 约定正则
305     var regexp = {
306         regexp: {
307             IDNUM: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/,
308             VCODE: /^.{4}$/
309         }
310     };
311 
312     // 失去焦点时检测
313     _weui2.default.form.checkIfBlur('#form', regexp);
314 
315     // 表单提交
316     document.querySelector('#formSubmitBtn').addEventListener('click', function () {
317         _weui2.default.form.validate('#form', function (error) {
318             console.log(error);
319             if (!error) {
320                 var loading = _weui2.default.loading('提交中...');
321                 setTimeout(function () {
322                     loading.hide();
323                     _weui2.default.toast('提交成功', 3000);
324                 }, 1500);
325             }
326         }, regexp);
327     });
328 
329     /* 图片自动上传 */
330     var uploadCount = 0,
331         uploadList = [];
332     var uploadCountDom = document.getElementById("uploadCount");
333     _weui2.default.uploader('#uploader', {
334         url: 'http://' + location.hostname + ':8002/upload',
335         auto: true,
336         type: 'file',
337         fileVal: 'fileVal',
338         compress: {
339             width: 1600,
340             height: 1600,
341             quality: .8
342         },
343         onBeforeQueued: function onBeforeQueued(files) {
344             if (["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0) {
345                 _weui2.default.alert('请上传图片');
346                 return false;
347             }
348             if (this.size > 10 * 1024 * 1024) {
349                 _weui2.default.alert('请上传不超过10M的图片');
350                 return false;
351             }
352             if (files.length > 5) {
353                 // 防止一下子选中过多文件
354                 _weui2.default.alert('最多只能上传5张图片，请重新选择');
355                 return false;
356             }
357             if (uploadCount + 1 > 5) {
358                 _weui2.default.alert('最多只能上传5张图片');
359                 return false;
360             }
361 
362             ++uploadCount;
363             uploadCountDom.innerHTML = uploadCount;
364         },
365         onQueued: function onQueued() {
366             uploadList.push(this);
367             console.log(this);
368         },
369         onBeforeSend: function onBeforeSend(data, headers) {
370             console.log(this, data, headers);
371             // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
372             // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部
373 
374             // return false; // 阻止文件上传
375         },
376         onProgress: function onProgress(procent) {
377             console.log(this, procent);
378         },
379         onSuccess: function onSuccess(ret) {
380             console.log(this, ret);
381         },
382         onError: function onError(err) {
383             console.log(this, err);
384         }
385     });
386 
387     // 缩略图预览
388     document.querySelector('#uploaderFiles').addEventListener('click', function (e) {
389         var target = e.target;
390 
391         while (!target.classList.contains('weui-uploader__file') && target) {
392             target = target.parentNode;
393         }
394         if (!target) return;
395 
396         var url = target.getAttribute('style') || '';
397         var id = target.getAttribute('data-id');
398 
399         if (url) {
400             url = url.match(/url\((.*?)\)/)[1].replace(/"/g, '');
401         }
402         var gallery = _weui2.default.gallery(url, {
403             className: 'custom-name',
404             onDelete: function onDelete() {
405                 _weui2.default.confirm('确定删除该图片？', function () {
406                     --uploadCount;
407                     uploadCountDom.innerHTML = uploadCount;
408 
409                     for (var i = 0, len = uploadList.length; i < len; ++i) {
410                         var file = uploadList[i];
411                         if (file.id == id) {
412                             file.stop();
413                             break;
414                         }
415                     }
416                     target.remove();
417                     gallery.hide();
418                 });
419             }
420         });
421     });
422 
423     /* 图片手动上传 */
424     var uploadCustomFileList = [];
425 
426     // 这里是简单的调用，其余api请参考文档
427     _weui2.default.uploader('#uploaderCustom', {
428         url: 'http://localhost:8002/upload',
429         auto: false,
430         onQueued: function onQueued() {
431             uploadCustomFileList.push(this);
432         }
433     });
434 
435     // 手动上传按钮
436     document.getElementById("uploaderCustomBtn").addEventListener('click', function () {
437         uploadCustomFileList.forEach(function (file) {
438             file.upload();
439         });
440     });
441 
442     // 缩略图预览
443     document.querySelector('#uploaderCustomFiles').addEventListener('click', function (e) {
444         var target = e.target;
445 
446         while (!target.classList.contains('weui-uploader__file') && target) {
447             target = target.parentNode;
448         }
449         if (!target) return;
450 
451         var url = target.getAttribute('style') || '';
452         var id = target.getAttribute('data-id');
453 
454         if (url) {
455             url = url.match(/url\((.*?)\)/)[1].replace(/"/g, '');
456         }
457         var gallery = _weui2.default.gallery(url, {
458             onDelete: function onDelete() {
459                 _weui2.default.confirm('确定删除该图片？', function () {
460                     var index;
461                     for (var i = 0, len = uploadCustomFileList.length; i < len; ++i) {
462                         var file = uploadCustomFileList[i];
463                         if (file.id == id) {
464                             index = i;
465                             break;
466                         }
467                     }
468                     if (index) uploadCustomFileList.splice(index, 1);
469 
470                     target.remove();
471                     gallery.hide();
472                 });
473             }
474         });
475     });