link.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. import { defineVxeComponent } from '../../ui/src/comp';
  2. import XEUtils from 'xe-utils';
  3. import { getConfig, globalMixins, createEvent, renderEmptyElement } from '../../ui';
  4. import { getSlotVNs } from '../../ui/src/vn';
  5. export default {
  6. name: 'VxeLink',
  7. mixins: [
  8. globalMixins.sizeMixin,
  9. globalMixins.permissionMixin
  10. ],
  11. props: {
  12. href: String,
  13. target: String,
  14. status: String,
  15. title: [String, Number],
  16. disabled: Boolean,
  17. icon: String,
  18. routerLink: Object,
  19. underline: {
  20. type: Boolean,
  21. default: () => getConfig().link.underline
  22. },
  23. /**
  24. * 权限码
  25. */
  26. permissionCode: [String, Number],
  27. content: [String, Number],
  28. size: {
  29. type: String,
  30. default: () => getConfig().link.size || getConfig().size
  31. }
  32. },
  33. data() {
  34. const reactData = {};
  35. return {
  36. xID: XEUtils.uniqueId(),
  37. reactData
  38. };
  39. },
  40. computed: Object.assign({}, {}),
  41. methods: {
  42. //
  43. // Method
  44. //
  45. dispatchEvent(type, params, evnt) {
  46. const $xeLink = this;
  47. $xeLink.$emit(type, createEvent(evnt, { $link: $xeLink }, params));
  48. },
  49. clickEvent(evnt) {
  50. const $xeLink = this;
  51. const props = $xeLink;
  52. const { disabled } = props;
  53. if (!disabled) {
  54. $xeLink.dispatchEvent('click', {}, evnt);
  55. }
  56. },
  57. //
  58. // Render
  59. //
  60. renderContent(h) {
  61. const $xeLink = this;
  62. const props = $xeLink;
  63. const slots = $xeLink.$scopedSlots;
  64. const { icon, content } = props;
  65. const defaultSlot = slots.default;
  66. const iconSlot = slots.icon;
  67. const textContent = XEUtils.toValueString(content);
  68. return [
  69. iconSlot || icon
  70. ? h('span', {
  71. class: 'vxe-link--icon'
  72. }, iconSlot
  73. ? getSlotVNs(iconSlot({}))
  74. : [
  75. h('i', {
  76. class: icon
  77. })
  78. ])
  79. : renderEmptyElement($xeLink),
  80. defaultSlot || textContent
  81. ? h('span', {
  82. class: 'vxe-link--content'
  83. }, defaultSlot ? defaultSlot({}) : textContent)
  84. : renderEmptyElement($xeLink)
  85. ];
  86. },
  87. renderVN(h) {
  88. const $xeLink = this;
  89. const props = $xeLink;
  90. const { status, target, href, title, underline, disabled, routerLink } = props;
  91. const permissionInfo = $xeLink.computePermissionInfo;
  92. const vSize = $xeLink.computeSize;
  93. if (!permissionInfo.visible) {
  94. return renderEmptyElement($xeLink);
  95. }
  96. if (routerLink && !disabled) {
  97. return h('router-link', {
  98. class: ['vxe-link', {
  99. [`size--${vSize}`]: vSize,
  100. [`theme--${status}`]: status,
  101. 'is--disabled': disabled,
  102. 'is--underline': underline
  103. }],
  104. props: {
  105. title,
  106. target,
  107. custom: true,
  108. to: disabled ? null : routerLink
  109. },
  110. on: {
  111. click: $xeLink.clickEvent
  112. }
  113. }, $xeLink.renderContent(h));
  114. }
  115. return h('a', {
  116. ref: 'refElem',
  117. class: ['vxe-link', {
  118. [`size--${vSize}`]: vSize,
  119. [`theme--${status}`]: status,
  120. 'is--disabled': disabled,
  121. 'is--underline': underline
  122. }],
  123. attrs: {
  124. href: disabled ? null : href,
  125. target,
  126. title
  127. },
  128. on: {
  129. click: $xeLink.clickEvent
  130. }
  131. }, $xeLink.renderContent(h));
  132. }
  133. },
  134. render(h) {
  135. return this.renderVN(h);
  136. }
  137. };