AnchorLink.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode } from "vue";
  3. import { defineComponent, nextTick, onBeforeUnmount, onMounted, watch } from 'vue';
  4. import { initDefaultProps } from '../_util/props-util';
  5. import classNames from '../_util/classNames';
  6. import useConfigInject from '../config-provider/hooks/useConfigInject';
  7. import { useInjectAnchor } from './context';
  8. import { objectType, anyType } from '../_util/type';
  9. export const anchorLinkProps = () => ({
  10. prefixCls: String,
  11. href: String,
  12. title: anyType(),
  13. target: String,
  14. /* private use */
  15. customTitleProps: objectType()
  16. });
  17. export default defineComponent({
  18. compatConfig: {
  19. MODE: 3
  20. },
  21. name: 'AAnchorLink',
  22. inheritAttrs: false,
  23. props: initDefaultProps(anchorLinkProps(), {
  24. href: '#'
  25. }),
  26. slots: Object,
  27. setup(props, _ref) {
  28. let {
  29. slots,
  30. attrs
  31. } = _ref;
  32. let mergedTitle = null;
  33. const {
  34. handleClick: contextHandleClick,
  35. scrollTo,
  36. unregisterLink,
  37. registerLink,
  38. activeLink
  39. } = useInjectAnchor();
  40. const {
  41. prefixCls
  42. } = useConfigInject('anchor', props);
  43. const handleClick = e => {
  44. const {
  45. href
  46. } = props;
  47. contextHandleClick(e, {
  48. title: mergedTitle,
  49. href
  50. });
  51. scrollTo(href);
  52. };
  53. watch(() => props.href, (val, oldVal) => {
  54. nextTick(() => {
  55. unregisterLink(oldVal);
  56. registerLink(val);
  57. });
  58. });
  59. onMounted(() => {
  60. registerLink(props.href);
  61. });
  62. onBeforeUnmount(() => {
  63. unregisterLink(props.href);
  64. });
  65. return () => {
  66. var _a;
  67. const {
  68. href,
  69. target,
  70. title = slots.title,
  71. customTitleProps = {}
  72. } = props;
  73. const pre = prefixCls.value;
  74. mergedTitle = typeof title === 'function' ? title(customTitleProps) : title;
  75. const active = activeLink.value === href;
  76. const wrapperClassName = classNames(`${pre}-link`, {
  77. [`${pre}-link-active`]: active
  78. }, attrs.class);
  79. const titleClassName = classNames(`${pre}-link-title`, {
  80. [`${pre}-link-title-active`]: active
  81. });
  82. return _createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
  83. "class": wrapperClassName
  84. }), [_createVNode("a", {
  85. "class": titleClassName,
  86. "href": href,
  87. "title": typeof mergedTitle === 'string' ? mergedTitle : '',
  88. "target": target,
  89. "onClick": handleClick
  90. }, [slots.customTitle ? slots.customTitle(customTitleProps) : mergedTitle]), (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]);
  91. };
  92. }
  93. });