vue3如何自定义js文件(插件或配置)

 更新时间:2022年08月09日 10:16:32   作者:Mosowe  
这篇文章主要介绍了vue3如何自定义js文件(插件或配置),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue3自定义js文件

在vue3中自定义的js文件,如果需要设置全局this.xxx调用方式的话,需要给方法、变量、常量export出去,调用install()方法

插件的功能范围没有严格的限制——一般有下面几种:

添加全局方法或者 property。如:vue-custom-element

添加全局资源:指令/过滤器/过渡等。如:vue-touch

通过全局混入来添加一些组件选项。如:vue-router

添加全局实例方法,通过把它们添加到 config.globalProperties 上实现。

一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router

export default {
  install: (app) => {
  }
 }

举例腾讯防水墙js调用文件

v2

// TencentCaptcha.js
import Vue from 'vue';
const appId = '*********';
Vue.prototype.$txCaptcha = (cb) => {
  const t = new window.TencentCaptcha(appId, (rsp) => {
    t.destroy();
    cb(rsp);
  }, {});
  t.show();
};
// main.js
import './config/TencentCaptcha';

使用

export default {
// ...
methods:{
    getCode () {
        this.$txCaptcha((res) => {
            this.txResult = res;
        });
    }
}
}

v3

// TencentCaptcha.js
const appId = '*********';
export default {
  install: (app) => {
    const Vue = app;
    Vue.config.globalProperties.$txCaptcha = (cb) => {
      const t = new window.TencentCaptcha(appId, (rsp) => {
        t.destroy();
        cb(rsp);
      }, {});
      t.show();
    };
  },
};
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import txCaptcha from './config/TencentCaptcha';
createApp(App).use(txCaptcha)

使用

<script setup lang="ts">
import {getCurrentInstance} from 'vue'
getCurrentInstance().appContext.config.globalProperties.$txCaptcha((res) => {
    this.txResult = res;
});
</script>

vue加载自定义的js文件

在做项目中需要自定义弹出框。就自己写了一个。

效果图

这里写图片描述

遇见的问题

怎么加载自定义的js文件

vue-插件这必须要看。然后就是自己写了。

export default{
    install(Vue){
        var tpl;
        // 弹出框
        Vue.prototype.showAlter = (title,msg) =>{
            var alterTpl = Vue.extend({     // 1、创建构造器,定义好提示信息的模板
                    template: '<div id="bg">'
                         + '<div class="jfalter">'
                         + '<div class="jfalter-title" id="title">'+ title +'</div>'
                         + '<div class="jfalter-msg" id="message">'+ msg +'</div>'
                         + '<div class="jfalter-btn" id="sureBtn" v-on:click="hideAlter">确定</div>'
                         + '</div></div>'
            });
            tpl = new alterTpl().$mount().$el;  // 2、创建实例,挂载到文档以后的地方
            document.body.appendChild(tpl);  
        }
        Vue.mixin({
          methods: {
            hideAlter: function () {
              document.body.removeChild(tpl);
            }
          }
        })
    }
}

使用

import jFAltre from '../../assets/jfAletr.js';
import Vue from 'vue';
Vue.use(jFAltre);
this.showAlter('提示','服务器请求失败');

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 使用Element时默认勾选表格toggleRowSelection方式

    使用Element时默认勾选表格toggleRowSelection方式

    这篇文章主要介绍了使用Element时默认勾选表格toggleRowSelection方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue使用Canvas在画布上添加图片方式

    vue使用Canvas在画布上添加图片方式

    这篇文章主要介绍了vue使用Canvas在画布上添加图片方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue判断内容是否滑动到底部的三种方式

    vue判断内容是否滑动到底部的三种方式

    这篇文章主要介绍了vue判断内容是否滑动到底部的三种方式,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-04-04
  • vue 单元测试的推荐插件和使用示例

    vue 单元测试的推荐插件和使用示例

    单元测试是软件开发非常基础的一部分。单元测试会封闭执行最小化单元的代码,使得添加新功能和追踪问题更容易。Vue 的单文件组件使得为组件撰写隔离的单元测试这件事更加直接。它会让你更有信心地开发新特性而不破坏现有的实现,并帮助其他开发者理解你的组件的作用。
    2021-06-06
  • Vue3中emits与attrs的区别分析

    Vue3中emits与attrs的区别分析

    这篇文章主要给大家介绍了关于Vue3中emits与attrs区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2021-10-10
  • vue项目中使用fetch的实现方法

    vue项目中使用fetch的实现方法

    这篇文章主要介绍了vue项目中使用fetch的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • electron打包中的巨坑解决记录

    electron打包中的巨坑解决记录

    这篇文章主要为大家介绍了electron打包中的巨坑解决记录,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 浅析vue 函数配置项watch及函数 $watch 源码分享

    浅析vue 函数配置项watch及函数 $watch 源码分享

    这篇文章主要介绍了vue 函数配置项watch及函数 $watch 源码分享 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Vue使用antd组件a-form-model实现数据连续添加功能

    Vue使用antd组件a-form-model实现数据连续添加功能

    这篇文章主要介绍了Vue使用antd组件a-form-model实现数据连续添加功能,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • 使用imba.io框架得到比 vue 快50倍的性能基准

    使用imba.io框架得到比 vue 快50倍的性能基准

    imba 是一种新的编程语言,可以编译为高性能的 JavaScript。可以直接用于 Web 编程(服务端与客户端)开发。这篇文章主要介绍了使用imba.io框架,得到比 vue 快50倍的性能基准,需要的朋友可以参考下
    2019-06-06

最新评论