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 * * 每月的 一、三、五、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     });