vue中如何做全屏跟全局时间过滤器
发布日期:2021-05-08 02:23:18 浏览次数:13 分类:精选文章

本文共 1887 字,大约阅读时间需要 6 分钟。

首先我们在template写一些标签

script data中定义一个变量

data(){   return {   fullscreen: false}}

然后在methods中写一个函数

// 全屏事件            addScreen(){                   let element = document.documentElement;                if (this.fullscreen) {                       if (document.exitFullscreen) {                           document.exitFullscreen();                    } else if (document.webkitCancelFullScreen) {                           document.webkitCancelFullScreen();                    } else if (document.mozCancelFullScreen) {                           document.mozCancelFullScreen();                    } else if (document.msExitFullscreen) {                           document.msExitFullscreen();                    }                } else {                       if (element.requestFullscreen) {                           element.requestFullscreen();                    } else if (element.webkitRequestFullScreen) {                           element.webkitRequestFullScreen();                    } else if (element.mozRequestFullScreen) {                           element.mozRequestFullScreen();                    } else if (element.msRequestFullscreen) {                           // IE11                        element.msRequestFullscreen();                    }                }                this.fullscreen = !this.fullscreen;}

Vue中全局时间过滤器操作如下:

首先在main.js中写

//时间过滤器Vue.filter('dataFormat', originVal => {     const dt = new Date(originVal)  const y = dt.getFullYear()  const m = (dt.getMonth() + 1 + '').padStart(2, '0')  const d = (dt.getDate() + '').padStart(2, '0')  const hh = (dt.getHours() + '').padStart(2, '0')  const mm = (dt.getMinutes() + '').padStart(2, '0')  const ss = (dt.getSeconds() + '').padStart(2, '0')  return `${   y}-${   m}-${   d} ${   hh}:${   mm}:${   ss}`})

然后在组件中使用的话只需要在你要过滤的时间后面加管道符(|dataFormat)就ok了

上一篇:史上最全Vue的组件传值
下一篇:常见的HTTTP状态码

发表评论

最新留言

不错!
[***.144.177.141]2025年03月26日 05时25分59秒