anchor-link.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. import { defineVxeComponent } from '../../ui/src/comp';
  2. import XEUtils from 'xe-utils';
  3. import { createEvent, renderEmptyElement } from '../../ui';
  4. import { assembleAnchorLink, destroyAnchorLink } from './util';
  5. export default {
  6. name: 'VxeAnchorLink',
  7. props: {
  8. content: [String, Number],
  9. title: [String, Number],
  10. href: String
  11. },
  12. inject: {
  13. $xeAnchor: {
  14. default: null
  15. },
  16. $xeParentAnchorLink: {
  17. from: '$xeAnchorLink',
  18. default: null
  19. }
  20. },
  21. provide() {
  22. const $xeAnchorLink = this;
  23. return {
  24. $xeAnchorLink
  25. };
  26. },
  27. data() {
  28. const xID = XEUtils.uniqueId();
  29. const reactData = {};
  30. const linkConfig = {
  31. id: xID,
  32. href: '',
  33. children: []
  34. };
  35. return {
  36. xID,
  37. reactData,
  38. linkConfig
  39. };
  40. },
  41. computed: Object.assign(Object.assign({}, {}), { computeIsActive() {
  42. const $xeAnchorLink = this;
  43. const props = $xeAnchorLink;
  44. const $xeAnchor = $xeAnchorLink.$xeAnchor;
  45. const { href } = props;
  46. if ($xeAnchor) {
  47. return $xeAnchor.reactData.activeHref === href;
  48. }
  49. return null;
  50. } }),
  51. watch: {
  52. href(val) {
  53. const $xeAnchorLink = this;
  54. const linkConfig = $xeAnchorLink.linkConfig;
  55. linkConfig.href = val;
  56. }
  57. },
  58. methods: {
  59. //
  60. // Method
  61. //
  62. dispatchEvent(type, params, evnt) {
  63. const $xeAnchorLink = this;
  64. $xeAnchorLink.$emit(type, createEvent(evnt, { $anchorLink: $xeAnchorLink }, params));
  65. },
  66. clickEvent(event) {
  67. const $xeAnchorLink = this;
  68. const props = $xeAnchorLink;
  69. const $xeAnchor = $xeAnchorLink.$xeAnchor;
  70. const { href } = props;
  71. if ($xeAnchor) {
  72. $xeAnchor.handleClickLink(event, href);
  73. }
  74. },
  75. //
  76. // Render
  77. //
  78. renderVN(h) {
  79. const $xeAnchorLink = this;
  80. const props = $xeAnchorLink;
  81. const slots = $xeAnchorLink.$scopedSlots;
  82. const { href, content, title } = props;
  83. const defaultSlot = slots.default;
  84. const subSlot = slots.sub;
  85. const isActive = $xeAnchorLink.computeIsActive;
  86. return h('div', {
  87. ref: 'refElem',
  88. class: ['vxe-anchor-link', {
  89. 'is--active': isActive
  90. }]
  91. }, [
  92. h('a', {
  93. class: 'vxe-anchor-link--item',
  94. attrs: {
  95. href,
  96. title
  97. },
  98. on: {
  99. click: $xeAnchorLink.clickEvent
  100. }
  101. }, defaultSlot ? defaultSlot({}) : (XEUtils.toValueString(content))),
  102. subSlot
  103. ? h('div', {
  104. class: 'vxe-anchor-link--sub-items'
  105. }, subSlot({}))
  106. : renderEmptyElement($xeAnchorLink)
  107. ]);
  108. }
  109. },
  110. created() {
  111. const $xeAnchorLink = this;
  112. const props = $xeAnchorLink;
  113. const linkConfig = $xeAnchorLink.linkConfig;
  114. linkConfig.href = props.href;
  115. },
  116. mounted() {
  117. const $xeAnchorLink = this;
  118. const $xeAnchor = $xeAnchorLink.$xeAnchor;
  119. const $xeParentAnchorLink = $xeAnchorLink.$xeParentAnchorLink;
  120. const linkConfig = $xeAnchorLink.linkConfig;
  121. const elem = $xeAnchorLink.$refs.refElem;
  122. if ($xeAnchor && elem) {
  123. assembleAnchorLink($xeAnchor, elem, linkConfig, $xeParentAnchorLink);
  124. }
  125. },
  126. beforeDestroy() {
  127. const $xeAnchorLink = this;
  128. const $xeAnchor = $xeAnchorLink.$xeAnchor;
  129. const linkConfig = $xeAnchorLink.linkConfig;
  130. if ($xeAnchor) {
  131. destroyAnchorLink($xeAnchor, linkConfig);
  132. }
  133. },
  134. render(h) {
  135. return this.renderVN(h);
  136. }
  137. };