Vue+ElementUI 密码文本框小眼睛设置密码可见性

在Vue中结合ElementUI使用密码文本框并添加小眼睛实现密码可见性切换的功能，可以通过el-input组件的type属性动态绑定来实现。下面是一个简单的示例：

<template>
  <div>
    <el-input :type="passwordVisible ? 'text' : 'password'" v-model="password">
      <template slot="append">
        <i class="el-icon-view" @click="togglePasswordVisibility"></i>
      </template>
    </el-input>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      password: '',
      passwordVisible: false
    };
  },
  methods: {
    togglePasswordVisibility() {
      this.passwordVisible = !this.passwordVisible;
    }
  }
};
</script>

在这个例子中，我们使用了el-input的slot="append"来添加一个小眼睛图标，并通过点击图标来切换passwordVisible的布尔值，从而实现密码的可见性切换。type属性绑定到passwordVisible上，当其为true时，文本框类型为文本（显示密码），为false时，文本框类型为密码。