Nativescript vue工具提示使用

问题描述 投票:0回答:1

我正在使用nativescript vue

我想运行这个tooltip

像教程中的代码不起作用:

 <Button text="Get Json Data" id="tool" ref="tooltip" @tap="getData" class="btn btn-primary m-t-20"></Button>

我制作了这样的按钮,并试图让它工作但是

 created() {
     let tipref = this.$refs.tooltip;
     let tippref = this.$refs.page.tooltip;
     //new ToolTip(this.nativeView.topmost().tip,{text:"Text"});
     //const tip = new ToolTip(this.nativeView.tipref,{text:"Some Text"});
     new ToolTip(tipref,{text:"Some Text"});   
},

仍然没有工作:TypeError: Cannot read property 'tooltip' of undefined TypeError: Cannot read property 'nativeView' of undefined

无法弄清楚该怎么做。

答案How to create a floating help layout?的代码也不起作用。

vue.js nativescript nativescript-vue
1个回答
0
投票

要通过ref访问NativeScript视图,您应该执行this.$refs.tooltip.nativeView。还要等待元素的加载事件,以确保它可以使用。

<template>
  <Page class="page">
    <ActionBar title="Home" class="action-bar"/>
    <ScrollView>
      <StackLayout class="home-panel">
        <Button
          text="Get Json Data"
          ref="tooltip"
          class="btn btn-primary m-t-20"
          @loaded="onLoaded"
        ></Button>
      </StackLayout>
    </ScrollView>
  </Page>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    onLoaded: function(args) {
      const ToolTip = require("nativescript-tooltip").ToolTip;
      const tip = new ToolTip(args.object, {
        text: "Some Text",
        backgroundColor: "pink",
        textColor: "black"
      });
      tip.show();
    }
  }
};
</script>
© www.soinside.com 2019 - 2024. All rights reserved.