el-input密码框眼睛眯住图片

el-input密码框眼睛眯住图片是指在vue+elementUi中，通过点击小图标实现密码的显示和隐藏，并且小图标会随着密码的显示和隐藏而变化。具体实现方法可以参考以下代码：

<el-input v-model="password" :type="showPassword ? 'text' : 'password'" placeholder="请输入密码">
  <i class="el-input__icon el-icon-view" v-show="!showPassword" @click="showPassword = true"></i>
  <i class="el-input__icon el-icon-view-show" v-show="showPassword" @click="showPassword = false"></i>
</el-input>

data() {
  return {
    password: '',
    showPassword: false
  }
}

.el-input__icon.el-icon-view-show:before {
  content: "\E6B4";
}

其中，通过v-show指令控制小图标的显示和隐藏，通过@click事件监听小图标的点击事件，通过computed计算属性控制密码框的type属性，从而实现密码的显示和隐藏。同时，通过CSS样式控制小图标的变化。

相关问题

el-input密码框不让输入中文

要让el-input密码框不允许输入中文，你可以使用正则表达式来限制输入的字符。下面是一个示例代码：

<template>
  <el-input v-model="password" :maxlength="20" :pattern="pattern" placeholder="请输入密码" show-password></el-input>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      pattern: /^[^\u4e00-\u9fa5]*$/ // 正则表达式，不允许输入中文
    }
  }
}
</script>

在上面的代码中，我们使用了`pattern`属性来设置正则表达式，`/^[^\u4e00-\u9fa5]*$/`表示不允许输入中文字符。这样，用户在密码框中输入中文时，将无法输入。

el-input隐藏边框

要隐藏 el-input 的边框，你可以使用以下两种方法之一：

1. 使用 CSS：给 el-input 添加一个自定义的 class，并使用 CSS 设置它的边框为 none。例如：

.hide-border {
  border: none;
}

然后在 el-input 中添加该 class：

<el-input class="hide-border"></el-input>

2. 使用 el-input 的属性：el-input 提供了一个名为 border 的属性，可以用来控制边框的显示。设置 border 属性为 false 可以隐藏边框。例如：

<el-input :border="false"></el-input>

无论使用哪种方法，都可以实现 el-input 的边框隐藏效果。