欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Vue + Tippy.js打造高定制浮層提示組件(Tooltip/Popover)

 更新時間：2025年07月22日 09:57:31   作者：前端極客探險家  
這篇文章主要介紹了使用Vue + Tippy.js打造高定制浮層提示組件(Tooltip/Popover)的相關(guān)資料,支持延遲顯示、手動控制、響應(yīng)式內(nèi)容及圖片圖標等功能,適用于Tooltip、Popover、關(guān)鍵詞推薦等場景,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

一、組件簡介與技術(shù)選型

在現(xiàn)代前端開發(fā)中，浮層提示組件（Tooltip / Popover）幾乎在每個項目中都會用到。我們希望它既能樣式靈活，又能交互豐富，還要性能優(yōu)秀、易于封裝。

本次實戰(zhàn)將基于以下技術(shù)構(gòu)建高定制提示組件：

  • Vue 3：組合式 API + 插槽系統(tǒng)，便于封裝彈性強的提示組件；
  • Tippy.js：功能完善、主題豐富、交互穩(wěn)定的輕量彈出庫；
  • Floating UI：Tippy.js 背后的定位引擎，性能優(yōu)秀，支持智能翻轉(zhuǎn)、偏移、邊界控制等特性。

二、核心功能實現(xiàn)

2.1 安裝依賴

npm install @tippyjs/vue@6 tippy.js

2.2 基礎(chǔ)封裝組件（BaseTooltip.vue）

<!-- components/BaseTooltip.vue -->
<template>
  <Tippy
    :content="content"
    :interactive="interactive"
    :placement="placement"
    :theme="theme"
    :trigger="trigger"
    :animation="animation"
    :arrow="arrow"
  >
    <template #default>
      <slot />
    </template>
    <template v-if="$slots.content" #content>
      <slot name="content" />
    </template>
  </Tippy>
</template>

<script setup>
import { Tippy } from '@tippyjs/vue';

defineProps({
  content: String,
  placement: { type: String, default: 'top' },
  theme: { type: String, default: 'light' },
  trigger: { type: String, default: 'mouseenter focus' },
  animation: { type: String, default: 'shift-away' },
  arrow: { type: Boolean, default: true },
  interactive: { type: Boolean, default: false },
});
</script>

<style scoped>
.tippy-box[data-theme~='light'] {
  background-color: white;
  color: black;
  border: 1px solid #ddd;
}
</style>

2.3 基本用法

<BaseTooltip content="提示信息">
  <button>懸停我</button>
</BaseTooltip>

2.4 插入自定義 HTML 內(nèi)容

<BaseTooltip interactive>
  <template #default>
    <button>點擊查看</button>
  </template>
  <template #content>
    <div style="padding: 8px">
      <h4>Popover 標題</h4>
      <p>支持插槽內(nèi)容</p>
      <button @click="handleClick">按鈕</button>
    </div>
  </template>
</BaseTooltip>

<script setup>
function handleClick() {
  alert('按鈕被點擊');
}
</script>

三、功能拓展與優(yōu)化建議（附實現(xiàn)）

3.1 支持延遲顯示和關(guān)閉

<BaseTooltip content="延遲提示" :delay="[500, 300]">
  <span>鼠標懸停 500ms 后出現(xiàn)</span>
</BaseTooltip>

3.2 支持手動控制浮層顯隱

<template>
  <button ref="btnRef" @click="showTip">手動觸發(fā)</button>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import tippy from 'tippy.js';

const btnRef = ref(null);
let instance;

const showTip = () => {
  if (instance) {
    instance.show();
    setTimeout(() => instance.hide(), 2000);
  }
};

onMounted(() => {
  instance = tippy(btnRef.value, {
    content: '這是手動控制的提示',
    trigger: 'manual'
  });
});
</script>

3.3 響應(yīng)式提示內(nèi)容

<script setup>
import { ref } from 'vue';

const tipContent = ref('加載中...');
setTimeout(() => {
  tipContent.value = '接口加載完成';
}, 1500);
</script>

<template>
  <BaseTooltip :content="tipContent">
    <span>動態(tài)內(nèi)容提示</span>
  </BaseTooltip>
</template>

3.4 支持圖片和圖標

<BaseTooltip interactive>
  <template #default>
    <span>預(yù)覽圖片</span>
  </template>
  <template #content>
    <img src="https://picsum.photos/120/80" alt="圖像預(yù)覽" />
  </template>
</BaseTooltip>

3.5 支持關(guān)鍵詞提示推薦

<BaseTooltip interactive>
  <template #default>
    <span>搜索建議</span>
  </template>
  <template #content>
    <ul style="padding: 8px;">
      <li>Vue 3</li>
      <li>Vite</li>
      <li>Tippy.js</li>
    </ul>
  </template>
</BaseTooltip>

3.6 Popover 中支持交互式內(nèi)容提交

<BaseTooltip interactive trigger="click">
  <template #default>
    <button>點擊填寫</button>
  </template>
  <template #content>
    <form @submit.prevent="submit">
      <input v-model="msg" placeholder="輸入信息" />
      <button type="submit">提交</button>
    </form>
  </template>
</BaseTooltip>

<script setup>
import { ref } from 'vue';
const msg = ref('');
const submit = () => {
  alert('你輸入了：' + msg.value);
};
</script>

