| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- import { defineVxeComponent } from '../../ui/src/comp';
- import XEUtils from 'xe-utils';
- import { createEvent, renderEmptyElement } from '../../ui';
- import { assembleAnchorLink, destroyAnchorLink } from './util';
- export default {
- name: 'VxeAnchorLink',
- props: {
- content: [String, Number],
- title: [String, Number],
- href: String
- },
- inject: {
- $xeAnchor: {
- default: null
- },
- $xeParentAnchorLink: {
- from: '$xeAnchorLink',
- default: null
- }
- },
- provide() {
- const $xeAnchorLink = this;
- return {
- $xeAnchorLink
- };
- },
- data() {
- const xID = XEUtils.uniqueId();
- const reactData = {};
- const linkConfig = {
- id: xID,
- href: '',
- children: []
- };
- return {
- xID,
- reactData,
- linkConfig
- };
- },
- computed: Object.assign(Object.assign({}, {}), { computeIsActive() {
- const $xeAnchorLink = this;
- const props = $xeAnchorLink;
- const $xeAnchor = $xeAnchorLink.$xeAnchor;
- const { href } = props;
- if ($xeAnchor) {
- return $xeAnchor.reactData.activeHref === href;
- }
- return null;
- } }),
- watch: {
- href(val) {
- const $xeAnchorLink = this;
- const linkConfig = $xeAnchorLink.linkConfig;
- linkConfig.href = val;
- }
- },
- methods: {
- //
- // Method
- //
- dispatchEvent(type, params, evnt) {
- const $xeAnchorLink = this;
- $xeAnchorLink.$emit(type, createEvent(evnt, { $anchorLink: $xeAnchorLink }, params));
- },
- clickEvent(event) {
- const $xeAnchorLink = this;
- const props = $xeAnchorLink;
- const $xeAnchor = $xeAnchorLink.$xeAnchor;
- const { href } = props;
- if ($xeAnchor) {
- $xeAnchor.handleClickLink(event, href);
- }
- },
- //
- // Render
- //
- renderVN(h) {
- const $xeAnchorLink = this;
- const props = $xeAnchorLink;
- const slots = $xeAnchorLink.$scopedSlots;
- const { href, content, title } = props;
- const defaultSlot = slots.default;
- const subSlot = slots.sub;
- const isActive = $xeAnchorLink.computeIsActive;
- return h('div', {
- ref: 'refElem',
- class: ['vxe-anchor-link', {
- 'is--active': isActive
- }]
- }, [
- h('a', {
- class: 'vxe-anchor-link--item',
- attrs: {
- href,
- title
- },
- on: {
- click: $xeAnchorLink.clickEvent
- }
- }, defaultSlot ? defaultSlot({}) : (XEUtils.toValueString(content))),
- subSlot
- ? h('div', {
- class: 'vxe-anchor-link--sub-items'
- }, subSlot({}))
- : renderEmptyElement($xeAnchorLink)
- ]);
- }
- },
- created() {
- const $xeAnchorLink = this;
- const props = $xeAnchorLink;
- const linkConfig = $xeAnchorLink.linkConfig;
- linkConfig.href = props.href;
- },
- mounted() {
- const $xeAnchorLink = this;
- const $xeAnchor = $xeAnchorLink.$xeAnchor;
- const $xeParentAnchorLink = $xeAnchorLink.$xeParentAnchorLink;
- const linkConfig = $xeAnchorLink.linkConfig;
- const elem = $xeAnchorLink.$refs.refElem;
- if ($xeAnchor && elem) {
- assembleAnchorLink($xeAnchor, elem, linkConfig, $xeParentAnchorLink);
- }
- },
- beforeDestroy() {
- const $xeAnchorLink = this;
- const $xeAnchor = $xeAnchorLink.$xeAnchor;
- const linkConfig = $xeAnchorLink.linkConfig;
- if ($xeAnchor) {
- destroyAnchorLink($xeAnchor, linkConfig);
- }
- },
- render(h) {
- return this.renderVN(h);
- }
- };
|