最近做公众号项目,想着统一风格,所以决定使用vux。

在调试时发现,只要鼠标点击x-input输入框,就会报错

TypeError: _this3.$refs.input.scrollIntoViewIfNeeded is not a function

什么鬼,作为前端小白的我一脸懵逼,这么快就遇到vux框架的坑了吗?

根据错误提示,在node_modules中查找vux的x-input实现方式,

在node_modules => vux => src => x-input找到如下目录内容:

提示说了:问题在

打开index.vue 在365行果然找到出问题的代码

然鹅,这玩意啥意思我完全不懂,搜索了一番,

发现

scrollIntoViewIfNeeded()方法的作用是:将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。

与之相近的还有

scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。

显然,scrollIntoViewIfNeeded()在移动端开发中是个好用的方法,但是,发现了,这个好用的方法不是面向全部浏览器的

scrollIntoView 与 scrollIntoViewIfNeeded API 介绍

参考文章给了俩方法适应的浏览器:

看到这里,我总算明白了,这个错误应该是因为我用了firefox浏览器,,,,难怪搜了半天,没几个遇到我这情况的。。。

于是乎,我有了个大胆的想法,改一下index.vue的源码,如下:将方法改为兼容性更好的scrollIntoView

重新编译cnpm run dev,

在x-input中输入测试,没有报错了,over!

firefox浏览器中使用vux的x-input报错TypeError: _this3.$refs.input.scrollIntoViewIfNeeded is not a function的更多相关文章

  1. JavaScript在IE浏览器和Firefox浏览器中的差异总结

    JavaScript在IE浏览器和Firefox浏览器中存在一些差异,以下对这些差异部分进行了总结,以及解决方案: 1.HTML对象的 id 作为对象名的问题 IE:HTML 对象的 ID 可以作为 ...

  2. firefox浏览器中silverlight无法输入问题

    firefox浏览器中silverlight无法输入问题 今天用firefox浏览silverlight网页,想在文本框中输入内容,却没想到silverlight插件意外崩溃了.google一下,发现 ...

  3. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  4. 【转载】访问IIS中网站出现 403.14 - Forbidden报错信息

    将网站发布后部署到IIS后,配置完应用程序池以及相关设置项后,在浏览器中访问设置好的网站,出现403.14 - Forbidden的错误信息,从错误信息的提示来看,应该是IIS服务器此网站目录的内容被 ...

  5. IntelliJ IDEA中Mapper接口通过@Autowired注入报错的正确解决方式

    转载请注明来源:四个空格 » IntelliJ IDEA中Mapper接口通过@Autowired注入报错的正确解决方式: 环境 ideaIU-2018.3.4.win: 错误提示: Could no ...

  6. input()报错:TypeError: '>=' not supported between instances of 'str' and 'int'

    今天学习python基础—分支与循环,接触到了if.在练习一个if语句的时候,出现了错误. 题目是: 根据分数划分成四个级别:优秀.良好.及格.不及格,分数是72: grade = 72if grad ...

  7. 【maven】【IDEA】idea中使用maven编译项目,报错java: 错误: 找不到符号 【2】

    =================================================================================== idea中使用maven编译项目 ...

  8. Node中使用MySQL报错:TypeError: Cannot read property 'query' of undefined

    Node中使用MySQL报错: TypeError: Cannot read property 'query' of undefined at /Users/sipeng/Desktop/彭思/201 ...

  9. eclipse 中离线安装activiti插件,报错“An error occurred while collecting items to be installed session context was:(...”

    eclipse 中离线安装activiti插件,报错“An error occurred while collecting items to be installed session context ...

随机推荐

  1. 『嗨威说』算法设计与分析 - 动态规划思想小结(HDU 4283 You Are the One)

    本文索引目录: 一.动态规划的基本思想 二.数字三角形.最大子段和(PTA)递归方程 三.一道区间动态规划题点拨升华动态规划思想 四.结对编程情况 一.动态规划的基本思想: 1.1 基本概念: 动态规 ...

  2. idea的tomcat实现热部署遇到的问题

    选择Deployment的时候,要选择exploded结尾的,否则不支持热部署

  3. 哈夫曼树C++实现详解

    哈夫曼树的介绍 Huffman Tree,中文名是哈夫曼树或霍夫曼树,它是最优二叉树. 定义:给定n个权值作为n个叶子结点,构造一棵二叉树,若树的带权路径长度达到最小,则这棵树被称为哈夫曼树. 这个定 ...

  4. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  5. OptimalSolution(1)--递归和动态规划(1)斐波那契系列问题的递归和动态规划

    一.斐波那契数列 斐波那契数列就是:当n=0时,F(n)=0:当n=1时,F(n)=1:当n>1时,F(n) = F(n-1)+F(n-2). 根据斐波那契数列的定义,斐波那契数列为(从n=1开 ...

  6. ARM、X86和AI处理器的区别

    ARM.X86和AI处理器的区别 目前主要的处理器架构有: X86: Intel, AMD, 海光, 兆芯 ARM: 华为,飞腾,华芯通,Cavium,Ampere,富士通,亚马逊 POWER:IBM ...

  7. flask框架中使用wtforms

    一.什么是wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install WTForms 二.简单使用wtforms组件 (一 ...

  8. C++学习笔记2_函数.函数指针.函数模板

    1. 内联函数void printAB(int a,int b){ cout<<(a)<<(b)<<endl;}int main(void){ for(int i= ...

  9. Java零基础入门面向对象之多态

    多态: 多态的概念:一种事物的多种形态:允许不同类的对象对同一消息做出不同的响应 多态的前提:继承,重写:向上转型(父类引用指向子类对象) 多态的作用:提高代码的可用性:降低模块之间的耦合度 多态分类 ...

  10. OpenCV图像处理以及人脸识别

    OpenCV基础 OpenCV是一个开源的计算机视觉库.提供了很多图像处理常用的工具 批注:本文所有图片数据都在我的GitHub仓库 读取图片并显示 import numpy as np import ...