| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- 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);
- }
- };
|