如何使带有悬浮事件的元素中的v菜单起作用

如何解决如何使带有悬浮事件的元素中的v菜单起作用

import { Component,OnInit,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async,ComponentFixture,Testbed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { RouterLinkWithHref,RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

import {
  Bookmark,RouteOrRedirectComponent,RouteOrRedirectLinkContentDirective,} from './router-or-redirect.component';

@Component({
  selector: 'app-test',template: `
    <app-router-or-redirect class="default-no-content"></app-router-or-redirect>

    <app-router-or-redirect class="default-with-content">
      <div *appLinkContent>test link</div>
    </app-router-or-redirect>

    <app-router-or-redirect
      class="use-route"
      route="/test"
      externalLink="localhost:4200"
    >
      <div *appLinkContent>test link</div>
    </app-router-or-redirect>

    <app-router-or-redirect
      class="use-redirect"
      route="/test"
      externalLink="localhost:4200"
      [redirect]="true"
    >
      <div *appLinkContent>test link</div>
    </app-router-or-redirect>

    <app-router-or-redirect
      class="link-with-context"
      route="/test"
      externalLink="localhost:4200"
      [redirect]="true"
      [bookmark]="bookmark"
    >
      <div *appLinkContent="let bookmark">
        <img [attr.src]="bookmark.imgurl" />
        <h3>{{ bookmark.title }}</h3>
      </div>
    </app-router-or-redirect>
  `,styles: [],})
export class TestRouterOrRedirectComponent implements OnInit {
  bookmark: Bookmark = {
    id: '1',title: 'Test Link',imgurl: 'https://placeimg.com/640/480/any',};

  constructor() {}

  ngOnInit(): void {}
}

describe('RouterOrRedirectComponent',() => {
  let component: TestRouterOrRedirectComponent;
  let fixture: ComponentFixture<TestRouterOrRedirectComponent>;

  let defaultWithNoContent: RouteOrRedirectComponent;
  let defaultWithContent: RouteOrRedirectComponent;
  let useRoute: RouteOrRedirectComponent;
  let useRedirect: RouteOrRedirectComponent;

  beforeEach(async(() => {
    Testbed.configureTestingModule({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],imports: [RouterModule,RouterTestingModule],declarations: [
        TestRouterOrRedirectComponent,],}).compileComponents();
  }));

  beforeEach(() => {
    fixture = Testbed.createComponent(TestRouterOrRedirectComponent);
    component = fixture.componentInstance;

    defaultWithNoContent = fixture.debugElement.children[0].componentInstance;
    defaultWithContent = fixture.debugElement.children[1].componentInstance;
    useRoute = fixture.debugElement.children[2].componentInstance;
    useRedirect = fixture.debugElement.children[3].componentInstance;

    fixture.detectChanges();
  });

  it('should create',() => {
    expect(component).toBeTruthy();
  });

  it('should default to link with route point to /',() => {
    const link = fixture.debugElement
      .query(By.css('.default-no-content'))
      .query(By.directive(RouterLinkWithHref));

    expect(link).toBeTruthy();
    expect(link.attributes.href).toBe('/');
  });

  it('should default to link with content and route points to /',() => {
    const link = fixture.debugElement
      .query(By.css('.default-with-content'))
      .query(By.directive(RouterLinkWithHref));

    expect(link.attributes.href).toBe('/');
    expect(link.nativeElement.textContent).toBe('test link');
  });

  it('should use routerLink for <a> tag if "redirect" binding is not specified',() => {
    const link = fixture.debugElement
      .query(By.css('.use-route'))
      .query(By.directive(RouterLinkWithHref));

    expect(link.attributes.href).toBe('/test');
    expect(link.nativeElement.textContent).toBe('test link');
  });

  it('should default "redirect" binding to false',() => {
    expect(useRoute.redirect).toBe(false);
  });

  it('should use href for <a> tag if "redirect" is true',() => {
    const link = fixture.debugElement
      .query(By.css('.use-redirect'))
      .query(By.css('a'));

    expect(useRedirect.redirect).toBe(true);
    expect(link.query(By.directive(RouterLinkWithHref))).toBeNull();

    expect(link.nativeElement.href).toBe('localhost:4200');
    expect(link.nativeElement.textContent).toBe('test link');
    expect(useRoute.redirect).toBe(false);
  });

  it('should use the bound value as the link template context',() => {
    const link = fixture.debugElement
      .query(By.css('.link-with-context'))
      .query(By.css('a'));

    expect(link.query(By.css('h3')).nativeElement.textContent).toContain(
      component.bookmark.title
    );
    expect(
      link.query(By.css('img')).nativeElement.getAttribute('src')
    ).toContain(component.bookmark.imgurl);
    expect(useRoute.redirect).toBe(false);
  });
});

我希望像pinterest的imagee card这样的组件 使用Vue，Vuetify，v菜单，v悬停，mouseevnet

我以为它可以用，但是有点模棱两可。 “ v-menu__content”呈现在元素外部并添加鼠标事件，然后它工作起来很奇怪。

如果我在'img-card'上添加功能并尝试在下拉菜单上悬停，它将消失..因为下拉菜单不在'img-card'之外 或者它反复打开和关闭。

我想修复不自然的东西。 我只是放弃使用“ v-menu”吗？ -_-

如果我的问题缺少内容，请告诉我。

解决方法

也许有帮助

当我将鼠标悬停在上方时，会显示此工具提示

<v-tooltip top max-width="500">
  <template v-slot:activator="{ on }">
    <v-icon v-on="on">info_outlined</v-icon>
  </template>
  <span>
    EXAMPLE TEXT
  </span>
</v-tooltip>