index.js 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import { computed, defineComponent, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, watch } from 'vue';
  2. import useConfigInject from '../../config-provider/hooks/useConfigInject';
  3. import isVisible from '../../vc-util/Dom/isVisible';
  4. import classNames from '../classNames';
  5. import { findDOMNode } from '../props-util';
  6. import useStyle from './style';
  7. import useWave from './useWave';
  8. export default defineComponent({
  9. compatConfig: {
  10. MODE: 3
  11. },
  12. name: 'Wave',
  13. props: {
  14. disabled: Boolean
  15. },
  16. setup(props, _ref) {
  17. let {
  18. slots
  19. } = _ref;
  20. const instance = getCurrentInstance();
  21. const {
  22. prefixCls,
  23. wave
  24. } = useConfigInject('wave', props);
  25. // ============================== Style ===============================
  26. const [, hashId] = useStyle(prefixCls);
  27. // =============================== Wave ===============================
  28. const showWave = useWave(instance, computed(() => classNames(prefixCls.value, hashId.value)), wave);
  29. let onClick;
  30. const clear = () => {
  31. const node = findDOMNode(instance);
  32. node.removeEventListener('click', onClick, true);
  33. };
  34. onMounted(() => {
  35. watch(() => props.disabled, () => {
  36. clear();
  37. nextTick(() => {
  38. const node = findDOMNode(instance);
  39. node === null || node === void 0 ? void 0 : node.removeEventListener('click', onClick, true);
  40. if (!node || node.nodeType !== 1 || props.disabled) {
  41. return;
  42. }
  43. // Click handler
  44. onClick = e => {
  45. // Fix radio button click twice
  46. if (e.target.tagName === 'INPUT' || !isVisible(e.target) ||
  47. // No need wave
  48. !node.getAttribute || node.getAttribute('disabled') || node.disabled || node.className.includes('disabled') || node.className.includes('-leave')) {
  49. return;
  50. }
  51. showWave();
  52. };
  53. // Bind events
  54. node.addEventListener('click', onClick, true);
  55. });
  56. }, {
  57. immediate: true,
  58. flush: 'post'
  59. });
  60. });
  61. onBeforeUnmount(() => {
  62. clear();
  63. });
  64. return () => {
  65. var _a;
  66. // ============================== Render ==============================
  67. const children = (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)[0];
  68. return children;
  69. };
  70. }
  71. });