Svelte 组件扩展

AfterSvelte 加载应用程序并初始化 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>

theme

这是一个具有布尔属性的对象，提供有关当前使用的主题（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

路由器实例以及当前路由通过属性传递给路由器组件：

这些属性仅适用于使用路由加载的组件（例如页面、可路由模态框、可路由标签）。如果你需要在“更深”的子组件中访问这些属性，那么你需要使用属性将其向下传递。

<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是当前路由，具有以下属性的对象：

插槽

所有 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}` 属性回调：

<Page onPageInit={onPageInit}>
  <!-- -->
</Page>
<script>
  // pageInit event has one argument with page data
  function onPageInit(pageData) {
    console.log(pageData);
  }
</script>
改进此文档
在本页上