Question

我正在尝试将外部组件与Vue Typescript类组件一起使用。我已经安装了standard template，并根据instruction修改了其<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";
    }

我所有的组件代码是here。我没有修改模板的任何其他部分，因此在main.ts中有以下几行：

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

但是它不起作用。如何将RadSideDrawer与类组件一起使用？

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>

如何将RadSideDrawer与Typescript vue类组件一起使用？

1 个答案: