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

2024-09-27 07:44:18

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

效果图

遇见的问题

怎么加载自定义的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文件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

详解Vue.use自定义自己的全局组件
Vue中引入样式文件的方法
Vue自定义指令使用方法详解

详解Vue.use自定义自己的全局组件

通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main.js里面引入,第三步Vue.use这个组件.今天我简单的也来use一个自己的组件. 这里我用的webpack-simple这个简单版本的脚手架为例,安装就不啰嗦了,直接进入正题首先看下目前的项目结构: webpack首先会加载main.js,所以我们在main的js里面引入.我以element ui来做对比说明 import Vue from 'vue' import App from './App.vue'
Vue自定义指令使用方法详解

Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definition是指定义对象.其中,定义对象可以提供一些钩子函数 2.钩子函数定义对象的钩子函数如下: 钩子函数的参数 el: 指令所绑定的元素,可以用来直接操作 DOM . binding: 一个对象,包含以下属性: *name: 指令名,不包括 v- 前缀. *value: 指令的绑定值, 例如: v-my
Vue中引入样式文件的方法

一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&
vue加载自定义的js文件方法

在做项目中需要自定义弹出框.就自己写了一个. 效果图遇见的问题怎么加载自定义的js文件 vue-插件这必须要看.然后就是自己写了. export default{ install(Vue){ var tpl; // 弹出框 Vue.prototype.showAlter = (title,msg) =>{ var alterTpl = Vue.extend({ // 1.创建构造器,定义好提示信息的模板 template: '<div id="bg">' + '&
Yii2框架加载css和js文件的方法分析

本文实例讲述了Yii2框架加载css和js文件的方法.分享给大家供大家参考,具体如下: 1.第一步是要把我们的css.js文件放到web目录下 2.第二步修改assets/AppAsset.php文件 <?php /** * @link http://www.yiiframework.com/ * @copyright Copyright (c) 2008 Yii Software LLC * @license http://www.yiiframework.com/license/ */ na
如何实现JavaScript动态加载CSS和JS文件

项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link =
php ci框架中加载css和js文件失败的解决方法

在将html页面整合到ci框架里面的时候,加载css和js失败,弄了半天发现ci框架是入口的框架,对框架中文件的所有请求都需要经过index.php处理完成,当加载外部的css和js文件的时候要使用base_url()函数处理外部的链接. 比如: 在config配置文件中的base_url为:" localhost:8080/项目名称/ " 在控制器中访问application/resource/aaa.js文件相对路径<script src= "resource/a
php ci框架中加载css和js文件失败的原因及解决方法

在将html页面整合到ci框架里面的时候,加载css和js失败,弄了半天发现ci框架是入口的框架, 对框架中文件的所有请求都需要经过index.php处理完成,当加载外部的css和js文件的时候要使用base_url()函数处理外部的链接. 比如: 在config配置文件中的base_url为:" localhost:8080/项目名称/ " 在控制器中访问application/resource/aaa.js文件相对路径<script src= "resource
Vue加载中动画组件使用方法详解

本文实例为大家分享了Vue加载中动画组件的使用,供大家参考,具体内容如下 (模仿ant-design加载中样式)效果图如下: ①创建Loading.vue组件: <template> <div class="m-spin-dot"> <span class="u-dot-item"></span> <span class="u-dot-item"></span&
用ajax动态加载需要的js文件

习惯了用java,在java中,需要某个类直接import就可以了,所以做javascript的时候也想实现这个效果. 前段时间,用了下dojo,里面的dojo.require的功能很不错,一看代码,晕了,一大堆东西,唉-还是自己写个简单点的,dojo.require可以引入包,我就只做一个导入js文件的. 开始用的document.write,执行顺序不对了,这是在后面进行导入,而我们总是在前面执行中就需要导入的js,这样,执行中就会报"某某未定义",就是顺序问题了. 接着,我就想用
vue加载天气组件使用方法详解

本文实例为大家分享了vue加载天气组件的使用方法,供大家参考,具体内容如下首先我们进入中国天气网生成一段代码根据需要设置天气样式复制并修改生成的这段代码到vue中将script引入修改为vue的动态引入方法 <template> <div id="weater"> <div id="weather-view-he" ref="weather"></div> <remote-scrip
Vue加载json文件的方法简单示例

本文实例讲述了Vue加载json文件的方法.分享给大家供大家参考,具体如下: 一.在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版): var appData = require('../address.json'); // 引入address.json文件 var apiRoutes = express.Router(); apiRoutes.get('/address',function (req,res) { res.jso
JS实现加载和读取XML文件的方法详解

本文实例讲述了JS实现加载和读取XML文件的方法.分享给大家供大家参考,具体如下: 有时在开发时用到 JS 加载和读取XML文件的情况,写下提供参考,这里主要是分两步完成: 1. JS加载XML文件步骤一般为(1),建立 XML DOM 对象:(2),设置加载方式,异步(推荐)或同步: (3)提供XML文件URL然后调用 load 方法:大致如下: var xmlFileName="xxFile.xml"; var xmlDoc=''; if (window.ActiveXObjec

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

您可能感兴趣的文章:

相关推荐

随机推荐