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

在input输入框中可以添加小眼睛图标，点击小眼睛即可设置密码可见性

<el-form-item label="密码" :label-width="formLabelWidth">
              <el-input
                :type="passwordVisible ? 'text' : 'password'"
                v-model="personalInfoForm.password"
                autocomplete="off"
              >
                <template slot="suffix">
                  <span
                    class="el-icon-view"
                    @click="togglePasswordVisibility()"
                  ></span>
                </template>
              </el-input>
</el-form-item>

方法实现：

export default {
  data() {
    return {
      personalInfoForm: {
        password: ''
      },
      formLabelWidth: '100px',
      passwordVisible: false
    };
  },
  methods: {
    togglePasswordVisibility() {
      this.passwordVisible = !this.passwordVisible;
    }
  }
};

样式：

组件主要使用elementUI,需要提前导入elementUI