Question

在NuxtJS下是否集成了任何工具提示工具？目前，我尝试使用v-tooltip，但是很遗憾，我无法使用它。立即崩溃。

我在名为tooltip.js的插件文件夹中创建了文件，并在其中附加了以下代码：

import Vue from 'vue'
import VTooltip from 'v-tooltip'

Vue.use(VTooltip)

然后在我附加此文件的插件对象的nuxt.config.js中。

使用时出错：

 ERROR  Failed to compile with 1 errors                                      friendly-errors 11:04:04  


 ERROR  in ./components/Dashboard/Navigation/index.vue?vue&type=template&id=a70e9826&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): friendly-errors 11:04:04  
(Emitted value instead of an instance of Error)

  Errors compiling template:

  tag <button> has no matching end tag.

  13 |      <div class="user-panel">
  14 |        <div class="notification">
  15 |          <button v-tooltip="'You have new messages.'">
     |          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  16 |          <i class="fas fa-envelope">
  17 |            <div v-if="notification_active" class="notification-dot"></div>

                                                                             friendly-errors 11:04:04
 @ ./components/Dashboard/Navigation/index.vue?vue&type=template&id=a70e9826& 1:0-209 1:0-209
 @ ./components/Dashboard/Navigation/index.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/dashboard.vue?vue&type=script&lang=js&
 @ ./layouts/dashboard.vue?vue&type=script&lang=js&
 @ ./layouts/dashboard.vue
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                             friendly-errors 11:04:04  
» Updated components\Dashboard\Navigation\index.vue

Answer 1

对于我来说，创建

是可以的

plugins/tooltip.js

import Vue from "vue"
import { VTooltip, VPopover, VClosePopover } from "v-tooltip"

Vue.directive("tooltip", VTooltip);
Vue.directive("close-popover", VClosePopover)
Vue.component("v-popover", VPopover)

添加CSS https://github.com/Akryum/v-tooltip#style-examples

并使用

<input
  type="text"
  value=""
  class="form-control"
  v-tooltip="'Test tooltip'"
/>

是否有与NuxtJS一起使用的工具提示工具？

1 个答案: