utils.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. /* eslint-disable */
  2. /**
  3. *
  4. * @param e
  5. * @param arg_opts
  6. * @returns {boolean}
  7. */
  8. export function effectRipple(e, arg_opts) {
  9. let opts = Object.assign({
  10. ele: e.target, // 波纹作用元素
  11. type: 'hit', // hit点击位置扩散 center中心点扩展
  12. bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
  13. }, arg_opts),
  14. target = opts.ele;
  15. if (target) {
  16. let rect = target.getBoundingClientRect(),
  17. ripple = target.querySelector('.e-ripple');
  18. if (!ripple) {
  19. ripple = document.createElement('span');
  20. ripple.className = 'e-ripple';
  21. ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
  22. target.appendChild(ripple);
  23. } else {
  24. ripple.className = 'e-ripple';
  25. }
  26. switch (opts.type) {
  27. case 'center':
  28. ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
  29. ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
  30. break;
  31. default:
  32. ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
  33. ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
  34. }
  35. ripple.style.backgroundColor = opts.bgc;
  36. ripple.className = 'e-ripple z-active';
  37. return false;
  38. }
  39. }
  40. // database64文件格式转换为2进制
  41. /**
  42. *
  43. * @param data
  44. * @param mime
  45. * @returns {*}
  46. */
  47. export function data2blob(data, mime) {
  48. // dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了
  49. data = data.split(',')[1];
  50. data = window.atob(data);
  51. var ia = new Uint8Array(data.length);
  52. for (var i = 0; i < data.length; i++) {
  53. ia[i] = data.charCodeAt(i);
  54. }
  55. // canvas.toDataURL 返回的默认格式就是 image/png
  56. return new Blob([ia], {type: mime});
  57. };