自定义插件

velpro_!

已于 2023-09-09 17:01:59 修改

阅读量58

点赞数

文章标签： javascript 前端开发语言

于 2023-06-19 22:48:14 首次发布

本文链接：https://blog.csdn.net/weixin_52053631/article/details/131296717

版权

本文展示了如何创建一个名为myPlugins的自定义Vue插件，该插件包含一个名为upper的指令，将文本转换为大写。在main.js中引入并注册这个插件，然后在组件模板中使用v-upper指令将h1标签的内容转化为大写。

摘要由CSDN通过智能技术生成

1.创建自定义插件 js文件 myPlugins.js

let myPlugins = {}

myPlugins.install = function (Vue, options) {
    // console.log("调用")
    Vue.directive(options.name,(element,params)=>{
        // console.log(params)
        element.innerHTML=params.value.toUpperCase()
    })
}

export default myPlugins

2.在main.js中引入并注册自定义插件

//引入自定义插件
import myPlugins from "@/plugins/muPlugins";

//注册全局组件
Vue.use(myPlugins,{
  name:'upper'
})

3.在组件中使用

<template>
    <div>
        <h1 v-upper="mag"></h1>     
    </div>
</template>

<script>
export default {
data() {
        return {
            mag: 'abc'
        }
    },
}
</script>