Svelte 组件扩展

在 Svelte 装载应用并初始化 Framework7 后，我们可以访问 Framework7 的已初始化实例和其他一些有用的属性，这些属性可以从 framework7-svelte 包中导入。

f7ready

这是一个回调函数，它将在 Framework7 完全初始化时执行。在组件中使用非常有用，您需要访问 Framework7 API 并确保它已准备就绪。因此，将所有与 Framework7 相关的逻辑放在此回调函数中是安全的。它接收已初始化的 Framework7 实例作为参数。例如

...
<script>
  import { onMount } from 'svelte';
  import { f7ready } from 'framework7-svelte';

  onMount(() => {
    f7ready(() => {
      // Framework7 initialized
      f7.dialog.alert('Component mounted');
    })
  })
</script>

f7

Framework7 的主要已初始化实例。它允许您使用任何 Framework7 API。

如果您确定在访问 Framework7 实例时，它已初始化，您可以直接导入和使用它

<script>
  import { f7 } from 'framework7-svelte';

  const doSomething = () => {
    f7.dialog.alert('Hello world');
  }

  // ...
</script>

主题

它是一个包含布尔属性的对象，其中包含有关当前使用主题（iOS 或 MD）的信息：theme.ios、theme.md。

<script>
  import { theme } from 'framework7-svelte';

  if (theme.ios) {
    console.log('Currently active theme is iOS-theme')
  }

  // ...
</script>

f7route 和 f7router

路由器实例 和当前路由通过 props 传递给路由器组件

此属性仅适用于通过路由加载的组件（例如页面、可路由模态、可路由标签）。如果您需要在“更深层”的子组件中访问此属性，则需要使用 props 传递它。

<script>
  import { onMount } from 'svelte';
  // define props so the component will receive it
  export let f7route;
  export let f7router;

  onMount(() => {
    console.log(f7route.url)
  });

  const navigate = () => {
    f7router.navigate('/some-page/');
  }
  // ...
</script>

f7route 是当前路由，包含以下属性的对象

• url - 路由 URL
• path - 路由路径
• query - 包含路由查询的对象。如果 url 为 /page/?id=5&foo=bar，则它将包含以下对象 {id: '5', foo: 'bar'}
• params - 路由参数。如果我们匹配路径为 /page/user/:userId/post/:postId/ 的路由，并且页面的 url 为 /page/user/55/post/12/，则它将是以下对象 {userId: '55', postId: '12'}
• name - 路由名称
• hash - 路由 URL 哈希
• route - 与可用路由匹配的对象

插槽

所有 Framework7 Svelte 组件都使用 slots 将子元素分发到组件结构中。但由于 Svelte 的限制，不允许在自定义组件上使用插槽，因此有时您可能需要使用虚拟 HTML 元素将其包装起来或使用 HTML 布局

例如

<Page>
  <List>
    <ListItem title="Toggle">
      <!-- wrap with extra element -->
      <span slot="after">
        <Toggle />
      </span>
    </ListItem>
  </List>
</Page>

事件

所有 Framework7 Svelte 组件都支持事件。但是，Svelte 处理事件的方式（通过发出 CustomEvent）在我们需要获取事件参数（通过 event.detail）时可能不方便，尤其是在有多个参数时。

因此，所有 Framework7 Svelte 组件都以数组形式发出带有参数的事件

<Page on:pageInit={onPageInit}>
  <!-- -->
</Page>
<script>
  // pageInit event has one argument with page data
  function onPageInit(event) {
    // it will be available in event.detail array
    const pageData = event.detail[0]
    console.log(pageData);
  }
</script>

为了解决这个问题，所有 Framework7 Svelte 组件事件都具有相同的 on${Event} prop 回调函数

<Page onPageInit={onPageInit}>
  <!-- -->
</Page>
<script>
  // pageInit event has one argument with page data
  function onPageInit(pageData) {
    console.log(pageData);
  }
</script>