vue

最新推荐文章于 2025-04-07 10:26:32 发布

Lei_zhen96

最新推荐文章于 2025-04-07 10:26:32 发布

阅读量182

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Lei_zhen96/article/details/88718867

本文介绍了Vue开发的实用技巧，包括将自定义函数挂到全局的两种方法，本地图片预览可使用ObjectURL，路由登录权限可通过设置meta的requireAuth及在beforeEach函数判断，vue生命周期created里的dom操作要放this.$nextTick，还提及fastclick处理移动端click延迟的使用。

day01:

Vue自定义函数挂到全局方法

方法一：使用exports.install + Vue.prototype

自定义一个fun.js函数，写需要全局调用的方法,

export default {
    install(Vue) {
        Vue.prototype.getNowDate = function(){
            //方法
        },
        Vue.prototype.reflash = function() {
            //方法
        }
    }
}

在main.js里调用fun.js

import fun from './fun'
Vue.use(fun);

在其他组件里可以调用挂载定义的函数，比如 this.reflash();

方法二:使用全局变量模块文件
新建一个Global.vue文件

<script>
    const token = '123456789';

    export default {
        methods: {
            getToken() {
                //方法
            }
        }
    }
</script>

在其他文件里需要引用此全局变量模块文件，然后调用相应的方法或者变量名

<script>
    import global from './Global';

    export default{
        data() {
            return {
                param: global.token,
            }
        },
        methods:{
            getGlobals() {
                global.getToken();
            }
        }
    }
</script>

本地图片预览

除了base64还可以用ObjectURL

常规情况下:window.createObjectURL(file)

火狐内核:window.URL.createObjectURL(file)

webkit/chrome内核:window.webkitURL.createObjectURL(file)

window.URL.createObjectURL可以浏览视频或者图片,其生成的URL放在video的src里可以预览视频。

路由的登录权限

在router.js里对meta的requireAuth设置是否需要登录权限来访问页面，

在beforeEach函数里，筛选出需要登录权限的路由，再对当前用户做判断，判断当前用户已登录或者登录异常，

如果用户已登录则next( );否则跳到登录异常的方法以及页面。

Vue.nextTick()使用场景

1.在vue的生命周期函数created()里的dom操作一定要放在this.$nextTick(function(){})里，因为created函数执行的时候，DOM元素并没有渲染，所以这时候的操作是无用的，所以要放在this.$nextTick()这个对DOM的的异步操作的方法里。

2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中

fastclick在vue项目中的使用

fastclick：处理移动端click事件300毫秒延迟。

安装fastclick

npm install fastclick -S

在main.js中

import FastClick from 'fastclick'

FastClick.attach(document.body);