亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

<p>對於Vue2有類似的問題，建議使用<code>$options</code>。 </p> <p>但是對於Vue 3似乎不起作用。 </p> <p>首先，Vue 3的文檔中說，<code>$options</code>是唯讀的。 </p> <p>所以當(dāng)我嘗試在元件掛載時初始化實(shí)例中的tooltip時，我得到了非常奇怪的行為，當(dāng)顯示工具提示時，它們是從最後創(chuàng)建的元件中顯示的，所以似乎<code> ;$options</code>在某種程度上是「全域」的？ </p> <p>當(dāng)將<code>tooltip</code>放入<code>data</code>中時，一切正常，但顯然tooltip不應(yīng)該是響應(yīng)式的，我想將其放在< code>data</code>之外。 </p> <pre class="brush:html;toolbar:false;"><template> <i :class="['bi ', icon, hover && 'text-primary']" class="bg-body" @mouseover="hover = true; $options.tooltip.show();" @mouseleave="hover = false; $options.tooltip.hide();" @click="$options.tooltip.hide();" style="cursor: pointer" :title="title" ref="icon" /> </template> <script> import {Tooltip} 從 "bootstrap"; export default { props: ["icon", "title"], tooltip: null, data() { return { hover: false } }, mounted() { this.$options.tooltip = new Tooltip(this.$refs.icon,{ placement: 'bottom', trigger: 'manual', title: this.title || '' }); }, } </script> </pre></p>

<script>
export default {
  // tooltip: null,
  mounted() {
    // this.$options.tooltip = new Tooltip(...)
    this.tooltip = new Tooltip(...)
  },
}
</script>

<template>
  <!-- BEFORE -->
  <i
      @mouseover="hover = true; $options.tooltip.show();"
      @mouseleave="hover = false; $options.tooltip.hide();"
      @click="$options.tooltip.hide();"
      ref="icon"
  />

  <!-- AFTER -->
  <i
      @mouseover="hover = true; tooltip.show();"
      @mouseleave="hover = false; tooltip.hide();"
      @click="tooltip.hide();"
      ref="icon"
  />
</template>