自定义指令-实现密码禁止被复制粘贴

杨杨得亿Y

已于 2023-07-05 17:10:29 修改

阅读量346

点赞数 1

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2023-06-27 14:02:44 首次发布

本文链接：https://blog.csdn.net/yyh123456hhh/article/details/131415600

版权

VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js应用中创建一个自定义指令，用于禁止用户在密码输入框中执行复制、粘贴操作。通过在directives文件夹下创建password.js和index.js文件，定义并注册了一个名为v-password的指令。当指令绑定到输入框元素上时，会监听剪切、复制和粘贴事件并阻止这些行为。这个解决方案可以方便地应用于多个需要保护密码安全的输入框。

摘要由CSDN通过智能技术生成

背景：希望所有涉及密码的地方都禁止复制、粘贴，考虑到需要修改的地方较多，所以采用自定义指令的方式来实现此功能。

1.新建一个名为directives的文件夹，然后分别新建index.js和password.js文件

password.js文件中代码如下：

// 密码框禁止复制和粘贴密码的指令
const EVENTS = ['cut', 'copy', 'paste']

function prevent (event) {
  event.preventDefault()
  return false
}

export default {
  inserted: (el) => {
    console.log(el);
    if (!el) return
    EVENTS.forEach(event => {
      el.addEventListener(event, prevent)
    })
  },
  unbind: (el) => {
    if (!el) return
    EVENTS.forEach(event => {
      el.removeEventListener(event, prevent)
    })
  }
}

index.js文件的代码如下：

import Vue from 'vue'
import password from './password'

const directives = {
  password
}

export default {
  install: Vue => {
    Object.keys(directives).forEach(key => {
      Vue.directive(key, directives[key])
    })
  }
}

2.在mian.js中引入该文件，即可在需要进行处理的标签中加上该指令v-password即可生效

3.实际使用示例：

  <el-form-item label="" prop="newPassword" style="padding-bottom:4px;">
          <tvt-input v-password :label="$translate('inputNewPasswordName')" required  v-model.trim="emailForm.newPassword" @blur="checkPwdSame" type='password'
          :clearable="false" :isSensitive="true" class="email_style" maxlength="32" hidden autocomplete="new-password" @input="createPyNew"></tvt-input>
      </el-form-item>
      <el-form-item label="" prop="confirmNewPassword">
          <tvt-input v-password :label="$translate('inputConfirmNewPasswordName')" required v-model.trim="emailForm.confirmNewPassword" type='password'
          :clearable="false"  :isSensitive="true" class="email_style" maxlength="32" hidden autocomplete="new-password" @input="createPyCom"></tvt-input>
      </el-form-item>