3.7 支持點擊浮層內(nèi)容進行下載（如導出圖片）

<BaseTooltip interactive trigger="click">
  <template #default>
    <span>點擊下載圖片</span>
  </template>
  <template #content>
    <img
      src="https://picsum.photos/100"
      alt="預(yù)覽圖"
      style="cursor: pointer"
      @click="download"
    />
  </template>
</BaseTooltip>

<script setup>
function download() {
  const link = document.createElement('a');
  link.;
  link.download = 'preview.jpg';
  link.click();
}
</script>

四、封裝為插件并全局注冊

4.1 tooltip.plugin.ts

import BaseTooltip from '@/components/BaseTooltip.vue';

export default {
  install(app) {
    app.component('BaseTooltip', BaseTooltip);
  }
}

4.2 main.ts 中使用

import TooltipPlugin from './plugins/tooltip.plugin';
app.use(TooltipPlugin);

五、總結(jié)

本項目基于 Vue 3 和 Tippy.js 實現(xiàn)了一個高靈活性、主題豐富、插槽支持良好的浮層提示組件，適合用于：

  • 基本 Tooltip 提示
  • Popover 彈出內(nèi)容
  • 表單浮層、關(guān)鍵詞推薦、圖像預(yù)覽等場景

可作為彈出層組件的基礎(chǔ)能力，進行下一級封裝，如 Popconfirm、Dropdown、ContextMenu、快捷操作工具條等.

到此這篇關(guān)于使用Vue + Tippy.js打造高定制浮層提示組件(Tooltip/Popover)的文章就介紹到這了,更多相關(guān)Vue Tippy.js浮層提示組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue+iview+less 實現(xiàn)換膚功能

    vue+iview+less 實現(xiàn)換膚功能

    這篇文章主要介紹了vue+iview+less 實現(xiàn)換膚功能,項目搭建用的vue—cli，css框架選擇的iview，具體操作流程大家跟隨腳本之家小編一起看看吧
    2018-08-08
  • vue基礎(chǔ)之詳解ElementUI的表單

    vue基礎(chǔ)之詳解ElementUI的表單

    這篇文章主要為大家詳細介紹了vue基礎(chǔ)之ElementUI的表單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
    2022-02-02
  • Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應(yīng)用程序

    Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應(yīng)用程序

    這篇文章主要介紹了Vue和relation-graph庫打造高質(zhì)量的關(guān)系圖應(yīng)用程序,在這篇文章中,我們深入探討了如何使用Vue和relation-graph高效打造關(guān)系圖,我們詳細介紹了數(shù)據(jù)準備、關(guān)系映射、點擊事件等關(guān)鍵步驟,需要的朋友可以參考下
    2023-09-09
  • vue項目在運行npm run build時卡住不動問題及解決方案

    vue項目在運行npm run build時卡住不動問題及解決方案

    這篇文章主要介紹了vue項目在運行npm run build時卡住不動問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2025-04-04
  • 使用Vue Router進行路由組件傳參的實現(xiàn)方式

    使用Vue Router進行路由組件傳參的實現(xiàn)方式

    Vue Router 為 Vue.js 應(yīng)用提供了完整的路由解決方案,其中包括了組件間的數(shù)據(jù)傳遞功能,通過路由組件傳參,我們可以輕松地在導航到新頁面時傳遞必要的數(shù)據(jù),本文將深入探討如何使用 Vue Router 進行路由組件間的傳參,并通過多個示例來展示其實現(xiàn)方式
    2024-09-09
  • vue實現(xiàn)一個懶加載的樹狀表格實例

    vue實現(xiàn)一個懶加載的樹狀表格實例

    這篇文章主要介紹了vue實現(xiàn)一個懶加載的樹狀表格實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-05-05
  • 基于iview的router常用控制方式

    基于iview的router常用控制方式

    這篇文章主要介紹了基于iview的router常用控制方式,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • vue 按鈕 權(quán)限控制介紹

    vue 按鈕 權(quán)限控制介紹

    這篇文章主要介紹了vue 按鈕 權(quán)限控制，在日常項目中，會碰到需要根據(jù)后臺接口返回的數(shù)據(jù)，來判斷當前用戶的操作權(quán)限，必須當有刪除權(quán)限時，就顯示刪除按鈕，下面我們就來了解一下具體的解決方法,需要的朋友也可以參考一下
    2021-12-12
  • vue 解決報錯問題小結(jié)

    vue 解決報錯問題小結(jié)

    最近入門vue,用字節(jié)跳動的arco初始化一個項目的時候報錯自己解決后沒來的及截圖,從別人那拷貝個網(wǎng)圖把,是一樣的報錯,本文給大家分享vue 解決報錯問題小結(jié),感興趣的朋友一起看看吧
    2023-09-09
  • Vue3進行路由管理的示例代碼

    Vue3進行路由管理的示例代碼

    在現(xiàn)代 Web 開發(fā)中,前端路由管理是構(gòu)建單頁面應(yīng)用（SPA）的關(guān)鍵組成部分,隨著 Vue3 的發(fā)布,Vue Router 也得到了相應(yīng)的更新,在這篇博文中,我們將詳細探討 Vue3 中的路由管理,需要的朋友可以參考下
    2025-01-01

最新評論