精华内容
下载资源
问答
  • vue兼容低版本浏览器

    2021-07-09 14:10:46
    1、babel-polyfill npm install --save babel-polyfill 在main.js 头部引入import "babel-polyfill"; 2、引入babel-polyfill后,有时编译还会...基本上是vue引入了第三方插件包含es6语法,但没有配置采用babel-l.

    1、babel-polyfill

    npm install --save babel-polyfill

    在main.js 头部引入 import "babel-polyfill";

    2、引入babel-polyfill后,有时编译还会报错:

    Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

    基本上是vue引入了第三方插件包含es6语法,但没有配置采用babel-loader来解析和转化为es5语法的原因,需要在webpack.config.js里配置loader,vue-cli是不会帮忙配置的。在webpack.base.conf.js添加对应的文件夹,重新启动就可以了。

     3、编译时报错:Couldn’t find preset “es2015” relative to directory。

    原因:由于引入的 Element-UI 使用了ES标准,所以编译会报错。

    解决方法:安装ES标准。

    npm install babel-preset-es2015 --save-dev

    展开全文
  • 当当前浏览器为低版本浏览器,插件不支持IE低版本时候,给出友好提示。 /** 新增公告按钮 */addNotice () {// 取得浏览器的userAgent字符串var userAgent = navigator.userAgent;// 判断是否为小于IE11的浏览器var ...

    当当前浏览器为低版本浏览器,插件不支持IE低版本时候,给出友好提示。

    /** 新增公告按钮 */

    addNotice () {

    // 取得浏览器的userAgent字符串

    var userAgent = navigator.userAgent;

    // 判断是否为小于IE11的浏览器

    var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;

    if (isLessIE11) {

    this._message('请升级至IE11或更换其他浏览器,才能使用发布公告功能', 'warn')

    } else {

    this.afferentID = ''

    this.addDialog = true

    this.titleName = '新增公告'

    }

    },

    补充:

    // 取得浏览器的userAgent字符串

    var userAgent = navigator.userAgent;

    // 判断是否为小于IE11的浏览器

    var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;

    // 判断是否为IE的Edge浏览器

    var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;

    // 判断是否为IE11浏览器

    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;

    当isLessIE11时,

    var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');

    // 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分,,这一步不可省略!!!

    IEReg.test(userAgent);

    // 取正则表达式中第一个小括号里匹配到的值

    var IEVersionNum = parseFloat(RegExp['$1']);

    // IE7 IEVersionNum === 7

    // IE8 IEVersionNum === 8

    // IE9 IEVersionNum === 9

    // IE10 IEVersionNum === 10

    // IE版本<7 IEVersionNum < 10

    展开全文
  • vue项目浏览器缓存问题

    千次阅读 2021-05-28 11:08:52
    在项目中遇到比较棘手的事,就是每次通过jenkins构建发布后最新的代码,访问的是一直是原页面,必须手动刷新才会显示最新的代码,一开始就定位的是浏览器缓存问题。网上也漫无目的的查资料,也一直没有解决。vue...

    在项目中遇到比较棘手的事,就是每次通过jenkins构建发布后最新的代码,访问的是一直是原页面,必须手动刷新才会显示最新的代码,一开始就定位的是浏览器缓存问题。网上也漫无目的的查资料,也一直没有解决。vue脚手架打包的文件都会加上hash值的,但是忽略的html的缓存机制

    打开network查看所有资源,查看到首页 状态码是304 Not Modified,进而可以定位到是html缓存问题
    在这里插入图片描述
    为了解决这个问题 最简单的办法就是让html不做任何缓存,通过nginx来配置 网上也查了一些资料

    location / {
                    if ($request_filename ~* .*\.(?:htm|html)$)  ## 配置页面不缓存html和htm结尾的文件
                    {
                       add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
                    }
                    root /apps/web/;
                    index index.html
                    gzip_static on;  // 开启gzip
            }
    
    展开全文
  • vue关闭浏览器退出登录

    千次阅读 2021-11-30 21:41:42
    根据`beforeunload`和`unload`这两个事件实现关闭浏览器退出登录。

      项目需要:也在网上找了不少类似的文章,不过用起来多少有点问题,毕竟要适合自己的需求,我这里是vue3适用,理论上vue2也可以使用,我写的方法是通用的。

      这些方法无非都是根据beforeunloadunload这两个事件执行的。
      下面我搜了下菜鸟教程和MDN对两个事件的介绍,可自行琢磨。

    1、beforeunload事件

    1.1、菜鸟教程:

    在这里插入图片描述

    1.2、MDN

    在这里插入图片描述

    2、unload事件

    2.1、菜鸟教程

    在这里插入图片描述

    2.2、MDN

    在这里插入图片描述
      MDN:通常而言,我们推荐使用 window.addEventListener() 来监听 unload (en-US) 事件,而不是直接给 onunload 赋值。

    下面贴我使用的源码;

    3、源码部分

    3.1、方法一:可写于html页面使用(直接使用)

          var _beforeUnload_time = 0, _gap_time = 0;
          window.onunload = function (){
              _gap_time = new Date().getTime() - _beforeUnload_time;
              if(_gap_time <= 10) {//浏览器关闭
                  window.mgr.signoutRedirect();//这个mgr是我暴露在window的退出登录方法
              }else{//浏览器刷新-chrome刷新
                  console.log(document.domain);
                  return confirm("确定要离开本系统么?");
              }
          };
          window.onbeforeunload = function (){
              _beforeUnload_time = new Date().getTime();
          };
    

    3.2、方法二:可写于组件如app.vue使用(监听事件)

      data() {
        return {
          gap_time: 0,
          beforeUnload_time: 0,
        };
      },
      methods: {
        // 关闭窗口之前执行
        beforeunloadHandler() {
          this.beforeUnload_time = new Date().getTime();
        },
        unloadHandler() {
          this.gap_time = new Date().getTime() - this.beforeUnload_time;
          //判断是窗口关闭还是刷新 毫秒数判断 网上大部分写的是5
          if (this.gap_time <= 10) {
            mgr.signoutRedirect(); // 退出登录接口 这里应当换为个人的登出方法
          } else {
            console.log(document.domain);
            return confirm("确定要离开本系统么?");
          }
        },
      },
      unmounted() {//vue可换为destroyed()生命周期,不过这个也可以用
        // 移除监听
        window.removeEventListener("beforeunload", () => this.beforeunloadHandler());
        window.removeEventListener("unload", () => this.unloadHandler());
      },
      mounted() {
        // 监听浏览器关闭
        window.addEventListener("beforeunload", () => this.beforeunloadHandler());
        window.addEventListener("unload", () => this.unloadHandler());
      },
    

    参考文章:
      vue关闭浏览器时,触发事件,执行退出登录接口
      vue 关闭浏览器清空token (区分刷新)

    展开全文
  • 注意:区分不了浏览器是触发了刷新还是关闭,而且提示的弹框是无法自定义的;如果有大佬有方法能区分,还请评论学习一下!感谢! 代码可直接复制: <template> <div /> </template> <script...
  • Vue 调取浏览器打印

    2021-10-20 10:45:28
    调取浏览器打印 vue-print-nb Vue使用vue-print-nb 控制台输入指令安装 vue-print-n npm install vue-print-nb --save main.js文件全局引入 import Print from ‘vue-print-nb’ Vue.use(Print) 需要打印区域 ...
  • vue监听浏览器返回

    2021-12-06 10:57:17
    监听浏览器的回退按钮,并阻止其默认事件。 1.dom挂载完成后,判断浏览器是否支持popstate。 //监听浏览器返回 if (window.history && window.history.pushState) { history.pushState(null, null, ...
  • import Vue from 'vue' import VueRouter from 'vue-router' import Hologram from '../components/qxhx/Hologram.vue' const routes = [ { path: '/', name: 'Hologram', component: Hologram, /*1.在route...
  • //浏览器关闭 if (_gap_time ) { window.localStorage.removeItem("havePlay"); } }//skinLayout设置只显示全屏和音量按钮 //点击播放后调打点方法 //视频由暂停恢复为播放时触发。 that.player.on('completeSeek', ...
  • 当当前浏览器为低版本浏览器,插件不支持IE低版本时候,给出友好提示。/** 新增公告按钮 */addNotice () {// 取得浏览器的userAgent字符串var userAgent = navigator.userAgent;// 判断是否为小于IE11的浏览器var ...
  • vue 修改浏览器title

    2021-06-17 11:53:10
    当然你的项目如果是使用webpack或者是vue-cli创建出来的项目,那么你会在title的地方看到 <%= htmlWebpackPlugin.options.title %> //或 <%= webpackConfig.name %> 动态修改title 方法一、 第一步:在...
  • 官方宣称准确度高达99.5%,但我也看到有人说是94%。...使用的具体代码 // 获取浏览器的唯一标识符 createFingerprint() { // 浏览器指纹 const fingerprint = Fingerprint2.get((components) => { //
  • vue禁止浏览器回退

    2021-11-17 13:20:03
    编程式导航 | Vue Router 想要导航到不同的 URL,可以使用router.push方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。 rputer.replace的作用类似于router....
  • 项目中遇到长按、鼠标右键等操作时,会出发浏览器的默认事件,这时候我们要阻止浏览器默认事件,在vue中阻止默认事件,可以使用 @contextmenu.prevent=""实现
  • 禁用前进后退功能在开发vue应用中,如何禁用浏览器的前进后退功能呢?网上搜到的答案基本如下:history.pushState(null, null, document.URL)window.addEventListener('popstate', function() {history.pushState...
  • 首先因为是vue项目,不想就因为这个进入jquery.js,占的内存多。 所以我的解决方法如下: 然后在mounted钩子函数里加入: document.getElementById(“disableRightClicking”).oncontextmenu = function (e) { ...
  • 如何禁止谷歌浏览器自动填充密码 这里以elementUI为例: 有给input加autocomplete="off"的 <el-form-item label="原密码:" prop="oldCode"> <el-input v-model="form.old...</el-input>.../el-form-i
  • data() { return { _beforeUnload_time:0, _gap_time:0, } ...监听关闭浏览器本窗口 window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.addEventListen.
  • 最近在做着的这个项目发现了一些bug,当用户点击浏览器的前进和撤退的时候,上一页数据保存了下来并没有刷新页面,这样会出现很多奇奇怪怪的bug,我只希望用户通过按钮来跳转,然后就需要禁止浏览器的前进和后退 ...
  • vue关闭浏览器时,触发事件,执行退出登录接口** <template> <div id="app"> <router-view /> </div> </template> <script> export default { name: 'App', data() { ...
  •  本人实现调用摄像头拍照以下代码 经测试 (Google Chrome 88.0.4324.182) 版本可用 各位可以试一试其他浏览器  参考代码 https://www.jb51.net/article/193305.htm 发布到服务器只能支持HTTPS的 HTTP类型的会报错...
  • 获取浏览器的指纹码 操作步骤: 1.vue安装插件 (1)使用CDN在线获取:https://cdnjs.com/libraries/fingerprintjs2 (2)使用bowerinstall命令进行安装: bowerinstall fingerprintjs2 (3)npm 下载: ...
  • 当然,写vue修改浏览器滚动条的样式有些不妥。因为这是css的事情,只要应用中加入全局或某个页面的滚动条样式就要以实现。以下是示列:::-webkit-scrollbar {width: 10px;}::-webkit-scrollbar-track {--webkit-box-...
  • vue修改浏览器小图标

    千次阅读 2020-12-24 10:39:33
    把图片保存在 static 目录下,命名结束以 .ico结尾
  • 1、项目中使用的是sreenfull插件,执行命令安装npm install --save screenfull2、安装好后,引入项目,用一个按钮进行控制即可,按钮方法如下:toggleFullscreen() {if (!screenfull.enabled) {this.$message({...
  • 这篇文章主要介绍了解决Vue 浏览器后退无法触发beforeRouteLeave的问题,需要的朋友可以参考下现象加载第一个组件(这里的第一个意思是浏览器历史记录的第一个,后文称为 待监听组件 )时,正常跳转其他页面可以触发...
  • vue项目的public目录里面找到index.html在标签title下面加上下面这段代码即可 <script type="text/javascript"> (function(window) { var theUA = window.navigator.userAgent.toLowerCase(); if (...
  • 知识点 浏览器关闭执行的是 beforeunload , unload 这两个事件; 而浏览器刷新执行的是...所以,通过时间差来判断浏览器是刷新还是关闭,浏览器执行beforeunload的时候给一个开始时间,执行unload的时候给一
  • }, methods:{ //公共使用控制页面大小收缩 commonSySize(){ let idTag=document.body; if(idTag.offsetWidth){ this.perSonCenterShow=false; } if(idTag.offsetWidth){ this.kcSecondDhShow=false; }else{ this....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 157,036
精华内容 62,814
关键字:

vue使用浏览器的版本

vue 订阅