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>

效果:

相关推荐
l1t14 小时前
测试duckdb的C插件模板的编译加工和加载
c语言·开发语言·数据库·插件·duckdb
路光.2 天前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3
Wiktok12 天前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
Wiktok12 天前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
itxh66613 天前
Chrome浏览器 “此扩展程序不再受支持,因此已停用” 解决方案
chrome·插件·chrome浏览器
Wiktok13 天前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
ITZHIHONH13 天前
FastGPT源码解析 Agent 智能体插件实现,以获取天气预报为样例
agent·ai编程·插件
知识分享小能手14 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Wiktok14 天前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
Jinuss14 天前
Vue3源码reactivity响应式篇之watch实现
前端·vue3