Nativescript vue 工具提示使用答案

【问题标题】：Nativescript vue tooltip useNativescript vue 工具提示使用
【发布时间】：2019-09-05 20:11:13
【问题描述】：

我正在使用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? 中的代码也不起作用。

【问题讨论】：

错误可能在这里：let tippref = this.$refs.page.tooltip;。 this.$refs.page 似乎不存在。您可以尝试删除该行吗？
是的，但是工具提示类看起来像这样export declare class ToolTip { private builder; private tip; constructor(view: any, config: ToolTipConfig); show(): void; hide(): void; static getResource(type: any, name: any): any; } 并且在构造函数中需要传递视图，并且不知道在这里传递什么，这些是什么让tippref变量试图实现传递视图跨度>
那又怎样？ this.$refs.page 不存在，因此该函数在该行中崩溃。无论如何，您都没有使用 var tippref。请删除该行。
另外，请尝试将 created 更改为 mounted。 created 可以在模板准备好之前执行。
这样吗？ mounted(){ var tipref = this.$refs.tooltip; //new ToolTip(this.nativeView.tipref,{text:"Some Text"}); // not working //new ToolTip(tipref,{text:"Some Text"}); // not working },

标签： vue.js nativescript nativescript-vue

【解决方案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>

【讨论】：

它的工作。我有类似“bulder”的错误，不得不删除android设备并重新启动和工作