Csharp 我如何为我的Blazor应用程序构建一个动态教程标注

我过go 曾用Shepherd在我的Blazor应用程序中创建了一个互动旅游.

我的做法是:

1. 用自定义属性装饰我要突出显示的对象
2. 在某个HTML块中定义游览步骤(最好使用Razor组件以Blazor方式完成)
3. 使用调用自定义JS函数的事件处理程序触发浏览
4. 根据步骤2中构建的教程步骤构建Shepherd教程

这允许您在同一页面中定义任意数量的旅游.按需构建巡视意味着您可以确保Blazor已经呈现了该HTML，而不是采用JS优先的方法.

1. Decorate the tour targets

将自定义属性添加到您希望作为浏览的一部分突出显示的现有HTML元素.

我使用了属性data-tour-step，但使用合适的名称空间会更有意义.

<div data-tour-step="first-object">
  This is the first object I want to highlight
</div>
<div>
  Some object that I don't want to highlight
</div>
<div data-tour-step="second-object">
  This is the second object I want to highlight
</div>

2. Define the tour steps个

我在剃须刀组件中定义了巡视步骤，为巡视指定了一个名称(我们将在后面使用)，以及一系列引用我们在步骤1中创建的步骤名称的步骤.描述将在巡视期间呈现.

出于本例的目的，我使用了纯文本，但Shepherd在这里允许使用HTML(您可以从文档中了解如何做到这一点).

<TourContainer Name="My-Tour">
  <TourStep Target="first-object">Some tour step description</TourStep>
  <TourStep Target="second-object">Some other tour step description</TourStep>
</TourContainer>

TourContainer.razor

<div data-tour-name="@Name">
  @ChildContent
</div>

@code {
  [Parameter]
  public RenderFragment? ChildContent { get; set; }
 
  [Parameter]
  public string? Name { get; set; }
}

TourStep.razor

<div data-tour-step data-target="@Target">
  @ChildContent
</div>

@code {
  [Parameter]
  public RenderFragment? ChildContent { get; set; }
 
  [Parameter]
  public string? Target { get; set; }
}

3. Trigger the tour个

使用某个事件处理程序来调用我们将在步骤4中定义的JS函数.我们只需要传入游览的名称-其他一切都已经定义好了.

<button @onclick="() => StartTour("My-Tour")">开始巡演!</button>

@inject IJSRuntime JSRuntime
@code {
  private async Task StartTour(string name)
  {
    await JSRuntime.InvokeAsync("tour.start", name);
  }
}

4. Build and run the Shepherd tour个

在这里，我向Window对象添加了一个函数，以便可以从Blazor调用它.

给定旅游名称后，我们将:

1. 创建一个Shepherd Tour实例
2. 查找带有游览名称的元素
3. 对于教程容器中的每个步骤，找到目标元素并将该步骤添加到Shepherd教程中
4. 开始巡演

(function() {
  window.tour = {
    start: name => {
            // create a Shepherd tour
      const tour = new Shepherd.Tour({
        useModalOverlay: true,
        defaultStepOptions: {
            classes: 'shadow-md bg-purple-dark',
            scrollTo: true
        }
      });
      
      // add the steps from our step container
      const containerEl = document.querySelector(`[data-tour-name="${name}"]`);
      const stepEls = containerEl.querySelectorAll('[data-tour-step]');
      stepEls.forEach(stepEl => {
        const stepName = stepEl.getAttribute('data-target');
        const target = document.querySelector(`[data-tour-step="${stepName}"]`);
      
        // add the step to the Shepherd tour
        tour.addStep({
            // you would need to take a better approach when not just dealing with plain text
            text: stepEl.innerHTML,
            attachTo: {
                element: target,
                on: 'bottom'
            },
            buttons: [
                {
                    text: 'Next',
                    action: tour.next
                }
            ]
        });
      }); 
      
      tour.start();                  
    }
  };
})();

基本的例子:https://blazorfiddle.com/s/skrry93w.我在这里没有使用剃刀组件，但方法通常是相同的.