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 });