import { defineVxeComponent } from '../../ui/src/comp'; import XEUtils from 'xe-utils'; import { getConfig, globalMixins, createEvent, renderEmptyElement } from '../../ui'; import { getSlotVNs } from '../../ui/src/vn'; export default { name: 'VxeLink', mixins: [ globalMixins.sizeMixin, globalMixins.permissionMixin ], props: { href: String, target: String, status: String, title: [String, Number], disabled: Boolean, icon: String, routerLink: Object, underline: { type: Boolean, default: () => getConfig().link.underline }, /** * 权限码 */ permissionCode: [String, Number], content: [String, Number], size: { type: String, default: () => getConfig().link.size || getConfig().size } }, data() { const reactData = {}; return { xID: XEUtils.uniqueId(), reactData }; }, computed: Object.assign({}, {}), methods: { // // Method // dispatchEvent(type, params, evnt) { const $xeLink = this; $xeLink.$emit(type, createEvent(evnt, { $link: $xeLink }, params)); }, clickEvent(evnt) { const $xeLink = this; const props = $xeLink; const { disabled } = props; if (!disabled) { $xeLink.dispatchEvent('click', {}, evnt); } }, // // Render // renderContent(h) { const $xeLink = this; const props = $xeLink; const slots = $xeLink.$scopedSlots; const { icon, content } = props; const defaultSlot = slots.default; const iconSlot = slots.icon; const textContent = XEUtils.toValueString(content); return [ iconSlot || icon ? h('span', { class: 'vxe-link--icon' }, iconSlot ? getSlotVNs(iconSlot({})) : [ h('i', { class: icon }) ]) : renderEmptyElement($xeLink), defaultSlot || textContent ? h('span', { class: 'vxe-link--content' }, defaultSlot ? defaultSlot({}) : textContent) : renderEmptyElement($xeLink) ]; }, renderVN(h) { const $xeLink = this; const props = $xeLink; const { status, target, href, title, underline, disabled, routerLink } = props; const permissionInfo = $xeLink.computePermissionInfo; const vSize = $xeLink.computeSize; if (!permissionInfo.visible) { return renderEmptyElement($xeLink); } if (routerLink && !disabled) { return h('router-link', { class: ['vxe-link', { [`size--${vSize}`]: vSize, [`theme--${status}`]: status, 'is--disabled': disabled, 'is--underline': underline }], props: { title, target, custom: true, to: disabled ? null : routerLink }, on: { click: $xeLink.clickEvent } }, $xeLink.renderContent(h)); } return h('a', { ref: 'refElem', class: ['vxe-link', { [`size--${vSize}`]: vSize, [`theme--${status}`]: status, 'is--disabled': disabled, 'is--underline': underline }], attrs: { href: disabled ? null : href, target, title }, on: { click: $xeLink.clickEvent } }, $xeLink.renderContent(h)); } }, render(h) { return this.renderVN(h); } };