AnchorLink.js 3.0 KB

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