精华内容
下载资源
问答
  • 项目中会遇到一个组件/方法, 在多个地方被调用,比较方便的的方式之一,this.$custom(agruments) 这样就比较方便,不然用组件引入的办法调用就就比较麻烦,每可能都需要这样调用import coustom from './coustom'...

    项目中会遇到一个组件/方法, 在多个地方被调用,比较方便的的方式之一,this.$custom(agruments) 这样就比较方便

    ,不然用组件引入的办法调用就就比较麻烦,每可能都需要这样调用

    import coustom from './coustom'

    export default {

    components: {

    coustom

    }

    }

    换个办法以自定义alert 为例

    就这么一句就调用出来

    this.$alert('哈哈哈');

    alert.vue 如下

    export default {

    name: 'Alert',

    methods: {

    close: function() {

    this.show = false

    }

    }

    }

    对然后将Alert 挂载到vue全局  index.js

    function install(Vue) {

    Object.defineProperty(Vue.prototype, '$alert', {

    get() {

    let div = document.createElement('div')

    document.body.appendChild(div);

    return (message) => {

    const Constructor = Vue.extend(Alert)

    let Instance = new Constructor({

    data() {

    return {

    message: message,

    show: true

    }

    }

    }).$mount(div);

    };

    }

    });

    }

    export default install

    最后vue.use 一下

    import alert from 'index'

    Vue.use(alert)

    就能直接调用了

    当然前面有个坑 transition 的 vue 的过渡 alert的div不是一开始就加载到文档上的,通过后面的

    document.body.appendChild(div);

    动态写入,就造成 alert 显示时看不到transition效果,抛开vue来说也会遇到这样的情况 可以settimeout 下 给append的元素 addClass

    同理在vue 中也可以,当然还有更好的办法暂时没想到。。。。

    alert 只是纯的 传递一个param 但是需要 传递一个function 时,比如confirem

    this.$confirm('请确定你是傻逼', () => console.log('yes')})

    还是相同的味道,相同的道理

    Confirm.vue

    export default {

    name: 'Confirm',

    methods: {

    close: function() {

    this.show = false

    },

    ConfirmSure() {

    this.confirmSure()//确定关闭 由install 传入

    this.close()

    }

    }

    }

    import Confirm from './Confirm.vue'

    function install(Vue) {

    Object.defineProperty(Vue.prototype, '$confirm', {

    get() {

    let div = document.createElement('div')

    document.body.appendChild(div);

    return (message, confirmSure) => {

    const Constructor = Vue.extend(Confirm)

    const Instance = new Constructor({

    data() {

    return {

    message: message,

    show: true

    }

    },

    methods: {

    confirmSure: confirmSure //确定方法

    }

    }).$mount(div);

    };

    }

    });

    }

    export default install

    同样use 一下

    import alert from 'index' Vue.use(alert)

    this.$confirm('你是猴子请来的唐僧么', () => console.log('yes,哈哈哈哈哈'))

    传了两个arguments,累了吧,轻松点,

    片分三级,嗯········参数也得 至少能传 三个。。。。

    嗯,往哪里看呐···!

    这里传递的params 才传递到第二个,才实现第二个功能,要么要实现第三个功能呢,dialog对话框内容,根据环境应用环境传递进去显示

    如此中间的form 表单是动态传递进入的

    1+1=?

    v-validate="'required|min:1'" placeholder="请输入答案">

    请输入答案

    export default {

    name: 'oneaddone',

    data() {

    return {

    input: {

    value: null

    }

    }

    }

    }

    用到了前端验证 vue veevalidate 这样传递进去 要调教数据时,触发验证,就是父组件调用子组件的方法

    this.$children 即可

    dialog.vue

    export default {

    name: 'dialog',

    data() {

    return {

    Submit: () => {}

    }

    },

    methods: {

    close() {

    this.show = false

    },

    setSubmit(dataKey, Submit) {

    this.submit = () => { //给submit btn 设置提交方法

    this.$children.map(function (child) {

    let data = child.$data[dataKey] //data 的key 调用时传递的 data key 可以根据情景定义

    child.$validator.validateAll().then((result) => {

    if (result) {

    Submit(data).then(res => {

    if (res) this.close()

    })

    }

    });

    })

    }

    },

    }

    }

    再来一遍

    import dialog from './dialog.vue'

    function install(Vue) {

    Object.defineProperty(Vue.prototype, '$dialog', {

    get() {

    let div = document.createElement('div');

    document.body.appendChild(div);

    return (message, modalBody) => {

    const Constructor = Vue.extend(dialog)

    const Instance = new Constructor({

    data() {

    return {

    message: message,

    show: true,

    modalBody: modalBody

    }

    }

    }).$mount(div)

    return Instance.setSubmit //放回 一个方法用于 传递 自定义的数据和 submit 时方法

    };

    }

    });

    }

    export default install

    Vue.use 同上

    this.$dialog('请计算下面的数学题', resolve =>

    require(['./oneaddone.vue'], resolve))('input', (data) => {

    this.$alert('哈哈哈,正确')

    console.log(data)

    return data

    }

    )

    PS:这里需要注意的是 this.$dialog()(); 是这样的 因为里面返回的是一个方法,同时$mount 不能直接挂载在body 或者html下 必须在body的 子元素中  所以,createElement('div')

    1+1 = 2 答案正确········

    有需要的交流的可以加个好友

    展开全文
  • Vue项目开发中,肯定会有这样一个场景:在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象深拷贝,返回数据类型,复制文本等等。这时候我们就需要把常用函数抽离出来,提供给全局使用。那如何才能...

    1,前言


    在Vue项目开发中,肯定会有这样一个场景:在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象深拷贝,返回数据类型,复制文本等等。这时候我们就需要把常用函数抽离出来,提供给全局使用。那如何才能定义一个工具函数类,让我们在全局环境中都可以使用呢?请看下文分解。

    PS:本文vue为2.6.12

    2,第一种方式


    直接添加到Vue实例原型上

    首先打开main.js,通过import引入定义的通用方法utils.js文件,然后使用Vue.prototype.$utils = utils,添加到Vue实例上

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import utils from './utils/Utils'
    
    Vue.prototype.$utils = utils
    
    new Vue({
    	router,
    	store,
    	render: h => h(App)
    }).$mount('#app')
    

    之后,在组件页面中,需要使用的话,就是this.$utils.xxx就行了

    methods: {
    	fn() {
    		let time = this.$utils.formatTime(new Date())
    	}
    }
    

    缺点:

    • 绑定的东西多了会使vue实例过大
    • 每次使用都要加上this

    优点:

    • 定义简单

    官方说明文档

    3,第二种方式


    使用webpack.ProvidePlugin全局引入

    首先在vue.config中引入webpackpath,然后在module.exportsconfigureWebpack对象中定义plugins,引入你需要的js文件

    完整的vue.config.js配置如下:

    const baseURL = process.env.VUE_APP_BASE_URL
    const webpack = require('webpack')
    const path = require("path")
    
    module.exports = {
    	publicPath: './',
    	outputDir: process.env.VUE_APP_BASE_OUTPUTDIR,
    	assetsDir: 'assets',
    	lintOnSave: true,
    	productionSourceMap: false,
    	configureWebpack: {
    		devServer: {
    			open: false,
    			overlay: {
    				warning: true,
    				errors: true,
    			},
    			host: 'localhost',
    			port: '9000',
    			hotOnly: false,
    			proxy: {
    				'/api': {
    					target: baseURL,
    					secure: false,
    					changeOrigin: true, //开启代理
    					pathRewrite: {
    						'^/api': '/',
    					},
    				},
    			}
    		},
    		plugins: [
    			new webpack.ProvidePlugin({
            		UTILS: [path.resolve(__dirname, './src/utils/Utils.js'), 'default'], // 定义的全局函数类
    				TOAST: [path.resolve(__dirname, './src/utils/Toast.js'), 'default'], // 定义的全局Toast弹框方法
    				LOADING: [path.resolve(__dirname, './src/utils/Loading.js'), 'default'] // 定义的全局Loading方法
          		})
    		]
    	}
    }
    

    这样定义好了之后,如果你项目中有ESlint,还需要在根目录下的.eslintrc.js文件中,加入一个globals对象,把定义的全局函数类的属性名启用一下,不然会报错找不到该属性。

    module.exports = {
      root: true,
      parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
      },
      env: {
        browser: true,
        node: true,
        es6: true,
      },
      "globals":{
        "UTILS": true,
        "TOAST": true,
        "LOADING": true
      }
      // ...省略N行ESlint的配置
    }
    

    定义好了之后,重启项目, 使用起来如下:

    computed: {
    	playCount() {
    		return (num) => {
    			// UTILS是定义的全局函数类
    			const count = UTILS.tranNumber(num, 0)
    			return count
    		}
    	}
    }
    

    缺点:

    • 还没发现…

    优点:

    • 团队开发爽

    官方说明文档


    如果看了觉得有帮助的,我是@鹏多多i,欢迎 点赞 关注 评论;END

    PS:在本页按F12,在console中输入document.querySelectorAll('.tool-item-href')[0].click(),有惊喜哦~

    面向百度编程

    公众号

    公众号

    往期文章

    个人主页

    展开全文
  • vue全局方法创建

    2021-01-13 03:49:37
    目的:想要实现一个util.js的全局方法。类似于Java可以通过类名.方法名来调用的静态方法。项目的结构util.js的内容let Util = {printTest:function (message) {console.log(message);}};export default Util;我在...

    目的:想要实现一个util.js的全局方法。类似于Java可以通过类名.方法名来调用的静态方法。

    项目的结构

    util.js的内容

    let Util = {

    printTest:function (message) {

    console.log(message);

    }

    };

    export default Util;

    我在public/static/js下建立了util.js,并在index.html中引入util.js,希望在vue的全局js中可以实现Util.printTest(x)方法。

    index.html

    我现在做的方式有两种

    1.通过import util.js在.vue文件中才能使用,但是util.js建立的初衷是供多个.vue文件使用的;这种方式需要在每个用到的.vue文件中进行导入。

    2.通过import util.js到main.js文件中,使用

    Vue.prototype.$util = util

    再在使用的地方通过this.$util.printTest()

    我发现不import,用ctrl+左键能定位到对应的js方法。但是会编译不过,报错

    ESLint: 'Util' is not defined.(no-undef)

    定位

    1.我在index.html中导入的js文件,为什么在其他地方还要import才能使用呢?

    2.怎么才能不导入.vue或者main.js这两个文件就能全局使用呢?

    跪求路过的大佬解答,万分感谢!!!

    回答

    首先我不明白你为什么要这样做,我认为对于utils这种工具还是挂载带原型上比较好。

    你在index.html通过script标签引入了util文件,相当于在全局上声明了变量Util。所以你是可以在任何组件里使用的。

    至于Eslint报错是因为它无法识别Util是从哪里来的。

    2种方法使Eslint不报错

    1.修改ESlint的rules

    no-undef:0

    2.在Eslint配置文件中添加globals

    "globals": {

    Util:true

    },

    展开全文
  • Vue全局挂载方法、全局挂载组件

    千次阅读 2021-01-09 10:57:10
    1. 全局挂载组件 import pageNation from '@/components/Pagination' Vue.component('pageNation', pageNation) ...2. 全局挂载方法 import { getItems } from '@/utils/costum' Vue.prototype.getItems = getItems

    在main.js 引用

    1. 全局挂载组件
    import pageNation from '@/components/Pagination'
    Vue.component('pageNation', pageNation)
    
    1. 全局挂载方法
    import { getItems } from '@/utils/costum'
    Vue.prototype.getItems = getItems
    

    Tips:【小程序云开发】中高级前端面试题库(源码:小程序中联系我哟)。
    ---------- 创作不易,感谢大家,请多多支持!
    在这里插入图片描述

    展开全文
  • vue: 全局方法挂载

    2021-08-19 01:12:21
    然后通过vue.prototype去全局装载 import Vue from 'vue' import App from './App.vue' import router from './router' import Cookies from 'js-cookie' import './assets/icons' // icon // import './...
  • vue添加全局方法

    2021-03-03 20:03:25
    1、创建initList.js文件(存放公共方法) import store from '@/store' export default { /** * 按钮权限 * code 就是权限表的code, 多个权限需要传入数组 * type只有在多个权限的时候生效, 支持 some(默认) ...
  • Vue 之 注册全局方法

    2021-09-06 10:07:51
    1.在globle.js中定义全局方法,例如 2.在main.js中进行引入 3.使用 利用全局混入mixin 优点:因为globleMixin里面的methods会和创建的每个单文件组件合并,使得调用这个方法的时候会有提示 1.定义...
  • vue中配置全局方法

    2021-11-03 21:49:09
    定义全局方法 1. 在src/api/system目录下创建config.js文件 import request from '@/utils/request' // 根据参数键名查询参数值 export function getConfigKey(configKey) { return request({ url: '/system/...
  • 一、全局引入文件1、先定义共用组件 common.vue// 定义一些公共的属性和方法const httpUrl = 'http://39.105.17.99:8080/'function commonFun() {console.log("公共方法")}// 暴露出这些属性和方法export default {...
  • uniapp在app.vue定义全局方法

    千次阅读 2021-04-07 10:30:36
    uniapp在app.vue定义全局方法 uniapp在app.vue定义全局方法 在app.vue定义 // app.vue onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function...
  • install 方法将被作为 Vue 的参数调用。当 install 方法被同一个插件多次调用,插件将只会被安装一次。Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器,第二个参数是...
  • 实例方法是将方法挂载到Vue的原型上,而全局API是直接在Vue上挂载方法。 实例方法 事件相关 在eventsMixin函数中挂载到Vue原型上的 vm.$on和emit 发布订阅模式 vm.$on( event, callback ) vm.$on('test', function ...
  • 在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert、modal等组件每个页面引入就得重复引入,并不像element那样可以通过this.$xxx来调用...
  • 全局公共方法三种实现: 按需引入 import {xxx1, xxx2} from '@/utils' mixin混入 Vue.extend({ mixins: [myMixin] ...单从混入方法来讲,全局混入容易造成污染,也会有不必要的引入(vue自身优化掉不使用的函
  • 一、全局引入css样式// 文件目录:/src/assets/styles/reset.less/src/assets/styles/common.less// 引用:app.vue@import '~@/assets/styles/reset.less';@import '~@/assets/styles/common.less';二、全局引入公共...
  • vue jest 全局方法

    2021-02-07 08:56:30
    原文地址
  • Vue中实现全局方法

    千次阅读 2020-12-23 11:55:52
    现实背景:很多时候我们会在全局调用一些方法。实现方式两种:官网的实现use方法,然后你也可以用野路子直接在Vue.prototype上面定义。先说野路子,因为其实野路子就是最根本的实现方式,官方的use实现也是一样的,...
  • 在crypto.js文件中创建自己的自定义的方法Crypto()。 import CryptoJS from 'crypto-js' export default{ install(Vue){ Vue.prototype.Crypto = function (word, getkey) { console.log(word,getkey) var key ...
  • Vue中自定义全局组件的实现方法

    千次阅读 2020-12-29 10:24:06
    涉及知识点是vue.js官网教程中的插件使用方法如下:首先我遇到的问题就是我自定义的组件如果需要在项目中其他组件中多次被调用,而我之前的解决方法就是简单的,哪里需要在哪引用。这无疑增加了许多代码重复。而在...
  • 本篇文章主要介绍了vue自定义全局组件并通过全局方法 Vue.use() 使用该组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下简介Vue.use( plugin ):安装 Vue.js 插件。如果插件是一个对象,必须提供 install ...
  • vue项目中经常会用全局的变量,或者定义全局的方法首先新建一个utils.js的文件,里面放上你需要的全局方法以及变量呀举个例子/*** 时间戳* @param {*} timestamp 时间戳*/const timestampToTime = (timestamp) =&...
  • 在.vue后缀名的文件,和.js后缀名的文件里,使用全局变量的语法是不一样的。.vue模板文件可以直接访问挂载在Vue实例上的全局对象,而普通的.js文件访问不到。定义全局变量在任意路径下创建一个.vue文件。我这里创建...
  • vue3 全局方法

    2021-06-02 15:01:54
    vue3.0取消了Vue.prototype,官方文档推荐使用globalProperties
  • 挂载到全局方法 vue3 使用 app.config.globalProperties 进行全局方法的定义,全局方法定义后,就无需每个页面使用时,进行单独引用了。 const app = createApp(App) app.config.globalProperties.$formatTime = ...
  • 使用场景:在Vue组件中点击某元素之外的地方移除该元素需求:如上图所示,“用户列表”页面有三个Vue组件组成,分别是“菜单组件”,“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”,当我们...
  • vue项目注册全局方法

    2020-12-25 18:03:03
    vue项目注册全局方法可使用$on和$root结合使用 本案例是在App.vue中注册了一个全局方法 1,在App.vue中created()方法中注册一个方法 this.$root.$on("appGuide",this.doGuideMethod);//注册一个全局方法 在methods...
  • 有些情况下我们需要定义全局方法 然而在vue3.0中我们定义全局方法需要在globalProperties上面定义大部分情况下还是可以定义在main.js中的 我们这里就以定义在main.js中为例 // 这里我们就简单的随便添加一个属性 ...
  • vue全局API和使用方法

    2021-01-17 01:36:08
    Vue.use(plugins) 注册一个插件例子:import Vue from 'vue'import Router from 'vue-router'// 不要忘了调用此方法Vue.use(VueRouter)Vue.directive()创建或者获取自定义指令// 注册(指令函数)Vue.directive('my-...
  • 这种方法的致命问题:就是main.js是入口文件,第一次使用这个全局变量当然没有问题,但是当你刷新页面的时候,由于又重新创建了vue实例,之前为全局变量设置的值就会消失。网上似乎有监听它变化然后赋值到local或者...
  • Vue + Ts 封装axios 及 全局方法挂载

    千次阅读 2021-02-21 16:46:04
    Vue + Ts 封装axios 及 全局方法挂载

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 148,132
精华内容 59,252
关键字:

vue全局方法

vue 订阅