vue加载自定义的js文件方法

 更新时间:2018年03月13日 09:46:51   作者:湖工电气  
下面小编就为大家分享一篇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('提示','服务器请求失败');

以上这篇vue加载自定义的js文件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vite打包项目后图片丢失的简单解决方法

    Vite打包项目后图片丢失的简单解决方法

    vue项目完成打包上线的时候很多人都会碰到静态资源找不到的情况,下面这篇文章主要给大家介绍了关于Vite打包项目后图片丢失的简单解决方法,需要的朋友可以参考下
    2023-05-05
  • vue3二次封装element-ui中的table组件的过程详解

    vue3二次封装element-ui中的table组件的过程详解

    这篇文章主要给大家介绍了vue3二次封装element-ui中的table组件的过程,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友跟着小编一起来学习吧
    2024-01-01
  • vue 使用axios 数据请求第三方插件的使用教程详解

    vue 使用axios 数据请求第三方插件的使用教程详解

    这篇文章主要介绍了vue 使用axios 数据请求第三方插件的使用 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • Vue的异步渲染axios问题

    Vue的异步渲染axios问题

    这篇文章主要介绍了Vue的异步渲染axios问题,具有很好的参考价值,希望对大家有所帮助。
    2023-03-03
  • 解决vue内存溢出报错的问题

    解决vue内存溢出报错的问题

    这篇文章主要介绍了解决vue内存溢出报错的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue路由传参及获取参数的方式总结

    vue路由传参及获取参数的方式总结

    这篇文章主要介绍了vue路由传参及获取参数的方式总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue.js弹出模态框组件开发的示例代码

    Vue.js弹出模态框组件开发的示例代码

    本篇文章主要介绍了Vue.js弹出模态框组件开发的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 手把手教你Vue3如何封装组件

    手把手教你Vue3如何封装组件

    vue2和vue3的组件封装还是有区别,下面这篇文章主要给大家介绍了关于Vue3如何封装组件的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • 从0搭建Vue3组件库如何使用 glup 打包组件库并实现按需加载

    从0搭建Vue3组件库如何使用 glup 打包组件库并实现按需加载

    这篇文章主要介绍了从0搭建Vue3组件库如何使用 glup 打包组件库并实现按需加载,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • 在vue中使用Echarts画曲线图的示例

    在vue中使用Echarts画曲线图的示例

    这篇文章主要介绍了在vue中使用Echarts画曲线图的示例,帮助大家在vue中绘制图表,感兴趣的朋友可以了解下
    2020-10-10

最新评论