如何將 RadSideDrawer 與 Typescript vue class 組件一起使用？

Question

我正在嘗試將外部組件與 Vue Typescript Class 組件一起使用。 我已經安裝了標准模板並根據說明修改了它的<script>塊：

    import { Vue, Component, Prop } from "vue-property-decorator";

    @Component
    export default class App extends Vue {
        msg: string = "Hello";
    }

但我收到一個錯誤： No known component for element RadSideDrawer 。

我還嘗試將RadSideDrawer包含到@Component選項中，但沒有成功：

    import { Vue, Component, Prop } from "vue-property-decorator";
    const RadSideDrawer = require('nativescript-ui-sidedrawer').RadSideDrawer;

    @Component({
        components: {
            RadSideDrawer,
        }
    })
    export default class App extends Vue {
        msg: string = "Hello";
    }

我所有的組件代碼都在這里。 我沒有修改模板的任何其他部分，所以我在main.ts中有以下幾行：

Vue.registerElement(
    'RadSideDrawer',
    () => require('nativescript-ui-sidedrawer').RadSideDrawer,
);

但它不起作用。 如何將 RadSideDrawer 與 class 組件一起使用？

Answer 1

//main.ts
...
import RadSideDrawer from 'nativescript-ui-sidedrawer/vue'
Vue.use(RadSideDrawer)
...

//mycomponent.vue
<template>
  <Page>
    <RadSideDrawer ref="drawer">
      <StackLayout ~drawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
          <Label text="Navigation Menu"></Label>
        </StackLayout>
        <Label
          text="Close Drawer"
          color="lightgray"
          padding="10"
          style="horizontal-align: center"
          @tap="onCloseDrawerTap"
        ></Label>
      </StackLayout>
      <StackLayout ~mainContent>
        <StackLayout orientation="vertical">
          <Button
            text="OPEN DRAWER"
            @tap="onOpenDrawerTap()"
            class="drawerContentButton"
          ></Button>
        </StackLayout>
      </StackLayout>
    </RadSideDrawer>
  </Page>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component({ name: 'Drawer' })
export default class Drawer extends Vue {

  private onOpenDrawerTap () {
    const ref = this.$refs.drawer as any
    ref.showDrawer()
  }
  private onCloseDrawerTap () {
    const ref = this.$refs.drawer as any
    ref.closeDrawer()
  }
}
</script>