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>

效果:

相关推荐
字节颤抖11 小时前
vite+vue3开发uni-app时低版本浏览器不支持es6语法的问题排坑笔记
前端·uni-app·es6·vue3·vite·babel·兼容
前端熊猫2 天前
Vue 3 生命周期和生命周期函数
前端·javascript·vue.js·vue3·生命周期函数
西门吹雪~4 天前
【前端面试】在Vue3中,beforeMount和mounted钩子函数有什么区别?
前端·javascript·vue.js·前端框架·vue3
西门吹雪~5 天前
Vue3 从入门到精通:全面掌握前端框架的进阶之路
vue.js·前端框架·vue3
西门吹雪~5 天前
【前端框架】Vue3 中 `setup` 函数的作用和使用方式
前端·javascript·vue.js·前端框架·vue3
西门吹雪~5 天前
【前端框架】Vue3 面试题深度解析
前端·前端框架·vue·vue3·前端面试
西门吹雪~6 天前
【前端框架】vue2和vue3的区别详细介绍
前端·javascript·vue.js·前端框架·vue3·vue2
西门吹雪~6 天前
【前端框架】深入Vue 3组件开发:构建高效灵活的前端应用
前端·vue.js·前端框架·vue3
患得患失9498 天前
【前端】【面试】ref与reactive的区别
前端·面试·vue3
sakuraxiaoyu11 天前
MHTML文件如何在前端页面展示
前端·html·vue3·js·mhtml