vue项目 踩过的坑

jason_yang
394 阅读2分钟

1.vue项目离奇添加奇怪的中文字

1.1 问题

  • 最近使用vue2+ element UI的项目，偶尔离奇的出现页面被强行添加奇怪的中文字。
  • 如图1和图2上面的 "零件", "个" , "小号"，"岁"等奇怪的文字。
  • 该项目已经运行了1年半，但是是最近半年才偶发性出现。
  • 图3是整个项目使用的第三方库。初步怀疑是不是第三方库有注入的可能。
  • 浏览器使用的是谷歌chrome

image.png

1.2 定位

由于项目的html表头使用了

<html lang="en">

浏览器会自动出现翻译的按钮 image.png

  • 这时候用户习惯性会点击“中文简体”进行翻译。
  • 导致已经是中文依然进行中文翻译，出现各种奇怪的翻译问题。

1.3解决

  • 代码修改
<!-- 把原来的 en 修改为 zh_cn 或者 去掉lang -->
<html lang="zh_cn">

这样就不会出现翻译按钮，也不会导致误点翻译的情况

2.element表单回车事件会触发页面被重刷

2.1问题：

 <el-form :inline="true"  @keyup.enter.native="fetchList">
          <el-form-item>
            <el-input
              v-model="params" 
              placeholder="输入单号"
          /></el-form-item> 
          <el-form-item>
           <el-button @click="fetchList">查询</el-button> 
          </el-form-item>
        </el-form>

当表单只有一个input框时候，在form绑定enter回车事件，回车事件正常触发后，同时还会刷新页面，导致内容丢失。

2.2定位

input文本框外有form标签，当form下只有一个input文本框时回车自动提交表单，导致刷新页面。

2.3解决

  1. 去掉form
  2. 添加多一个input
     <el-form-item style="margin-bottom:0;display:none;">
      <el-input></el-input>
    </el-form-item>
  1. 在input上回车事件 return false
<input  type="text"  onkeypress="if(event.keyCode==13 || event.which==13){return false;}" />

4. form 加onsubmit 事件,submit返回false

  <el-form :inline="true"  @submit.native.prevent  @keyup.enter.native="fetchList">
  </el-form>

3.Vue css scoped的使用

子CSS 一旦设置scoped ， 父想访问子一定要设置scoped，否则无效。

而且父需要使用 /deep/ 或者 ::v-deep 访问子 则

<style scoped lang="scss">
 #app { 
      /deep/ a { color: rgb(196, 50, 140) }
      ::v-deep a { color: rgb(196, 50, 140) }
 }
</style>

4.vue双击事件问题

1.谷歌浏览器 移动模式，不支持vue dblclick事件双击，但是真实的设备支持

avatar
文章
阅读
粉丝