Nativescript vue tooltip 使用

Question

我正在使用 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

不知道该怎么做。

答案中的代码也不起作用。

Answer 1

为了通过 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>

Nativescript vue tooltip 使用

Nativescript vue tooltip use

vue.js

nativescript

nativescript-vue