1. makeit-tooltip

makeit-tooltip

Makeit Tooltip

基于 Vue3.0 + Vite 开发的气泡浮层,不承载复杂文本,可以替代系统默认的 title 显示的组件。

npm package
npm_downloads
MIT
webpack
vue
vite

关于

Makeit Tooltip 气泡浮层组件,基于 Vue3.0 + Vite + JSX 开发,不承载复杂的文本信息,可以替代系统默认的 title 显示,且能支持更多定制化的样式需求。

安装

 npm i makeit-tooltip

使用

 import { createApp } from 'vue'
import MakeitTooltip from 'makeit-tooltip'
import 'makeit-tooltip/dist/tooltip.min.css'
import App from './app.vue'

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

示例

<!-- 基础效果 -->
<template>
    <mi-tooltip title="提示信息"></mi-tooltip>
</template>

<!-- 自定义 Title -->
<template>
    <mi-tooltip>
        <template v-slot:title>
            <p>提示信息</p>
        </template>
    </mi-tooltip>
</template>

<!-- 定制 Trigger 触发事件 -->
<template>
    <mi-tooltip title="提示信息" trigger="click"></mi-tooltip>
</template>

<!-- 自定义背景色 -->
<template>
    <mi-tooltip title="提示信息" bg-color="#f6ca9d"></mi-tooltip>
</template>

<!-- 自定义字体颜色 -->
<template>
    <mi-tooltip title="提示信息" text-color="#f6ca9d"></mi-tooltip>
</template>

更多

更多定制化内容及使用请查看在线示例:https://admin.makeit.vip/components/tooltip

Dependencies

@babel/core: ^7.12.10@babel/plugin-proposal-class-properties: ^7.12.1@babel/plugin-proposal-export-default-from: ^7.12.1@babel/plugin-proposal-export-namespace-from: ^7.12.1@babel/plugin-proposal-object-rest-spread: ^7.12.1@babel/plugin-proposal-optional-chaining: ^7.12.7@babel/plugin-syntax-dynamic-import: ^7.8.3@babel/plugin-transform-object-assign: ^7.12.1@babel/plugin-transform-runtime: ^7.12.10@babel/plugin-transform-typescript: ^7.12.1@babel/preset-env: ^7.12.11@babel/preset-typescript: ^7.12.7@typescript-eslint/eslint-plugin: ^4.11.0@typescript-eslint/parser: ^4.11.0@vue/babel-plugin-jsx: ^1.0.0@vue/compiler-sfc: ^3.0.4@vue/eslint-config-prettier: ^6.0.0@vue/eslint-config-typescript: ^7.0.0autoprefixer: ^9.8.6babel-loader: ^8.2.2case-sensitive-paths-webpack-plugin: ^2.3.0clean-webpack-plugin: ^3.0.0compression-webpack-plugin: ^7.1.1css-loader: ^5.0.1eslint: ^7.16.0eslint-plugin-prettier: ^3.3.0eslint-plugin-vue: ^7.4.0gulp: ^4.0.2gulp-autoprefixer: ^7.0.1gulp-babel: ^8.0.0gulp-clean-css: ^4.3.0gulp-concat: ^2.6.1gulp-less: ^4.0.1gulp-sourcemaps: ^3.0.0gulp-typescript: ^6.0.0-alpha.1html-loader: ^1.3.2less: ^3.13.1less-loader: ^7.2.0less-plugin-npm-import: ^2.1.0merge2: ^1.4.1mini-css-extract-plugin: ^1.3.3optimize-css-assets-webpack-plugin: ^5.0.4postcss: ^8.2.1postcss-loader: ^4.1.0prettier: ^2.2.1rimraf: ^3.0.2terser-webpack-plugin: ^5.0.3through2: ^4.0.2ts-loader: ^8.0.12typescript: ^4.1.3url-loader: ^4.1.1vite: ^1.0.0-rc.13vue-loader: ^16.1.2vue-style-loader: ^4.1.2vue-template-compiler: ^2.6.12webpack: ^5.11.0webpack-cli: ^4.3.0webpack-merge: ^5.7.3