Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "feat(menu-item): 修正菜单项为a标签时的跳转行为与渲染样式" #2592

Merged
merged 1 commit into from
Jul 18, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions src/menu/menu-item-props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default {
},
/** 是否禁用菜单项展开/收起/跳转等功能 */
disabled: Boolean,
/** 跳转链接,菜单项渲染为a标签,当routerLink为true时将使用Router进行路由跳转 */
/** 跳转链接 */
href: {
type: String,
default: '',
Expand All @@ -33,10 +33,6 @@ export default {
router: {
type: Object as PropType<TdMenuItemProps['router']>,
},
/**
* 菜单项内容是否渲染为使用Router进行跳转的a标签,当且仅当 Router 存在时,该 API 有效
*/
routerLink: Boolean,
/** 链接或路由跳转方式 */
target: {
type: String as PropType<TdMenuItemProps['target']>,
Expand Down
28 changes: 5 additions & 23 deletions src/menu/menu-item.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable no-nested-ternary */
import {
defineComponent, computed, inject, onMounted,
} from '@vue/composition-api';
Expand Down Expand Up @@ -41,10 +40,10 @@ export default defineComponent({
menu.select(props.value);
ctx.emit('click');

if (props.to || (props.routerLink && props.href)) {
if (props.to) {
const router = props.router || (ctx.root as Record<string, any>).$router;
const methods: string = props.replace ? 'replace' : 'push';
router[methods](props.to || props.href).catch((err: Error) => {
router[methods](props.to).catch((err: Error) => {
// vue-router 3.1.0+ push/replace cause NavigationDuplicated error
// https://github.com/vuejs/vue-router/issues/2872
// 当前path和目标path相同时,会抛出NavigationDuplicated的错误
Expand Down Expand Up @@ -77,39 +76,22 @@ export default defineComponent({
};
},
render() {
const router = this.router || this.$router;

const liContent = (
<li
v-ripple={(this.keepAnimation as Record<AnimationType, boolean>).ripple}
class={this.classes}
onClick={this.handleClick}
>
{renderTNodeJSX(this, 'icon')}
{this.routerLink ? (
<a
href={this.href ? this.href : this.to ? (router as any)?.resolve(this.to).href : ''}
target={this.target}
class={`${this.classPrefix}-menu__item-link`}
onClick={(e: MouseEvent) => e.preventDefault()}
>
<span class={`${this.classPrefix}-menu__content`}>{renderContent(this, 'default', 'content')}</span>
</a>
) : this.href ? (
<a
href={this.href}
target={this.target}
class={`${this.classPrefix}-menu__item-link`}
onClick={(e: MouseEvent) => this.disabled && e.preventDefault()}
>
{this.href ? (
<a href={this.href} target={this.target} class={`${this.classPrefix}-menu__item-link`}>
<span class={`${this.classPrefix}-menu__content`}>{renderContent(this, 'default', 'content')}</span>
</a>
) : (
<span class={`${this.classPrefix}-menu__content`}>{renderContent(this, 'default', 'content')}</span>
<span class={[`${this.classPrefix}-menu__content`]}>{renderContent(this, 'default', 'content')}</span>
)}
</li>
);

// 菜单收起,且只有本身为一级菜单才需要显示 tooltip
if (this.collapsed && /tmenu/i.test(this.$parent.$vnode?.tag)) {
return (
Expand Down
6 changes: 1 addition & 5 deletions src/menu/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export interface TdMenuItemProps {
*/
disabled?: boolean;
/**
* 跳转链接,菜单项渲染为a标签,当routerLink为true时将使用Router进行路由跳转
* 跳转链接
* @default ''
*/
href?: string;
Expand All @@ -174,10 +174,6 @@ export interface TdMenuItemProps {
* 路由对象。如果项目存在 Router,则默认使用 Router。
*/
router?: Record<string, any>;
/**
* 菜单项内容是否渲染为使用Router进行跳转的a标签,当且仅当 Router 存在时,该 API 有效
*/
routerLink?: boolean;
/**
* 链接或路由跳转方式
*/
Expand Down
Loading