Floating Vue 技术文档

最新推荐文章于 2025-03-25 11:09:31 发布

武晔研Dillon

最新推荐文章于 2025-03-25 11:09:31 发布

阅读量721

点赞数 12

本文链接：https://blog.csdn.net/gitblog_01206/article/details/143042979

版权

Floating Vue 技术文档

floating-vue 💬 Easy tooltips, popovers, dropdown, menus... for Vue 项目地址: https://gitcode.com/gh_mirrors/fl/floating-vue

项目介绍

Floating Vue 是一个用于创建工具提示、下拉菜单和菜单的 Vue.js 库。它基于 Floating UI，提供了简单易用的 API 和强大的配置能力。Floating Vue 支持 Vue 2 和 Vue 3，并且已经从 v-tooltip 重命名为 floating-vue。

安装指南

使用 npm 安装

npm install floating-vue

使用 yarn 安装

yarn add floating-vue

项目使用说明

基本使用

在 Vue 项目中引入 Floating Vue：

import { createApp } from 'vue';
import FloatingVue from 'floating-vue';
import 'floating-vue/dist/style.css';

const app = createApp(App);
app.use(FloatingVue);
app.mount('#app');

示例代码

<template>
  <div>
    <button v-tooltip="'这是一个工具提示'">Hover me</button>
  </div>
</template>

项目 API 使用文档

`v-tooltip` 指令

v-tooltip 指令用于在元素上添加工具提示。

参数

value (String): 工具提示的文本内容。
options (Object): 配置工具提示的选项。

示例

<button v-tooltip="{ content: '这是一个工具提示', placement: 'top' }">Hover me</button>

`v-dropdown` 指令

v-dropdown 指令用于创建下拉菜单。

参数

value (String): 下拉菜单的内容。
options (Object): 配置下拉菜单的选项。

示例

<div v-dropdown="{ content: '这是一个下拉菜单', placement: 'bottom' }">
  Click me
</div>

项目安装方式

Floating Vue 可以通过 npm 或 yarn 进行安装。安装后，需要在 Vue 项目中引入并注册 Floating Vue。

安装命令

npm install floating-vue

或

yarn add floating-vue

引入和注册

import { createApp } from 'vue';
import FloatingVue from 'floating-vue';
import 'floating-vue/dist/style.css';

const app = createApp(App);
app.use(FloatingVue);
app.mount('#app');