Vue3 自定义插件(plugin)

文章目录

  • [Vue3 自定义插件(plugin)](#Vue3 自定义插件(plugin))

Vue3 自定义插件(plugin)

概述

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。

用法

Vue3 插件有2种定义方式:

  • 对象形式。对象中有install方法。
  • 函数形式。函数本身就是安装方法,其中,函数可以接收两个参数,分别是安装它的应用实例和传递给app.use的额外选项。

定义插件:

对象形式:

javascript 复制代码
import Header from "../components/Header.vue";

// 对象方式:
const myPlugin = {
    install(app, options) {
        // 配置全局方法
        app.config.globalProperties.globalMethod = function (value) {
            return value.toLowerCase();
        };
        // 注册公共组件
        app.component("Header", Header);
        // 注册公共指令
        app.directive("upper", function (el, binding) {
            // 转为大写
            el.textContent = binding.value.toUpperCase();
            if (binding.arg === "small") {
                el.style.fontSize = options.small + "px";
            } else if (binding.arg === "medium") {
                el.style.fontSize = options.medium + "px";
            } else {
                el.style.fontSize = options.large + "px";
            }
        });
    }
};

export default myPlugin;

函数形式:

javascript 复制代码
import Header from "../components/Header.vue";

// 函数方式:
const myPlugin = function (app, options) {
    // 配置全局方法
    app.config.globalProperties.globalMethod = function (value) {
        // 转为小写
        return value.toLowerCase();
    };
    // 注册公共组件
    app.component("Header", Header);
    // 注册公共指令
    app.directive("upper", function (el, binding) {
        console.log("binding:", binding);
        // 转为大写
        el.textContent = binding.value.toUpperCase();
        if (binding.arg === "small") {
            el.style.fontSize = options.small + "px";
        } else if (binding.arg === "medium") {
            el.style.fontSize = options.medium + "px";
        } else {
            el.style.fontSize = options.large + "px";
        }
    });
};

export default myPlugin;

使用插件:

javascript 复制代码
import {createApp} from "vue";
import "../style.css";
import App from "./plugin.vue";
import myPlugin from "./myPlugin/index.js";

const app = createApp(App);
// 安装插件
app.use(myPlugin, {
    small: 12,
    medium: 24,
    large: 36
});
app.mount("#app");
vue 复制代码
<template>
  <Header></Header>
  <p v-upper:large="'hello large'"></p>
  <p v-upper:medium="'hello medium'"></p>
  <p v-upper:small="'hello small'"></p>
  <p>{{ globalMethod("Hello World") }}</p>
</template>

效果:

相关推荐
sen_shan2 天前
Vue3+Vite+TypeScript+Element Plus开发-22.客制Table组件
vue.js·vue3·vite·element plus·按钮组件·表组件
是二牙2 天前
vue3+vite 多个环境配置
前端·vue3·vite
緑水長流*z2 天前
(03)Vue的常用指令
前端·vue.js·vue3·vue2·vue框架·vue学习笔记·vue学习教程
装疯迷窍_A4 天前
ARCGIS国土超级工具集1.5更新说明
arcgis·插件·变更调查·电子报盘·批量分割矢量
Edward-tan5 天前
【玩转全栈】—— Django+vue3+讯飞星火API 实现前端页面实时AI答复
vue3·全栈·django5
微小冷8 天前
微软出品的AI Toolkit,在VS Code中使用DeepSeek
人工智能·microsoft·插件·vs code·deepseek
sen_shan12 天前
Vue3+Vite+TypeScript+Element Plus开发-10.多用户动态加载菜单
vue.js·typescript·vue3·element·element plus·动态菜单·多用户动态加载菜单
Samdy_Chan12 天前
同时支持Vue2/Vue3的图片懒加载组件(支持懒加载 v-html 指令梆定的 html 内容)
前端·vue·vue3·vue2·懒加载·图片懒加载·图像懒加载
USER_A00112 天前
【VUE3】Eslint 与 Prettier 的配置
vue3·eslint·prettier
sen_shan17 天前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单