Vue+iview 密码框输入显示隐藏控制

在Vue.js和iView框架中，密码框（`<Input type="password">`）的输入内容通常默认会被星号(*)代替，这是为了保护用户隐私。如果你想在前端实现输入时显示实际字符，而在验证或提交前切换回星号，你可以这样做：

首先，安装iView库：

npm install iview

然后，在你的Vue组件中，创建一个名为`showPassword`的数据属性，并为其提供一个计算属性`inputType`，这个计算属性会根据`showPassword`的状态动态改变输入框的类型（文本或密码）：

<template>
  <div>
    <Input v-model="password" type="{{ inputType }}" placeholder="请输入密码" @input="handleInputChange" />
    <Button @click="togglePasswordVisibility">显示/隐藏</Button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      showPassword: false,
    };
  },
  computed: {
    inputType() {
      return this.showPassword ? 'text' : 'password';
    },
  },
  methods: {
    handleInputChange(e) {
      // 对密码进行处理，这里仅用于示例
      console.log('输入值:', e.target.value);
    },
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
  },
};
</script>

在这个例子中，当你点击“显示/隐藏”按钮时，`showPassword`状态会反转，`inputType`也随之变化，从而切换密码框的显示形式。