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>

效果:

相关推荐
放羊郎2 天前
本地文生图使用插件(Stable Diffusion)
stable diffusion·prompt·插件
wocwin2 天前
uniapp微信小程序封装navbar组件
微信小程序·uni-app·vue3·组件封装·navbar
留白声5 天前
uniapp主题切换功能,适配H5、小程序
前端·css·小程序·uni-app·vue3·主题切换
Allen-Steven6 天前
Stable Diffusion绘画插件(ControlNet )
stable diffusion·插件·controlnet
dr李四维8 天前
uniapp从 vue2 项目迁移到 vue3流程
javascript·vue.js·uni-app·vue3·vue2·vuex·vue迁移
狼性书生10 天前
uniapp 实现的下拉菜单组件
前端·uni-app·vue·组件·插件
Jiaberrr12 天前
Vue 3 中使用 vue - pdf - embed + vue3 - pdfjs 在线预览 PDF
前端·javascript·vue.js·前端框架·pdf·vue3
努力做大神14 天前
uniapp vue3项目定义全局变量,切换底部babar时根据条件刷新页面
uni-app·vue3
DLoading00114 天前
个人常用的chrome好用插件
chrome·插件
柒@宝儿姐15 天前
如何判断一个项目用的是哪个管理器
前端·javascript·vue.js·vue3