vue，密码输入框，密码值为空的时候默认模拟6个点，如何实现？

Question

我目前的需求是，比如有一个修改表单的页面，该页面包含密码项

但目前密码项出于安全问题，后台不会返回过来。

所以此时编辑页面表单中的密码项就有一个交互需求就是：

• 在表单值中没有密码项的情况下：密码项默认模拟6个圆点
• 用户点击输入框清空
• 用户如果没有点击输入框，提交表单的时候密码项不传值

不知道要如何实现

Answer 1

<template>
  <div style="width:200px;">
    <el-form @submit.native.prevent="submit">
      <el-form-item label="密码">
        <el-input
          placeholder="请输入密码"
          type="password"
          v-model="input"
          @focus="focusHandle"
          @blur="blurHandle"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button native-type="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "      "
    };
  },
  computed: {
    password() {
      return this.input.trim();
    }
  },
  methods: {
    submit() {
      if (this.password) {
        // 提交密码
      } else {
        // 不提交
      }
    },
    focusHandle() {
      if (!this.password) this.input = "";
    },
    blurHandle() {
      if (!this.password) this.input = "      ";
    }
  }
};
</script>

Answer 2

我的想法很简单, 就是placeholer放6个点, 然后改一下placeholder的样式