5月前端开发日记整理

浅浅的花香味﹌ 2023-09-28 08:07 160阅读 0赞

**目录**

前言：

1.阻止鼠标右键事件

2.bug： 表单编辑时输入无效

3.显示/隐藏密码功能+小眼睛效果

4.当表单必填项没填时提交按钮不可点击且置灰

5.屡试不爽的神技-刷新页面

6.ElementUI表单验证注意事项

7.ElementUI最大输入和最小输入及清空图标

8.数组累计问题

--------------------

### 前言： ###

> **由于最近开发的项目基于vue，所以本文是基于vue的**

--------------------

### 1.阻止鼠标右键事件 ###

mounted () {
        let that = this
        // 注意 取消默认行为 我们鼠标右键的时候 一般是弹出 浏览器的 属性 刷新等等的那个菜单
        // 阻止默认行为 就没有那个菜单出来了
        document.addEventListener('contextmenu', function (e) {
          e.preventDefault()
          that.anQuanSeach()
          console.log("^^^…………………………大大大")
        })
    
      },

--------------------

### 2.bug： 表单编辑时输入无效 ###

> **做表单时点击编辑页，发现无法对input框内的数据修改(有时也会很正常，但后患无穷)，控制台警告如下**

**关键词:violation**

![b674d1a458e34232a3dbaf2f41b94217.png][]

**使用解决办法：**

（1）npm i default-passive-events -S 
    （2）main.js中加入：import ‘default-passive-events’

**成功解决后**

> 然而，我项目中有使用拖拽连线组件jsplumb，发现连线报错。

![8da1adb3aefd43a385ed3bac0118f7a1.png][]

> **最终解决方法为：将default-passive-events放到表**

**单组件中引入而不是全局引入**

import './default-passive-events/dist/index'//解决控制台警告……

![12247fc26dc246bb82b03c70db0341e2.png][]

--------------------

### 3.显示/隐藏密码功能+小眼睛效果 ###

//模板                  <el-input
                          :type="passwordType"
                          v-model="dialogEdieot.password"
                          autocomplete="off"
                        ></el-input>
                        <span class="show-pwd" @click="showPwd">
                          <svg-icon
                            :icon-class="
                              passwordType === 'password' ? 'eye' : 'eye-open'
                            "
                          />
                        </span>
    data:
    passwordType: 'password',
    
    method:
       showPwd () {
          if (this.passwordType === 'password') {
            this.passwordType = ''
          } else {
            this.passwordType = 'password'
          }
    
        },
            
    
    css:
       .show-pwd {
      position: absolute;
      right: 0.2084rem;
      top: -0.0052rem;
      font-size: 0.0833rem;
      color: #7c7c7e;
      opacity: 0.5;
      cursor: pointer;
      user-select: none;
    }

--------------------

### 4.当表单必填项没填时提交按钮不可点击且置灰 ###

> **思路是：**
> 
> **使用watch监听表单数据（v-model绑定的）来动态控制按钮的disabled属性**
> 
> **注意：下面watch是监听的对象，使用的深度监听**

watch: {
       
        dialogEdieot: {
          handler (newValue, oldValue) {
            // 如果点击提交按钮必填项为空按钮不可点击且灰色
            if (newValue.ip && newValue.name ) {
              this.isTiJiao = false //当IP和name无变化时按钮为可点击
    
            } else {
              this.isTiJiao = true//当IP和name无变化时按钮为不可点击
    
            }
          },
          deep: true,
        }
      },

--------------------

### 5.屡试不爽的神技-刷新页面 ###

> **工作中使用比较多，简单暴力可以避免很多很多坑点，还有一个有点，用户体验度比较好**
> 
> **在你的app.vue页面内（如果你的根组件不叫这个，那就找你的路由出口<router-view />）**
> 
> **按照以下方式设置：**

<template>
      <div id="app">
        <router-view v-if="isRouterAlive" />
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      provide () {
        return {
          reload: this.reload
        }
      },
      data () {
        return {
          isRouterAlive: true
        }
      },
      methods: {
        reload () {
          this.isRouterAlive = false
          this.$nextTick(function () {
            this.isRouterAlive = true
          })
        }
      }
    
    
    }
    </script>

然后就可以在任意一个组件内这样使用：

inject: ['reload'],
      data () {
        return {}
      },

--------------------

### 6.ElementUI表单验证注意事项 ###

其实就三步，这个不多说。

> **问题：表单验证只有在错误的时候才会提示，且一直卡在错误提示处，这是因为定义的规则那里没有对正确的情况下写callback（）**

data () {
        var checkIp = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('ip不能为空'))
          }
          let vulue2 = "" + value
          let values = vulue2.replace(/\s+/g, "")
          var pattern = /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)$/
          if (pattern.test(values)) {
            callback()
          } else {
            callback(new Error('非法ip地址!')) //ip地址输入有误
          }
        }
        return {}

--------------------

### 7.ElementUI最大输入和最小输入及清空图标 ###

> **maxlength="30" //最多输入30个字符**
> 
> **minlength="30" //最小输入30个字符  
> clearable //显示清空按钮**

<el-input
                        maxlength="30" //最多输入30个字符
                        clearable //显示清空按钮
                        placeholder="请输入1-30个字符"
                        v-model="dialogEdieot.ip"
                        autocomplete="off"
                      />

--------------------

### 8.数组累计问题 ###

**场景：**

> 比如点击详情页本来数据是三条，再点其他数据累加了，大概率是数组push()的原因，先清空数组再装数据就好了。

![4c17c16074fc48729042c6c9502e5bb6.png][]

[b674d1a458e34232a3dbaf2f41b94217.png]: https://img-blog.csdnimg.cn/b674d1a458e34232a3dbaf2f41b94217.png
[8da1adb3aefd43a385ed3bac0118f7a1.png]: https://img-blog.csdnimg.cn/8da1adb3aefd43a385ed3bac0118f7a1.png
[12247fc26dc246bb82b03c70db0341e2.png]: https://img-blog.csdnimg.cn/12247fc26dc246bb82b03c70db0341e2.png
[4c17c16074fc48729042c6c9502e5bb6.png]: https://img-blog.csdnimg.cn/4c17c16074fc48729042c6c9502e5bb6.png